リソースヒントは、ブラウザに対してリソースを早期に取得または接続するよう指示する<link>タグで、読み込みパフォーマンスを最適化します。それぞれが異なるタイミング/優先度のニーズに対応しています。
preload — 「この現在のページで必要です。今すぐ高優先度で取得してください。」パーサーが遅れて発見する重要なリソース用:フォント、ヒーロー画像、CSS参照アセット。ブラウザが正しい優先度/ヘッダーを設定するためにasが必須です。
preconnect — 「このオリジンにはすぐに接続します。DNSルックアップ + TCP + TLSハンドシェイクを今実行してください。」サードパーティ(API、フォントホスト、CDN)への最初のリクエスト前のラウンドトリップを節約します。いくつかの重要なオリジン向けに使用してください。
dns-prefetch — preconnectより軽量なバージョン:DNS解決のみ。多くのオリジンへのフォールバック/として適しています。
prefetch — 「この次のナビゲーションではおそらく必要です。アイドル時に低優先度で取得してください。」次のページ/アセット向け。現在のページではなく、将来のためにキャッシュされます。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
フォントは遅れて発見されます(ブラウザは最初CSSを解析する必要があります)。それらをプリロードすると、テキスト表示不可の遅延を回避できます。
すべてをプリロードすると目的が台無しになります — 本当に重要なリソースと帯域幅を競争します。最も重要な数個だけにヒントを使用してください。
リソースヒントはクリティカルパスのレイテンシを削減します:preconnectはサードパーティのハンドシェイク遅延を排除し、preloadは遅れて発見された重要なアセット(フォント、LCP画像)を優先し、prefetchは次のナビゲーションを瞬時に感じさせます。
慎重に使用すると、Core Web Vitalsを大幅に向上させます。