ブラウザのリソースローディングについて

ブラウザは一般的に以下の順序でレンダリングします。

- htmlパース（上から下へ head -> body）:

1. HTMLパースとDOM生成
2. CSSファイルのロードと適用（レンダリングをブロック）
3. スクリプトのロードと実行（レンダリングをブロック）

4. <body>セクションの内容のレンダリング（画像、テキストなど）

ブラウザのリソース優先順位を制御することで、ページのロード速度を最適化できます。

以下のレンダリング順序を改善できる主要な属性を記録したいと思います。

- JavaScript: async、defer、module
- CSS: preload、media
- 画像：loading="lazy"、srcset、sizes
- その他：prefetch、preconnect、dns-prefetch

async ：htmlパースと並列でダウンロードされ、ダウンロード後にすぐに実行されます。ページのどのリソースがこのjsに関連している場合、asyncタグは削除することをお勧めします。

defer ：htmlパースと並列でダウンロードされ、htmlパースが完全に終了した後に実行されます。=順序が保証されます。htmlがすべてレンダリングされた後に実行する必要がある場合は、deferタグを追加することをお勧めします。

ブラウザは基本的にhtmlを最初にロードしますが、headタグ内にscriptソースがある場合、レンダリングがブロックされます。上記の2つのタグを追加することで、htmlレンダリングのブロックを防ぐことができます。

stylesheet ：デフォルト値です。レンダリングをブロックする要素であり、cssが必ずロードされる必要がある場合に使用します。

preload ：レンダリングをブロックせずに事前にダウンロードします。onloadイベント発生時点でstylesheetに変更され、スタイルが適用されます。

media：画面サイズ条件に一致する場合にレンダリングします。

loading="lazy"：画像が表示されるまでロードします。（スクロールの位置が画像のある要素の近くにあるとき）

srcset ：画面サイズに最適な画像を選択します。（画像容量の最適化）

sizes：ブラウザがビューポートサイズに応じて適切な画像を選択するためのヒントを提供します。

最後のimgタグの場合、幅が480pxの画像と1024pxの画像がある場合、size属性によってmax-widthが600pxであれば480pxの画像を、それ以外は1024pxの画像を表示するようにします。

* コマースでは、1ページに数十枚もの画像があるため、画像容量を削減すると大きな効果があります。

例えば、検索結果画面には20枚以上の画像があり、検索が1日に100,000回実行されると仮定すると…

rel="prefetch"：ページに移動する前にリソースを事前にダウンロードして、次のページでのロード速度を向上させます。

rel="preconnect"：特定のリンクへのネットワーク接続を事前に設定します。（サイズの大きいビデオ、フォントなど）

rel="dns-prefetch"：外部リソースのdnsを問い合わせて、リソースをより迅速にロードします。（主に外部CDN）

* preconnect vs dns-prefetch

preconnectはtcp接続（dns - tcp handshake - tls handshake）であるため、ブラウザリソースを占有する負荷の高い動作です。外部リソースを迅速にロードする必要がある場合に使用します。（非常に重要なリソースであり、このリソースの迅速なレンダリングが重要な場合）

dns-prefetchはdnsのみを問い合わせるため、より軽い動作です。重要ではないリソースであり、後でロードする場合に適しています。