リソース読み込みの最適化に関する前のモジュールでは、 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 を使用します。
該当するリソースを除外できます
<ph type="x-smartling-placeholder">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）の候補。このような場合、これらのファイルは
そのリソースが外部ファイルで参照されるため、
説明します。
preconnect と同様に、preload ディレクティブには crossorigin が必要です。
属性を使用して CORS リソース（フォントなど）をプリロードできます。スペースを追加しない場合
crossorigin 属性（非 CORS リクエストの場合）を追加して、リソース
ブラウザによってダウンロードされる回数が 2 回になり、使用できたはずの帯域幅が無駄になってしまいます
他のリソースに費やす時間が増えます
<link rel="preload" href="/font.woff2" as="font" crossorigin>
上記の HTML スニペットでは、ブラウザにプリロードするよう指示されています。
CORS リクエストを使用する /font.woff2（/font.woff2 が同じドメイン上にある場合でも）。
prefetch
<ph type="x-smartling-placeholder">
prefetch ディレクティブは、サービスに対する優先度の低いリクエストを開始するために使用されます。
今後のナビゲーションに使用される可能性が高いリソース:
<link rel="prefetch" href="/next-page.css" as="style">
このディレクティブは、preload ディレクティブとほぼ同じ形式になりますが、
<link> 要素の rel 属性では、代わりに "prefetch" の値を使用します。
ただし、preload ディレクティブとは異なり、prefetch は
ナビゲーションでリソースの取得を開始すると
発生しない場合もあるでしょう
prefetch が役立つ場合があります。たとえば、
大部分のユーザーが最後までたどるユーザーフローを特定した
それらの将来のページでレンダリング クリティカルなリソースの prefetch を使用すると、次のことが可能になります。
読み込み時間を短縮できます。
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>
デフォルトでは、画像はより低い優先度で取得されます。レイアウト後に
画像が最初のビューポート内にあることが判明した場合、優先度は
優先度が高です。上記の HTML スニペットで、fetchpriority を直ちに
ブラウザに対して、優先度が [高] の大きい LCP 画像をダウンロードするよう指示します。
重要性の低いサムネイル画像は優先度が低くなります。
最新のブラウザでは、リソースは 2 段階で読み込まれます。最初のフェーズは Kubernetes の
ブロックしているスクリプトがすべてダウンロードされ、
実行されます。このフェーズでは、優先度が低のリソースは
ダウンロードします。fetchpriority="high" を使用すると、優先度を上げることができます。
最初のフェーズでブラウザがダウンロードできるようにします。
リソースヒントのデモ
理解度テスト
preconnect リソースヒントの役割
Fetch Priority API でできること
<link> の相対的な優先度を指定します。
<img> 要素と <script> 要素。
prefetch のヒントを使用するタイミング
次のステップ: 画像のパフォーマンス
ここまでで、自分の知識についてかなり自信を持てるようになったと思います。
ページの HTML に関するパフォーマンスに関する一般的な考慮事項、<head>
リソースヒントが含まれています。ただし、この他にもいくつかの最適化方法があり、
ページが一般的に読み込まれるさまざまなリソースタイプに固有です。次は
画像のパフォーマンスについては次のモジュールで学習します。
ウェブサイトの画像の読み込み速度が
最大限に高速になります
アクセスします。