preload、prefetch、preconnectなどのリソースヒントとは何ですか？

それぞれの機能

• preload — 「この現在のページで必要です。今すぐ高優先度で取得してください。」パーサーが遅れて発見する重要なリソース用：フォント、ヒーロー画像、CSS参照アセット。ブラウザが正しい優先度/ヘッダーを設定するためにasが必須です。

• preconnect — 「このオリジンにはすぐに接続します。DNSルックアップ + TCP + TLSハンドシェイクを今実行してください。」サードパーティ（API、フォントホスト、CDN）への最初のリクエスト前のラウンドトリップを節約します。いくつかの重要なオリジン向けに使用してください。

• dns-prefetch — preconnectより軽量なバージョン：DNS解決のみ。多くのオリジンへのフォールバック/として適しています。

• prefetch — 「この次のナビゲーションではおそらく必要です。アイドル時に低優先度で取得してください。」次のページ/アセット向け。現在のページではなく、将来のためにキャッシュされます。

一般的な実例：フォント

フォントは遅れて発見されます（ブラウザは最初CSSを解析する必要があります）。それらをプリロードすると、テキスト表示不可の遅延を回避できます。

注意：ヒントの過剰使用は避ける

すべてをプリロードすると目的が台無しになります — 本当に重要なリソースと帯域幅を競争します。最も重要な数個だけにヒントを使用してください。

なぜ重要なのか

リソースヒントはクリティカルパスのレイテンシを削減します：preconnectはサードパーティのハンドシェイク遅延を排除し、preloadは遅れて発見された重要なアセット（フォント、LCP画像）を優先し、prefetchは次のナビゲーションを瞬時に感じさせます。

慎重に使用すると、Core Web Vitalsを大幅に向上させます。