🦁
パフォーマンス改善のための事前ロードの"preload と prefetch使い分け
サイトの高速化を実現するためにデータを事前にデータをロードするという手段は大いに有効です。よく使われるpreloadやprefetchの違いと役割について調べていきます。
preload
preloadは初回表示などで、HTML解析の初期段階から高優先度で取得させること
使い方
<link rel="preload" as="image" href="/images/example.avif" />
preloadをしたいものがある場合、linkタグに下記を指定し、headタグで読み込む。
- rel="preload" : プリロード指示
- as : リソースの種類（asは必須）
- href : プリロード対象の URL
prefetch
prefetchは、近い将来ユーザーが移動する可能性のあるページに対して、バックグラウンドで文書やサブリソースをあらかじめ高速な場所に読み込んでおくこと。
ちなみにブラウザが必ず取得するとは限らない。帯域やメモリ状況次第でスキップされます。
使い方
<link rel="prefetch" href="example.html" />
prefetchをしたいものがある場合、linkタグに下記を指定し、headタグで読み込む。
- rel="prefetch" : プリフェッチ指示
- href : プリフェッチするURL
優先度と裁量
preload: ブラウザに強制的にリソースを先読みさせる。必須に近い。
prefetch: あくまでヒント。低優先度で、余裕があるときのみ取得。
preloadを使うべきところ
- ファーストビューの画像(特にbackground-imageで遅延しがちな場合)
- フォントの読み込み
prefetchを使うべきところ
- 自動再生スライダーの2枚目以降
- モーダル/タブ/アコーディオン等、ユーザー操作直後に使うデータをprefetchしておく
注意すべき点
-
preloadする際、同一画像の複数形式を同時設定しない。
無駄な転送の原因になってしまうので、pictureタグで複数形式指定していたとしても、avifだけ等
どれか一つの形式に絞る。 -
フォントでpreload指定するときは、crossoriginを指定する
フォントは CORS リソースの扱いになるため、必ず指定しないと、CSSからのフォント取得とモード不一致が起きて二重取得・無視の原因になります。 -
preloadとprefetchを同じリソースに併用しない
無駄な転送の原因になります。
まとめ
初回ロード時すぐ使うならpreloadを設定
すぐではないが近い将来必要prefetchと考えると良さそうです。
Discussion