103初期のヒント：それは何であり、それをどのように実装するか
公開: 2022-07-16103 Early Hintsは、ページが到着し始める前に、ブラウザがプリロードするコンテンツを決定するのに役立つ新しいHTTPステータスコードです。
昨年末にCloudflareによって最初に言及された後、Googleは、Early HintsがChromeバージョン103で利用可能であり、プリロードとプリコネクトをサポートして開始することを正式に発表しました。
次の行では、アーリーヒントとは何か、およびパフォーマンスを向上させるためにWebサイトに実装する方法を学習します。
ただし、その前に、ブラウザーがどのように機能するのか、そもそもなぜアーリーヒントが必要だったのかについて簡単に説明します。
一言で言えば：ブラウザ、サーバー、およびサーバーの思考時間
このページ（または他のページ）をロードしてコンテンツを読み取るために、ブラウザは、ペイントを完了するために何をレンダリングするか、どのリソース（画像、フォント、JavaScriptファイルなど）をフェッチする必要があるかについての指示を必要としました。
基本的に、ブラウザはサーバーにリクエストを送信し、何をロードするかについての指示はサーバーの応答から得られます。
残念ながら、サーバーがWebページ全体をコンパイルしてブラウザーに送り返すために必要なすべてのリソースを収集するまで、数百ミリ秒の遅延が発生する可能性があります。
この期間は「サーバー思考時間」として知られています。
このサーバーの思考時間中、ブラウザーはただそこに座って、コンテンツを表示せずに待機します。 そして、誰も空白の画面を見つめたくないということに同意できると思います。
そこで、アーリーヒントが登場します。
初期のヒントとは何ですか？
ページのパフォーマンスを向上させる1つの方法は、リソースヒントを使用することです。 その名前が示すように、後で必要になる可能性のあるリソースについてブラウザに「ヒント」を提供します。たとえば、特定のファイルをプリロードしたり、別のサーバーに接続したりします。
このトピックに興味があり、詳細を知りたい場合は、リソースのヒントとその実装に関する記事を確認してください。
リソースヒントを使用するのは素晴らしいことのように聞こえるかもしれませんが、落とし穴があります。 ブラウザがそれらに作用するためには、サーバーはページの少なくとも一部を送信する必要があります。
初期のヒントを入力してください。
Early Hintsは、「サーバーの思考時間」を利用して、ブラウザーに命令を非同期的に送信し、重要なサブリソース（スタイルシート、重要なJavaScriptファイルなど）の読み込みを開始したり、で使用される可能性のあるオリジンとの接続を確立したりします。サーバーが完全な応答をコンパイルしている間のページ。
初期のヒントなし
簡単に言えば：
アーリーヒントを有効にすると、サーバーは2つの応答を送信します。1つ目（HTTP 103アーリーヒントステータスコード）は、ブラウザーにすぐにロードを開始できることを指示し、2つ目（HTTP 200ステータスコード）は、残りの完全な応答です。情報。
アーリーヒントを有効にした場合
完全な応答がコンパイルされる前にこれらのヒントをブラウザーに送信することにより、ブラウザーは、ユーザーがWebページをより速くロードするために何をする必要があるかを理解できます。
最終結果：
ページの読み込み時間が短縮され、ユーザーが感じる待ち時間が短縮されます。
あなたがより正式な説明を探しているなら、Cloudflareはそれを提供する素晴らしい仕事をしました：
あなたのウェブサイトに初期のヒントを実装する
Webサイトにアーリーヒントを正常に実装するには、いくつかの手順を実行する必要があります。
ステップ0：アーリーヒントの代わりにlink rel=preloadまたはlinkrel=preconnectの使用を検討してください
サーバーが200応答をすぐに送信できる場合、アーリーヒントを追加しても意味がないため、これはステップ0です。 代わりに、200応答をさらに高速化したい場合は、リンクrel=preloadまたはリンクrel=preconnectリソースヒントを利用できます。
サーバーが200応答を送信する速度を決定する最も簡単な方法は、KeyCDNのパフォーマンステストツールを使用することです。 あなたがしなければならないのはあなたのサイトのURLを挿入してデータを取得することです：
ステップ1：トップページを特定する
手順0が無効で、サーバーが応答を生成するのに時間が必要な場合は、アーリーヒントの統合を続行するためのすべての前提条件があります。
最初のステップは、トップランディングページ、つまり、ユーザーがサイトでの旅を開始するページを特定することです。 訪問者がWebサイトをナビゲートすると、アーリーヒントの効果が低下するため、これらのエントリポイントは他のどのページよりも重要です。
これは、最近のブラウザは、ユーザーが次にアクセスするページを推測するのに非常に優れており、2回目または3回目のナビゲーションで必要なすべてのサブリソースを持っている可能性が高いためです。
ステップ2：主要なパフォーマンス指標に最も貢献する重要な起源とサブリソースを特定する
トップランディングページを特定したら、プリコネクトまたはプリロードヒントの適切な候補となるオリジンとサブリソースの特定に進む必要があります。 これらは、LargestContentfulPaintやFirstContentfulPaintなどの主要な指標に大きく貢献する起源とリソースです。
具体的には、同期JavaScript、スタイルシート、さらにはWebフォントなどのレンダリングブロックサブリソースを探す必要があります。
WebPageTestなどのテストツールを使用してWebサイトを実行し、ウォーターフォールチャートを確認することで、それらを識別できます。 すべてのレンダリングブロックリソースの前に「X」が付きます。
アーリーヒントに適したサブリソースを特定する最も簡単な方法は、メインリソースがすでにlink rel=preconnectまたはlinkrel= preloadを使用している場合です。 これらは完璧な候補です。
そして、それはあなたが手動であなたのウェブサイトにアーリーヒントを加えることができる方法です。
しかし、自分でそれを行うための技術的なスキルがない場合はどうなりますか？
さて、もっと簡単な方法があります。
Cloudflareアカウントを使用して初期のヒントを有効にする
Cloudflareユーザーの場合は、ダッシュボードから次の手順でアーリーヒントを有効にできます。
- Cloudflareダッシュボードにログインし、ドメインを選択します。
- ダッシュボードから、[速度]>[最適化]をクリックします。
- [最適化された配信]で、[早期ヒント]を有効にします。
ご存知かもしれませんが、NitroPackの組み込みCDNもCloudflareによって提供されます。 この移行により、新しいHTMLエッジキャッシング機能の開発を開始するための扉が開かれました。この機能がリリースされると、Cloudflareアカウントがなくてもすべてのクライアントにアーリーヒントを有効にする可能性が提供されます。
私たちは開発プロセスに深く関わっており、HTMLエッジキャッシングをできるだけ早くリリースするために一生懸命取り組んでいます。 ですから、ニュースレターを購読し、ブログをフォローして、いつ発表するかを最初に知ってください。