ブラウザのリソース読み込み：ブラックボックスへの深層探求
2025-02-20
ウェブページとそのサブリソースの読み込みには、多くの要素が複雑に絡み合っています。ブラウザは、レンダリングブロッキングリソース、プリロードスキャナー、リソースヒント（プリロード/プリコネクト）、読み込み修飾子（async/defer/module）、fetchpriority、レスポンシブイメージなどを考慮します。そして、最適なHTTP/2およびHTTP/3接続を利用するために、どのリソースをいつ読み込むかを決定します。しかし、異なるブラウザは大きく異なる戦略を採用しており、意図的にリクエストを遅延させることさえあります。この講演では、リソース読み込みの意思決定プロセスを深く掘り下げ、LCPイメージなどの重要なリソースを優先するようにブラウザの動作に影響を与える方法を示します。多数のウォーターフォールチャートを分析し、ブラウザ間の差異を説明し、一般的な問題に対する解決策を提供します（fetchpriority=highで何もかもプリロードするという愚行は避けましょう）。ブラウザ内部のより深い理解を得て、リソース読み込みの課題に自信を持って取り組むことができるようになります。