ヘルプとドキュメント
速度 小さな影響 中程度 15～30分
主要リソースのプリロード (プリロード)
重要なリソースは、rel="preload" を使用して事前にロードできます。
それは何ですか
rel="preload" は、すぐに必要になるリソース (メインのスクロールせずに見える画像、主要なフォント、重要な CSS) を事前に高い優先順位でダウンロードするようにブラウザーに指示します。
なぜそれに対処するのでしょうか？
プリロードがないと、ブラウザーはいくつかの重要なリソース (CSS からのみ参照されるフォントなど) の発見が遅くなり、その表示が遅れます。プリロードはこれを高速化し、LCP を改善します。
やり方
- 1LCP イメージ (スクロールせずに見えるメインのビジュアル) をプリロードします。
- 2主要なフォントをプリロードし、font-display: swap を追加します。
- 3やりすぎないでください。すべてを事前にロードすると、優先順位が薄れ、問題が発生します。
例
Správně
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">結論
プリロードは、いくつかの真に重要なリソース (LCP イメージ、メイン フォント) を対象としたツールです。賢明に使用すると、LCP が向上します。全体的に使用すると、代わりに痛みを感じます。少ないほど豊かです。
関連トピック