プリロード、プリフェッチ、プリコネクトなどのリソースヒントを使用して、ウェブサイトの読み込み時間を最適化し、グローバルなユーザーエクスペリエンスを向上させる方法を学びましょう。
リソースヒントでウェブサイトの速度を向上させる：プリロード、プリフェッチ、プリコネクト
今日のペースの速いデジタル世界では、ウェブサイトの速度が最も重要です。ユーザーは、ウェブサイトが迅速に読み込まれ、即座に応答することを期待しています。読み込みが遅いと、ユーザーエクスペリエンスが悪化し、直帰率が高くなり、最終的にはビジネスの損失につながります。リソースヒントは、開発者がブラウザにどのリソースが重要で、どのように優先順位を付けるかを伝えることで、ウェブサイトの読み込み時間を最適化するのに役立つ強力なツールです。この記事では、3つの主要なリソースヒントであるpreload、prefetch、preconnectを調査し、実装のための実践的な例を提供します。
リソースヒントの理解
リソースヒントは、ウェブページが必要とするリソースについてブラウザに指示するディレクティブです。これにより、開発者はブラウザにクリティカルリソースを事前に通知でき、ブラウザは通常よりも早くそれらを取得または接続できるようになります。これにより、読み込み時間を大幅に短縮し、知覚されるパフォーマンスを向上させることができます。
3つの主要なリソースヒントは次のとおりです。
- プリロード：初期ページ読み込みに必要なクリティカルリソースを取得します。
- プリフェッチ：将来のナビゲーションまたはインタラクションで必要となる可能性が高いリソースを取得します。
- プリコネクト：重要なサードパーティサーバーへの早期接続を確立します。
プリロード：クリティカルリソースの優先順位付け
プリロードとは？
Preloadは宣言的なフェッチであり、ブラウザに現在のナビゲーションに必要なリソースをできるだけ早く取得するように指示できます。これは、CSSまたはJavaScriptを介して読み込まれる画像、フォント、スクリプト、またはスタイルシートのように、ブラウザによって検出が遅れるリソースに特に役立ちます。これらのリソースをプリロードすることにより、レンダリングをブロックするのを防ぎ、ウェブサイトの知覚される読み込み速度を向上させることができます。
プリロードの使用時期
preloadは以下に使用します。
- フォント：カスタムフォントを早期に読み込むことで、フラッシュ・オブ・アンインストールド・テキスト（FOUT）またはフラッシュ・オブ・インビジブル・テキスト（FOIT）を防ぐことができます。
- 画像：アボブ・ザ・フォールド（画面の上部表示領域）の画像を優先することで、それらが迅速に読み込まれ、初期ユーザーエクスペリエンスが向上します。
- スクリプトとスタイルシート：クリティカルなCSSまたはJavaScriptファイルを早期に読み込むことで、レンダリングブロックを防ぎます。
- モジュールとWeb Worker：モジュールまたはWeb Workerをプリロードすることで、アプリケーションの応答性を向上させることができます。
プリロードの実装方法
HTMLドキュメントの<head>セクションで<link>タグを使用してpreloadを実装できます。
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">説明：
rel="preload"：ブラウザがリソースをプリロードするように指定します。href="/path/to/resource"：プリロードするリソースのURL。as="type"：プリロードするリソースのタイプ（例：font、style、script、image）を指定します。as属性は必須であり、ブラウザがリソースを適切に優先順位付けして処理するために不可欠です。正しいas値を使用することで、ブラウザが正しいコンテンツセキュリティポリシー（CSP）を適用し、正しいAcceptヘッダーを送信することが保証されます。type="mime/type"：（オプションですが推奨）リソースのMIMEタイプを指定します。これにより、特にフォントの場合、ブラウザは正しいリソース形式を選択するのに役立ちます。crossorigin="anonymous"：（異なるオリジンから読み込まれるフォントに必須）リクエストのCORSモードを指定します。 CDNからフォントを読み込んでいる場合は、この属性が必要になる可能性が高いです。
例：フォントのプリロード
ウェブサイトで使用されるカスタムフォント「OpenSans」があるとします。プリロードがない場合、ブラウザはCSSファイルを解析した後にのみこのフォントを検出します。これにより、正しいフォントでテキストをレンダリングするのに遅延が生じる可能性があります。フォントをプリロードすることで、この遅延を解消できます。
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">例：クリティカルCSSファイルのプリロード
ウェブサイトに初期表示のレンダリングに不可欠なクリティカルCSSファイルがある場合、それをプリロードすることで知覚されるパフォーマンスを大幅に向上させることができます。
<link rel="preload" href="/styles/critical.css" as="style">プリロードのベストプラクティス
- クリティカルリソースの優先順位付け：初期ページ読み込みに不可欠なリソースのみをプリロードしてください。プリロードの乱用はパフォーマンスに悪影響を与える可能性があります。
- 正しい
as属性の使用：ブラウザがリソースを正しく処理するように、常に正しいas属性を指定してください。 type属性を含める：ブラウザが正しいリソース形式を選択できるように、type属性を含めてください。- クロスオリジンフォントの場合は
crossoriginを使用：異なるオリジンからフォントを読み込む場合は、crossorigin属性を含めるようにしてください。 - パフォーマンスのテスト：常にプリロードのパフォーマンスへの影響をテストして、実際に読み込み時間を改善していることを確認してください。Google PageSpeed InsightsやWebPageTestなどのツールを使用して、影響を測定してください。
プリフェッチ：将来のニーズを予測する
プリフェッチとは？
Prefetchは、将来のナビゲーションまたはインタラクションで必要となる可能性が高いリソースをブラウザに取得するように指示するリソースヒントです。現在のページに必要なリソースに焦点を当てるpreloadとは異なり、prefetchはユーザーの次の動きを予測します。これは、後続のページやコンポーネントの読み込み速度を向上させるのに特に役立ちます。
プリフェッチの使用時期
prefetchは以下に使用します。
- 次のページのリソース：ユーザーが次に特定のページに移動する可能性が高いことがわかっている場合は、そのリソースをプリフェッチします。
- ユーザーインタラクションのリソース：ユーザーインタラクションが特定のリソースの読み込みをトリガーする場合（例：モーダルウィンドウ、フォーム）、それらのリソースをプリフェッチします。
- 他のページの画像とアセット：ユーザーが訪問する可能性のある他のページで使用される画像またはアセットをプリロードします。
プリフェッチの実装方法
HTMLドキュメントの<head>セクションで<link>タグを使用してprefetchを実装できます。
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">説明：
rel="prefetch"：ブラウザがリソースをプリフェッチするように指定します。href="/path/to/resource"：プリフェッチするリソースのURL。
例：次のページのプリフェッチ
ウェブサイトに複数ステップのフォームのような明確なユーザーフローがある場合、現在のステップでユーザーが次のステップに移動する際に、次のステップのリソースをプリフェッチできます。
<link rel="prefetch" href="/form/step2.html">例：モーダルウィンドウのリソースのプリフェッチ
ウェブサイトでモーダルウィンドウが使用されており、開かれたときにさらにリソースを読み込む場合、ユーザーエクスペリエンスをスムーズにするためにそれらのリソースをプリフェッチできます。
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">プリフェッチのベストプラクティス
- 控えめに使用：プリフェッチは、ユーザーがプリフェッチされたリソースを必要としない場合でも、帯域幅とリソースを消費する可能性があるため、控えめに使用する必要があります。
- 可能性の高いナビゲーションを優先：最も可能性の高いページまたはインタラクションのリソースをプリフェッチします。
- ネットワーク条件の考慮：プリフェッチは、安定した高速なインターネット接続を持つユーザーに最適です。低速または従量制課金接続のユーザーに対して大きなリソースをプリフェッチすることは避けてください。ネットワーク情報APIを使用して、ユーザーの接続タイプを検出し、プリフェッチを調整できます。
- パフォーマンスの監視：プリフェッチがウェブサイトのパフォーマンスに与える影響を監視して、正味のメリットを提供していることを確認してください。
- 動的プリフェッチの活用：ユーザーの行動と分析データに基づいて動的にプリフェッチを実装します。たとえば、現在ページにいるユーザーが頻繁に訪問するページのリソースをプリフェッチします。
プリコネクト：早期接続の確立
プリコネクトとは？
Preconnectは、重要なサードパーティサーバーとの早期接続を確立できるリソースヒントです。接続の確立には、DNSルックアップ、TCPハンドシェイク、TLSネゴシエーションなど、いくつかのステップが含まれます。これらのステップは、それらのサーバーからのリソースの読み込みにかなりの遅延を追加する可能性があります。Preconnectを使用すると、これらのステップをバックグラウンドで開始できるため、ブラウザがサーバーからリソースを取得する必要があるときに、接続がすでに確立されています。
プリコネクトの使用時期
preconnectは以下に使用します。
- サードパーティサーバー：フォント、CDN、API、またはウェブサイトが依存するその他のリソースをホストするサーバー。
- 頻繁に使用されるサーバー：ウェブサイトが頻繁にアクセスするサーバー。
プリコネクトの実装方法
HTMLドキュメントの<head>セクションで<link>タグを使用してpreconnectを実装できます。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">説明：
rel="preconnect"：ブラウザがサーバーにプリコネクトするように指定します。href="https://example.com"：プリコネクトするサーバーのURL。crossorigin：（オプションですが、CORSで読み込まれるリソースには必須）接続にCORSが必要であることを指定します。
例：Google Fontsへのプリコネクト
ウェブサイトがGoogle Fontsを使用している場合、https://fonts.gstatic.comにプリコネクトすることで、フォント読み込みの遅延を大幅に減らすことができます。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Google Fontsはフォントを提供するためにCORSを使用するため、ここでのcrossorigin属性は重要です。
例：CDNへのプリコネクト
ウェブサイトがCDNを使用して静的アセットを提供している場合、CDNのホスト名にプリコネクトすることで、それらのアセットの読み込み遅延を減らすことができます。
<link rel="preconnect" href="https://cdn.example.com">プリコネクトのベストプラクティス
- 賢明に使用：多くのサーバーにプリコネクトすると、ブラウザが接続を確立するためのリソースが限られているため、パフォーマンスが低下する可能性があります。
- 重要なサーバーを優先：ウェブサイトのパフォーマンスにとって最も重要なサーバーにプリコネクトします。
- DNSプリフェッチの検討：完全なプリコネクトは必要ないが、DNSを早期に解決したいサーバーの場合は、
<link rel="dns-prefetch" href="https://example.com">の使用を検討してください。DNSプリフェッチはDNSルックアップのみを実行し、完全なプリコネクトよりもリソース消費が少なくなります。 - パフォーマンスのテスト：常にプリコネクトのパフォーマンスへの影響をテストして、正味のメリットを提供していることを確認してください。
- 他のリソースヒントとの組み合わせ：最適なパフォーマンスを達成するために、プリロードおよびプリフェッチと組み合わせてプリコネクトを使用します。たとえば、フォントをホストするサーバーにプリコネクトし、次にフォントファイルをプリロードします。
最適なパフォーマンスのためのリソースヒントの組み合わせ
リソースヒントの真の力は、それらを戦略的に組み合わせることにあります。以下に実用的な例を示します。
CDNでホストされているカスタムフォントを使用し、クリティカルなJavaScriptファイルを読み込むウェブサイトを想像してください。
- CDNへのプリコネクト：フォントとJavaScriptファイルをホストするCDNへの早期接続を確立します。
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - フォントのプリロード：FOUTを防ぐためにフォントの読み込みを優先します。
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - JavaScriptファイルのプリロード：JavaScriptファイルが必要なときに利用できるように、その読み込みを優先します。
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
リソースヒント分析ツール
いくつかのツールは、リソースヒントの効果を分析するのに役立ちます。
- Google PageSpeed Insights：リソースヒントの使用を含む、ウェブサイトのパフォーマンスを最適化するための推奨事項を提供します。
- WebPageTest：さまざまな場所とネットワーク条件からウェブサイトのパフォーマンスをテストできます。
- Chrome DevTools：Chrome DevToolsのネットワークパネルは、リソース読み込みのタイミングを表示し、最適化の機会を特定するのに役立ちます。
- Lighthouse：Webページの品質を改善するための自動化されたツールです。パフォーマンス、アクセシビリティ、プログレッシブウェブアプリ、SEOなどの監査があります。
一般的な落とし穴と回避策
- リソースヒントの乱用：リソースヒントを使いすぎると、パフォーマンスに悪影響を与える可能性があります。最もクリティカルなリソースに焦点を当ててください。
- 不正確な
as属性：プリロードのas属性を間違って使用すると、リソースが正しく読み込まれなくなる可能性があります。 - CORSの無視：異なるオリジンからリソースを読み込む際に
crossorigin属性を含めないと、読み込みエラーが発生する可能性があります。 - パフォーマンスのテストをしない：常にリソースヒントのパフォーマンスへの影響をテストして、正味のメリットを提供していることを確認してください。
- 不正確なパス：リソースヒントに指定されたすべてのファイルパスとURLが正しいことを再確認してください。そうでない場合、エラーが発生します。
リソースヒントの将来
リソースヒントは常に進化しており、ブラウザ仕様に新しい機能や改善が追加されています。リソースヒントの最新の開発動向を把握することで、ウェブサイトのパフォーマンスをさらに最適化できます。たとえば、modulepreloadはJavaScriptモジュールのプリロード専用の新しいリソースヒントです。また、リソースヒントのpriority属性により、他のリソースに対するリソースの優先順位を指定できます。これらの機能のブラウザサポートはまだ進化しているため、実装する前に互換性を確認してください。
結論
リソースヒントは、ウェブサイトの読み込み時間を最適化し、ユーザーエクスペリエンスを向上させるための強力なツールです。preload、prefetch、preconnectを戦略的に使用することで、ブラウザにクリティカルリソースを事前に通知し、遅延を削減し、ウェブサイトの知覚されるパフォーマンスを向上させることができます。クリティカルリソースを優先し、リソースヒントを賢明に使用し、常に変更のパフォーマンスへの影響をテストすることを忘れないでください。この記事で概説されているベストプラクティスに従うことで、ウェブサイトのパフォーマンスを大幅に向上させ、世界中のユーザーに優れたエクスペリエンスを提供できます。