Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

リソースヒントを使用してブラウザをサポートする

リソース読み込みの最適化に関する前のモジュールでは、 CSS や JavaScript などのページリソースがページの読み込み速度に影響する可能性があり、その配信を最適化してページのレンダリングを高速化できますリソースのより高度な側面に進むのに最適なタイミングですブラウザによる読み込み時間の短縮にもつながります使用します。

リソースヒントを使用してページ読み込み時間をさらに最適化できるリソースをロードして優先順位を付ける方法をブラウザに提供しますリソースの初期セット preconnect や dns-prefetch などのヒントが最初に導入されたものです。しかし、時間の経過とともに preload と Fetch Priority API を使用して、追加機能を利用できます。

リソースヒントは、特定のアクションを事前に実行するようブラウザに指示します読み込みのパフォーマンスを向上できます。リソースヒントでは、早期の DNS ルックアップやサーバーへの事前接続など、ブラウザが通常リソースを検出する前にリソースを取得していました。

リソースヒントは HTML で指定できます（ほとんどの場合は <head> の早い段階で指定されます）要素で指定することも、HTTP ヘッダーとして設定することもできます。このモジュールの対象範囲については preconnect、dns-prefetch、preload のほか、 prefetch が提供する投機的フェッチ動作について説明します。

`preconnect`

preconnect ヒントは、別のオリジンへの接続を確立するために使用されます。重要なリソースを取得する場所ですたとえば、Google Cloud のクロスオリジン上の画像やアセット:

<link rel="preconnect" href="https://example.com">

preconnect を使用すると、ブラウザは以下への接続を計画していると想定します: 特定のクロスオリジンサーバーが近い将来に、ブラウザが可能な限り早く、理想的には、読み込む必要があります。

ページ上にクロスオリジンリソースが大量にある場合は、preconnect を使用します。該当するリソースを除外できます

Chrome DevTools のネットワークパネルに表示されたリソースの接続タイミングのスクリーンショット。接続の設定には、ストールタイム、プロキシネゴシエーション、DNS ルックアップ、接続の設定、TLS ネゴシエーションが含まれます。 — </ph> Chrome のネットワークパネルに表示された接続タイミングの可視化 DevTools。赤いボックス内のタイミングはクロスオリジンサーバーに接続し、`preconnect` が接続を早期に確立することで影響を軽減できます。検出する必要があります。

preconnect の一般的なユースケースは Google Fonts です。Google Fonts のおすすめサービスを提供している https://fonts.googleapis.com ドメインに preconnect します。 @font-face 宣言と、宣言した https://fonts.gstatic.com ドメインに対してフォントファイルを提供します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

crossorigin 属性は、リソースが必須かどうかを示すために使用されます。クロスオリジンリソースシェアリング（CORS）を使用して取得します。 preconnect ヒント。送信元からダウンロードされるリソースが CORS などの CORS を使用する場合は、その属性に crossorigin 属性を preconnectのヒント。

`dns-prefetch`

クロスオリジンサーバーへの接続を早期に開始すると、最初のページ読み込み時間を短縮できる場合、多数のクロスオリジンサーバーへの接続を確立します。ご懸念がある場合 preconnect を過剰に使用している可能性がある場合、はるかに低コストのリソースヒントとして、 dns-prefetch のヒント。

dns-prefetch はその名前から、クロスオリジンへの接続を確立しません。事前に DNS ルックアップを実行するだけです。DNS ルックアップは、ドメイン名が元の IP アドレスに解決される場合に発生します。デバイスレベルとネットワークレベルでの DNS キャッシュの層によって、通常は処理が速く、ある程度時間がかかります。

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS ルックアップは非常に安価です。また、費用が比較的低いため、 preconnect よりも適切なツールである場合もあります。イン特に、Google が推奨しないリンクのケースでは、ユーザーがフォローする可能性の高い他のウェブサイトに移動する。 dnstradamus は、JavaScript を使用して自動的にこれを行うツールです。 Intersection Observer API を使用して dns-prefetch ヒントを他のウェブサイトへのリンクがユーザーのスクロール対象にスクロールすると、現在のページの HTML 表示されなくなります。

`preload`

preload ディレクティブは、リソースの早期リクエストを開始するために使用されます。次の要素を指定します。

<link rel="preload" href="/lcp-image.jpg" as="image">

preload ディレクティブは、遅れて検出される重要なリソースのみに制限する必要があります。最も一般的なユースケースは、フォントファイル、@import を通じて取得される CSS ファイルです。宣言、またはbackground-image最もサイズが大きくなる可能性が高いCSS リソース Contentful Paint（LCP）の候補。このような場合、これらのファイルはそのリソースが外部ファイルで参照されるため、説明します。

</ph> 注意: preload を使用して <img> 要素で指定された画像をダウンロードします。基づいている場合、 imagesrcset 属性を preload ヒントに追加し、適切な画像をダウンロード移動することもできます。srcも除外する必要があります属性を指定します。これにより、レスポンシブプリロードに対応していないブラウザは、選択します

preconnect と同様に、preload ディレクティブには crossorigin が必要です。属性を使用して CORS リソース（フォントなど）をプリロードできます。スペースを追加しない場合 crossorigin 属性（非 CORS リクエストの場合）を追加して、リソースブラウザによってダウンロードされる回数が 2 回になり、使用できたはずの帯域幅が無駄になってしまいます他のリソースに費やす時間が増えます

<link rel="preload" href="/font.woff2" as="font" crossorigin>

</ph> 重要: プロジェクト内で指定されたリソースは、 as コマンドを実行すると、preload ディレクティブが 2 回ダウンロードされます。属性がディレクティブの <link> 要素にありません。 as 属性値の一覧については、以下をご覧ください。 as 属性値に関する MDN ドキュメント

上記の HTML スニペットでは、ブラウザにプリロードするよう指示されています。 CORS リクエストを使用する /font.woff2（/font.woff2 が同じドメイン上にある場合でも）。

</ph> 注意: preload ディレクティブは非常にパフォーマンスを最適化します。リソース preload ディレクティブを使用してダウンロードされた場合、高い優先度でダウンロードされます。また、過剰に使用した場合、preload によってページの読み込み速度に悪影響を及ぼす可能性があります。

`prefetch`

</ph> 重要: これは、 prefetch リソースヒント。そのため、このセクションでは検討すべき考慮事項とトレードオフについて詳細に説明しますおすすめします。このコースの後半のモジュールでは、 prefetching 低い優先度で近い将来必要になるリソース prefetching 以降の操作が速くなります。

prefetch ディレクティブは、サービスに対する優先度の低いリクエストを開始するために使用されます。今後のナビゲーションに使用される可能性が高いリソース:

<link rel="prefetch" href="/next-page.css" as="style">

このディレクティブは、preload ディレクティブとほぼ同じ形式になりますが、 <link> 要素の rel 属性では、代わりに "prefetch" の値を使用します。ただし、preload ディレクティブとは異なり、prefetch はナビゲーションでリソースの取得を開始すると発生しない場合もあるでしょう

prefetch が役立つ場合があります。たとえば、大部分のユーザーが最後までたどるユーザーフローを特定したそれらの将来のページでレンダリングクリティカルなリソースの prefetch を使用すると、次のことが可能になります。読み込み時間を短縮できます。

</ph> 注意: 予測的な性質上、 prefetch を使用すると、データのデメリットが生じる可能性があるユーザーがそのリソースにアクセスしなければ使用されない、結果的にプリフェッチされたリソースが必要になったときに、そのページに独自の分析や他のデータソースも追加し、ウェブサイトの利用パターンを prefetch の使用をおすすめします。別の方法として、プリフェッチを無効にするための Save-Data のヒントデータ使用量の削減を優先するよう指定しました。

Fetch Priority API

fetchpriority 属性を介して Fetch Priority API を使用すると、次のことを行えます。リソースの優先度を上げることができます。この属性は <link> で使用できます。 <img> 要素と <script> 要素。

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

</ph> 重要: fetchpriority 属性は特にページの LCP 画像に使用すると効果的です。優先度を上げることで LCP 画像にこの属性を指定すると、相対的にページの LCP をわずかな労力で済みます。

デフォルトでは、画像はより低い優先度で取得されます。レイアウト後に画像が最初のビューポート内にあることが判明した場合、優先度は優先度が高です。上記の HTML スニペットで、fetchpriority を直ちにブラウザに対して、優先度が [高] の大きい LCP 画像をダウンロードするよう指示します。重要性の低いサムネイル画像は優先度が低くなります。

最新のブラウザでは、リソースは 2 段階で読み込まれます。最初のフェーズは Kubernetes のブロックしているスクリプトがすべてダウンロードされ、実行されます。このフェーズでは、優先度が低のリソースはダウンロードします。fetchpriority="high" を使用すると、優先度を上げることができます。最初のフェーズでブラウザがダウンロードできるようにします。

リソースヒントのデモ

理解度テスト

preconnect リソースヒントの役割

クロスオリジンサーバー（DNS ルックアップなど）への接続を開きます。 TLS ネゴシエーションも暗号化されます。別の方法で検出されます。

正解です。

クロスオリジンサーバーの DNS ルックアップのみを実行します。

もう一度お試しください。

Fetch Priority API でできること

現在のページの HTML をダウンロードする優先度を指定します。

もう一度お試しください。

<link> の相対的な優先度を指定します。 <img> 要素と <script> 要素。

正解です。

prefetch のヒントを使用するタイミング

ユーザーが必要とする可能性があるあらゆるリソースやページについて、実際に必要になる場合があります

もう一度お試しください。

対象のリソースまたはページが高いとユーザーが必要とするときにのみ選択する必要があります。

正解です。

お客様がデータの削減を希望される場合できます。

正解です。

次のステップ: 画像のパフォーマンス

ここまでで、自分の知識についてかなり自信を持てるようになったと思います。ページの HTML に関するパフォーマンスに関する一般的な考慮事項、<head> リソースヒントが含まれています。ただし、この他にもいくつかの最適化方法があり、ページが一般的に読み込まれるさまざまなリソースタイプに固有です。次は画像のパフォーマンスについては次のモジュールで学習します。ウェブサイトの画像の読み込み速度が最大限に高速になりますアクセスします。