Preload、Prefetch、Preconnect
重要なリソースを早期に取得するようブラウザーにヒントを与えます
「Preload、Prefetch、Preconnect」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
リソースヒントとは
最新のブラウザは、HTMLを解析しながらリソースを発見します。リソースヒント（<head>内のlink rel属性）を使うと、ブラウザに「すぐに必要になる」と伝えられるため、通常の発見を待つより早くネットワークリクエストを開始できます。
preloadはすぐに読み込む
<link rel="preload" as="..." href="...">は、asの種類に応じた優先度でリソースをすぐに取得するようブラウザに指示します。ヒーロー画像、重要なフォント、ルート単位のJavaScriptなど、ページで必ず必要になるアセットに使用してください。
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>as属性
常にasを設定してください。asはリクエストの優先度、Acceptヘッダー、CSPの適用方法を決定します。一般的な値は「script」「style」「font」「image」「fetch」です。asがない場合、ブラウザはpreloadを無視して警告を記録します。
フォントのcrossorigin
フォントのpreloadには、同一オリジンのフォントであってもcrossoriginが必要です。これがないと、ブラウザは実際の利用時にはCORSモードでフォントを取得する一方、preload時には匿名モードで取得するため、ダウンロードが二重になります。これは見つけにくく、よくあるパフォーマンス上のバグです。
prefetchは後で読み込む
<link rel="prefetch" href="...">は、次回以降のナビゲーションでリソースが必要になることを示します。ブラウザはアイドル時間に最低優先度で取得してキャッシュするため、次のページをすぐに描画できます。
<link rel="prefetch" href="/next-page.html">preconnectは接続を準備する
<link rel="preconnect" href="https://api.example.com">は、最初のリクエストが到着する前に、ブラウザへサードパーティのオリジンとのDNS、TCP、TLSハンドシェイクを実行させます。ページからアクセスするAPIホストやCDNに使用してください。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetchは軽量版
<link rel="dns-prefetch">はDNSルックアップだけを実行するため、preconnectより低コストです。すべてのサードパーティホストに完全なpreconnectを行う余裕がない場合に使用し、最も重要な少数のオリジンにはpreconnectを組み合わせてください。
ヒントを制限する
preloadが多すぎると同じ帯域幅を奪い合い、ページの速度が低下します。クリティカルなレンダリングパスをブロックするリソースだけをpreloadしてください。通常はヒーロー画像1枚と重要なフォント1〜2個で十分です。それ以外は通常どおり発見させます。
ESモジュール用のmodulepreload
<link rel="modulepreload" href="/app.js">は、モジュールファイルだけでなく依存関係ツリーもpreloadします。これにより、各importが前のモジュールの解析を待つネイティブESモジュール特有の、連続的なダウンロードのウォーターフォールを回避できます。
効果を測定する
NetworkパネルのInitiator列を使って、preloadしたリソースが実際に早期取得されていることを確認してください。また、Lighthouseの「Preconnect to required origins」監査で、見逃している改善機会を検出できます。使用されていない遅いpreloadを削除すると、適切なpreloadを追加するのと同じ程度の効果が得られることもあります。
各ヒントの注意点
preloadしたリソースが約3秒以内に使用されないと、コンソールに警告が表示されます。prefetchは、ネットワークやメモリに負荷がかかるとブラウザによってキャンセルされることがあります。preconnectの接続は約10秒間使用されないと閉じられるため、まもなくリクエストされるリソースに使用してください。
理解度チェック
dns-prefetchにはなく、preconnectが行う処理は何ですか？
まとめ
preloadは重要なリソースをすぐに取得します（必要に応じてasとcrossoriginを指定します）。prefetchは、次のナビゲーションで必要になる可能性が高いリソースをアイドル時間にキャッシュします。preconnectはTCPとTLSまで、dns-prefetchはDNSだけを準備して、サードパーティのオリジンへの接続を高速化します。modulepreloadは、ESモジュールの依存関係ツリーにもpreloadを適用します。使用は控えめにし、効果を測定してください。
よくある質問
「Preload、Prefetch、Preconnect」レッスンは無料ですか？
はい。「Preload、Prefetch、Preconnect」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Preload、Prefetch、Preconnect」で何を学びますか？
重要なリソースを早期に取得するようブラウザーにヒントを与えます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Preload、Prefetch、Preconnect」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- async属性とdefer属性
- Preload、Prefetch、Preconnect
- 画像の遅延読み込み loading=lazy
- リソースヒント modulepreload