接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
速度 小さな影響 中程度 15~30分

主要リソースのプリロード (プリロード)

重要なリソースは、rel="preload" を使用して事前にロードできます。

それは何ですか

rel="preload" は、すぐに必要になるリソース (メインのスクロールせずに見える画像、主要なフォント、重要な CSS) を事前に高い優先順位でダウンロードするようにブラウザーに指示します。

なぜそれに対処するのでしょうか?

プリロードがないと、ブラウザーはいくつかの重要なリソース (CSS からのみ参照されるフォントなど) の発見が遅くなり、その表示が遅れます。プリロードはこれを高速化し、LCP を改善します。

やり方

  1. 1LCP イメージ (スクロールせずに見えるメインのビジュアル) をプリロードします。
  2. 2主要なフォントをプリロードし、font-display: swap を追加します。
  3. 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 が向上します。全体的に使用すると、代わりに痛みを感じます。少ないほど豊かです。

関連トピック