プリロード、プリコネクト、プリフェッチ：リソースヒントを使用してサイトのパフォーマンスを向上させる

最新のWebブラウザーは、さまざまな手法を使用して、Webサイトの全体的なパフォーマンスを向上させます。最も重要なリソースに優先順位を付けてそれらを最初に取得することから、ユーザーが次にアクセスするページを推測することまでです。

ただし、サイトのパフォーマンスに関するすべての決定を行うために、ブラウザに依存することはできません。

ウェブサイトの所有者として、あなたはどのリソースが最も重要であり、あなたのサイトでの実際のユーザージャーニーが何であるかを知っている人です。 また、Webサイトの全体的なパフォーマンス、知覚速度、およびユーザーエクスペリエンスを向上させるために、その知識を使用して、ブラウザーがページをより高速にロードできるようにすることができます。

そこで、リソースのヒントが役立ちます。

次の行では、それらと、それらの利点を可能な限り最善の方法で利用する方法を見ていきます。

それに飛び込みましょう。

ブラウザのしくみ（一言で言えば）

リソースのヒントとそれらが適用できる場所をよりよく理解するために、ブラウザが実際にコンテンツをロードする方法を簡単に見てみましょう。

ブラウザがページをロードするプロセス全体を次の3つのステップに分割できます。

• 接続の確立;
• コードのダウンロード、解析、およびレンダリング。
• ページをインタラクティブにする。

最初の段階で、ブラウザはリソースをダウンロードするためにサーバーとの接続を確立する必要があります。 これには、ドメイン名の検索とIPアドレスへの解決、サーバーへの接続の設定、セキュリティのための接続の暗号化が含まれます。

すべてが完了すると、ブラウザは情報のダウンロードと解析、ドキュメントオブジェクトモデル（DOM）とCSSオブジェクトモデル（CSSOM）の構築、そしてコンテンツのレンダリングに進むことができます。

最後の部分は、ページをインタラクティブにすることです。 上記のすべてのプロセスはメインスレッドで実行されます。 したがって、ブラウザのメインスレッドでページの解析、レンダリング、ペイントが完了したら、遅延したJavaScriptファイルを処理して、ページをスクロール、タッチ、およびその他の操作に使用できるようにします。

一言で言えば、それはページがロードされるたびに舞台裏のプロセスです。

リソースヒントを統合することで、これらの各段階にプラスの影響を与える方法を見てみましょう。

リソースのヒント：プリフェッチ、プリコネクト、プリロード

名前が示すように、リソースヒントは、特定のリソースまたはWebページをどのように処理するかをブラウザに指示するヒントまたは指示です。 つまり、この一連の手順により、ブラウザがフェッチおよびレンダリングする必要のあるオリジンまたはリソースに優先順位を付けるのを支援できます。

すべてのリソースヒントは、HTMLドキュメントの先頭にあるlink要素のrel属性を使用します。

これらのHTMLコードスニペットをWebサイトに統合すると、ブラウザが通常のページの読み込み中にファイルを見つけた場合よりも早く、選択したファイルの読み込みを開始できます。

そして、基本が私たちの背後にあるので、あなたがここにいる部分に移りましょう-リソースのヒントの概要、それらの利点、そしてそれらをいつ使用するか。

プリフェッチ

link rel = prefetchは、優先度の低いリソースヒントであり、ブラウザが後で必要になる可能性のあるリソースをフェッチして、ブラウザのキャッシュに保存できるようにします。

プリフェッチは非常に低い優先度を設定するため、重要度の高いファイルにはこのヒントを使用しないでください。

優れたユースケースの1つは、プリフェッチを利用して後続のページの読み込み時間を改善することです。 たとえば、ユーザーの認証中にプリフェッチディレクティブを適用できます。 このようにして、次に表示されるページに必要なリソースをプリロードするために、クレデンシャルを入力するのにかかる時間を利用できます。

サイトでの訪問者のステップを予測し、リソースをプリフェッチすることで、FirstContentfulPaintやTimetoInteractiveなどの指標を改善できます。 Netflixが行ったことで、インタラクティブまでの時間が30％短縮されました。

これまでに説明したことはすべて、リンクプリフェッチとも呼ばれるプリフェッチに関連しています。 ただし、同様に重要なプリフェッチには他に2つのタイプがあり、次の点に言及する必要があります。

1.DNSプリフェッチ
ブラウザは、ホスト（オリジンサーバー）に接続する前に、DNSルックアップを実行してホスト名（URL）をIPアドレスに変換する必要があります。

これには通常数ミリ秒しかかかりませんが、Webサイトがサードパーティのドメイン名からファイルをロードする場合（ほとんどのWebサイトが行うこと）、ブラウザはドメインごとにDNSルックアップを実行する必要があります。 一部のサイト（ニュースWebサイトなど）は多くの外部リソースを使用します。つまり、ページごとに数十のDNSルックアップが必要になる場合があります。

このような場合、 dns-prefetchヒントを使用すると、読み込みプロセスの後半で必要性が発見されるのではなく、命令がブラウザにそのプロセスをすぐに開始するように指示するため、数ミリ秒節約できます。

Web Almanac 2021で提案されているように、最適な結果を得るには、 dns-prefetchとpreconnectヒントを組み合わせることをお勧めします。 事前接続について説明しているセクションで、その理由を確認できます。

2.事前レンダリング
プリレンダリングは、ユーザーが次に移動できるリソースを最適化するという点で、プリフェッチと非常によく似ています。 違いは、 prerenderが実際には特定のリソースではなくページ全体をレンダリングすることです。

事前接続

dns-prefetchと同様に、 preconnectディレクティブは、ブラウザがサーバーに初期要求を送信する前に早期接続を確立するのに役立ちます。

ただし、事前接続のヒントはさらに一歩進んだものです。 DNSルックアップを実行する一方で、TLSネゴシエーションとTCPハンドシェイクも含まれます。 これにより、ラウンドトリップの待ち時間がなくなり、さらに時間が節約されます。

しかし、ここに質問があります：

preconnectがdns-prefetchのすべてを実行する場合、および上記の場合、そもそもなぜdns-prefetchを使用するのでしょうか。

ほとんどの場合、 preconnectはdns-prefetchよりも望ましいオプションですが、問題はpreconnectが一部のブラウザでサポートされていないことです。

ソース：caniuse.com

良い点は、それらを一緒に使用して、それらを最大限に活用できることです。 dns-prefetchへのフォールバックでそれをサポートするブラウザでpreconnectの恩恵を受けることができます：

グーグルによると：

2019年に、Chromeは重要なオリジンに事前接続することで、インタラクティブまでの時間をほぼ1秒短縮することができました。

プリロード

preloadディレクティブがどのように機能するかを説明する前に、何かを明確にする必要があります。

プリロードは「リソースヒント」として定期的に言及されていますが、そうではありません。 プリロードは宣言型のフェッチであり、ブラウザには必須であるため、ヒントではなくコマンドになります。

そうは言っても、プリロードは、ページにとって重要であるため、ブラウザがリソースを検出するよりも早くリソースをダウンロードするようにブラウザに強制するために使用されます。

preloadディレクティブは、重要なレンダリングパスの一部であるが、ブラウザによって簡単に検出されないリソースで最適に機能します。 たとえば、フォント、CSS、または重要なJavaScriptです。

dns-prefetchおよびpreconnectヒントとのもう1つの違いは、 rel属性とhref属性のみが必要ですが、プリロードはより複雑であるということです。 プリロードするリソースのコンテンツタイプを示すas属性を追加する必要があります。

GoogleのエンジニアリングマネージャーであるAddyOsmaniによると、プリロード時に属性を指定する必要があります。

指定できるas値の完全なリストは次のとおりです。

as属性を含めると、ブラウザはそのタイプに応じてプリフェッチされたリソースの優先度を設定し、リソースがキャッシュにすでに存在するかどうかを判断するのに役立ちます。

さまざまなリソースタイプがどのように優先されるかについて詳しくは、Chromeリソースの優先順位とスケジュールに関するドキュメントをご覧ください。

フォントなどの一部のリソースでは、 crossorigin属性も含める必要があります。

crossorigin属性は、リクエストのモードをHTTPCORSリクエストに設定します。 CORS（Cross-Origin Resource Sharing）は、ブラウザーがリソースのロードを許可する必要のある、サーバー以外のオリジンをサーバーが示すことができるメカニズムです。 この記事の焦点では​​ないため、これについては詳しく説明しませんが、詳細についてはこちらをご覧ください。

また、 as属性と同様に、クロスオリジンなしでフォントをプリロードすると、ダブルフェッチされます。 これは、このトピックに関するAddyOsmaniの記事からの別の抜粋です。

より多くのリソースのヒント、より多くの問題

これまでのすべてを読んで、できるだけ多くのリソースヒントを使用すると、ブラウザがページを非常に速くロードするだけだと思う​​かもしれません。

残念ながら、そうではありません。

リソースヒントを統合するときに考慮すべきいくつかの欠点を次に示します。

1.プリフェッチによりデータ消費量が増える可能性があります

プリフェッチはダウンロードの優先度を低く設定しますが、それが無害であることを意味するわけではありません。 これを使用すると、サイトでのデータ消費が増加する可能性があります。これにより、ユーザー（サーバーのトラフィックの増加）とユーザー（リソースの不必要な過剰消費）の両方に問題が発生する可能性があります。 さらに、最終的には使用されない可能性のある余分なバイトをロードしてしまう可能性があります。 したがって、統合する前によく考えてください。

2.事前レンダリングは帯域幅の浪費を引き起こす可能性があります

事前にページ全体をダウンロードするため、プリレンダーを使用したギャンブルはプリフェッチよりもさらに優れています。 これにより、ヒントはリソースを大量に消費し、特にモバイルデバイスで帯域幅の浪費を引き起こす可能性があります。 そして最悪の部分は、ユーザーがページを要求しない場合、ユーザーがヒントの効果を見ることさえできないかもしれないということです。

3.事前接続により、CPUの使用量が増える可能性があります

事前接続は優先度の低いヒントですが、それでもWebサイトのパフォーマンスに悪影響を与える可能性があります。 確立された接続がすぐに使用されない場合（Chromeでは10秒以内）、 preconnectディレクティブはCPU使用量を追加するだけであり、ブラウザーによって自動的に閉じられます。 さらに、暗号化証明書のサイズは約3 KBであり、他の重要なリソースの帯域幅と競合するため、事前接続は慎重に使用する必要があります。

4.プリロードは、ブラウザのアナライザによって設定された優先順位を上書きします

プリロードは、ブラウザにリソースをすぐにダウンロードさせることができるため、強力な命令です。 ただし、最新のWebブラウザーはリソースの優先順位付けに非常に優れているため、プリロードを過度に使用すると、悪影響が生じる可能性があります。 たとえば、非同期リソースURLに一致するプリロードディレクティブを追加すると、ブラウザはそれをより速くフェッチするため、より速く解析し、ページのロードの非常に早い段階でメインスレッドを中断することにより、非同期属性の効果を無効にします。

要約

この記事では多くのことを説明したので、最も重要なポイントを簡単に要約してみましょう。

• dns-prefetchとpreconnectは、ドメイン名に優先順位を付けるために使用されます（https://example.comなど）。
• プリフェッチとプリロードは、リソースのロードに優先順位を付けるために使用されます。 プリフェッチは後続のページのロード時間を改善するために使用されますが、プリロードは現在のページの重要なリソースで最適に機能します。
• prerenderは、ページ全体（blog.htmlなど）を参照します。
• prefetch 、 prerender 、およびpreconnectはリソースのヒントであり、ブラウザが適切と判断したときに実行されます。 preloadディレクティブは、ブラウザに必須のコマンドです。
• プリロードを使用する場合は、ダブルフェッチを回避するためにas属性とcrossorigin属性を指定することを忘れないでください。
• リソースのヒントは優先度の低い指示ですが、それでもサイトのパフォーマンスに脅威をもたらします。 適度に、必要な場合にのみ使用してください。
• プリロードは、ブラウザのアナライザの優先順位を上書きできる強力なディレクティブです。 最新のブラウザはリソースの優先順位付けに非常に優れていることを忘れないでください。そのため、プリロードの「ヒント」は慎重に使用してください。

リソースヒントについて新しく取得した知識を使用して、コンテンツとアセットの配信を高速化し、サイトの全体的なパフォーマンスを向上させます。 また、変更を加えるたびに、実際の世界（フィールドデータに焦点を当てる）でWebサイトをテストすることを忘れないでください。