本日、Cloudflareネットワークの力を利用して、Early HintsとFetch Prioritiesを自動化する方法を発表します。ほぼ1年前、私たちはEarly Hintsを発表しました。Early Hintsは、Webサーバーが完全なレスポンスを準備している間に、ブラウザに非同期で指示を送ることができる方法です。これにより、Webページの全レスポンスの受信をぼんやり待つのではなく、Web訪問者のためにWebページをより速く読み込む方法について、ブラウザに積極的な提案を行うことができます。
初期のラボ実験では、ページ読み込みが30%以上改善されることが確認されました。その後、本製品を使用している15万以上のWebサイトのために、約2兆個のヒントを送信してきました。
WebサイトでEarly Hintsを効果的に使用するには、HTTPリンクヘッダまたはHTMLリンク要素を設定して、どのアセットをプリロードするか、どのサードパーティサーバーをプリコネクトするかを指定する必要があります。これらの決定を行うには、Webサイトがブラウザとどのように相互作用するかを理解する必要があります。さらに、重要でないアセットに対しネットワーク帯域幅を飽和させる優先順位付け戦略を実施せずに、レンダリングブロックを引き起こすアセットを特定して、ヒントを与える必要があります（つまり、Early Hintをすべてに利用すれば良い結果が期待できるというわけではありません）。
このような知識を持ち、オリジン（または Worker経由）でEarly Hintsを設定できるユーザーにとっては、シームレスに動作します。しかし、オリジンサーバー（SaaSプラットフォームなど）にアクセスできないユーザー、プリロードや優先順位付けに最適なアセットがわからないユーザー、または単に独自のアプリの構築に集中したいユーザーにとっては、次の疑問が生じます。「中間サーバーとしてCloudflareは、私のWebサイトのパフォーマンスのために優先順位付けする最適な方法を知っているのではないか？」
答えはイエスです。そのため、開発者が何も設定しなくても、Smart HintsがWebアセットの最適な優先順位を決定する方法についてお話したいと思います。この機能のベータテストにご興味のある方は、こちらからサインアップできます。今年後半に行うSmart Hintsのテストにご協力いただくための詳しい手順をご連絡いたします。
背景
Webページにアクセスすると、ブラウザは実際にサーバーから多数の個別リソースをリクエストします。これらのリソースには、画像、テキスト、ビデオなどの可視的要素から、Webサイトの分析情報や機能などに影響を与える背景ロジック（Javascriptなど）まで、あらゆるものが含まれます。これらのリソースがブラウザに読み込まれる順序は、ユーザーがいかに早くページを閲覧し、対話できるかを決定する上で重要な役割を果たします。
ブラウザはサーバーからレスポンスを受け取ると、HTMLレスポンスを最初から最後まで順次解析します。HTMLレスポンスがブラウザに到着すると、<head>と<body>の2つの部分に分割されます。
<head>セクションは、HTMLレスポンスの先頭に表示され、スタイルシート、スクリプト、およびブラウザへのその他の指示などの必須要素を含んでいます。スタイルシートはページの見た目を定義し、スクリプトはインタラクティブな機能や特徴に必要なロジックを提供します。1
スタイルシートは、ブラウザがコンテンツをWeb訪問者に表示する方法を知るために待機するため、すばやく読み込むことが重要です。一方、スクリプトは、ブラウザに提供された指示に基づいて異なる動作を行うことができるので、興味深いものです。スクリプトに特定の指示（例えば、defer/async/inline）がない場合、「ブロックする」リソースとなることがあります。ブラウザは、ブロックするスクリプトリソースに遭遇すると、ウェブページの処理を一時停止し、スクリプトが完全に読み込まれて完全に実行されるまで待ちます。これにより、スクリプトの機能をWeb訪問者が確実に使用できるようにします。しかし、このブロック動作は、ブラウザがスクリプトの完了を待ってから先に進む必要があるため、ユーザーへのコンテンツ表示が遅れる可能性があります。
ブラウザがドキュメントの<body>セクションに到達するまでは、Web訪問者には何も表示されません。そのため、<head>セクションの読み込みプロセスを可能な限り最適化することが非常に重要なのです。スタイルシートやブロックスクリプトの読み込み時間を最小限に抑えることで、ブラウザはページコンテンツのレンダリングをより早く開始することができ、Web訪問者がより早くウェブページを見たり操作したりできるようになります。
Webの最適なパフォーマンスを実現することは、複雑な課題です。ページを構築するために必要なさまざまなリソースの読み込み順序を決めるのは、一般にブラウザですが、最近さまざまなツール（Early Hints、Fetch Priority、Lazy-Loading、H2 Priorities）がリリースされ、これによって開発者がブラウザに対し独自のリソース優先順位を指定することで、Webサイトの読み込みパフォーマンスを向上させることができます。これらのリソース優先順位を指定するツールや方法は効果的ですが、正しく実装されているかどうかを確認するための実装とテストが必要です。
優先順位付けツール
Webサイトのパフォーマンスを向上させる2つの方法として、Early HintsとFetch Prioritiesが注目されています。これらのツールは、重要なリソースのパフォーマンスを向上させるために、適切な順序でリソースを読み込む方法についてブラウザに情報を提供するのに役立ちます。
Early Hints
Early Hintsは、最終的なレスポンスが利用可能になる前に、サーバーがクライアントに何らかの情報を提供することを可能にします。
クライアントがサーバーにリクエストを送信する際、サーバーは最終的なレスポンスの手がかりとなる、「初期のヒント」で応答することができます。この初期のヒントは、初期に取得できる重要な静的オブジェクトや、関連リソースの取得先へのリンクなど、最終レスポンスに関連するヘッダーを含む個別のレスポンスです。
Early Hintsの目的は、最終的なレスポンスを待つ間に、クライアントが受け取った情報の処理を開始できるようにすることです。クライアントは、Early Hintを使用して早期にリソースのプリロードを開始し、最終レスポンスのための情報を持つサーバーに事前に接続することで、ページのロード時間の短縮につなげることができます。
Fetch Priority
リソースの読み込みを最適化するもう一つの強力なツールは、Fetch Priorities（以前はPriority Hintsと呼ばれていました）です。
Webページを解析する際、Webブラウザは、ダウンロード順序を最適化して帯域幅を効率的に使用するために、スクリプトやスタイルシートなどのリソースを優先的に取得することが多くあります。これらのリソースに割り当てられる優先順位は、リソースの種類、Webページ内の配置、HTMLレスポンス内の位置などの要素に基づいて、ブラウザによって決定されます。例えば、Web訪問者の可視領域内の画像にはより高い優先度を与えるべきですが、<head> セクションにあり早い段階でロードされる必須スクリプトには、さらに高い優先度が割り当てられるかもしれません。ブラウザは一般的に優先順位の割り当てを効果的に処理しますが、すべてのシナリオに対して必ずしも最適であるとは限らないことに注意する必要があります。
Fetch Prioritiesを活用することで、開発者はリソースの読み込みをさらに制御でき、Webページ上のさまざまなリソースに高い、または低い優先度を割り当てることができるため、Webページ全体のパフォーマンスを最適化するのに役立ちます。
Early HintsやFetch Prioritiesは、Webページのパフォーマンスを最適化するために非常に有効ですが、優先順位を変更するためには、HTMLリソースにアクセスし、他のリソースに対してどのように優先順位をつけるのがベストかについての知識が必要な場合があります。これらのツールを併用することで、開発者はますます複雑なパフォーマンス戦略を実行できるようになりますが、一方で、Webページは時とともに変化するため、多くのテスト、設定、管理が必要になります。Smart Hintsは、RUMデータビーコンとヒューリスティックを使用することで、開発者が指を動かすことなく、より良い優先順位付けの戦略を実行できるため、これらのツールの使用をより簡単に管理することができます。
アセットの優先順位をどのように付けるか？
CloudflareのSmart Hintsは、Early HintsとFetch Priorityの機能を活用し、インターネット上のWebサイトに関する膨大なRUM データを利用してリソース配信を最適化するもので、リソースの優先順位をその場で最適化します。Smart Hintsは、特定のレスポンスに基づいて、適切なヒントと優先順位をその場で動的に決定するのです。
でも、どうやって？
Cloudflare は、合成テストとRUM（Real User Measurements）の2つの方法でパフォーマンスデータを収集します。合成テストは、制御された環境下で自動化されたブラウザにWebページを読み込むことによって、パフォーマンスデータを収集します。RUMもパフォーマンスデータを収集しますが、これは実際のブラウザでWebページにアクセスした実際のユーザーから収集します。RUMは、Webページに小さなJavaScriptの断片（ビーコン）を挿入することで機能します。Cloudflare は、数千のサイトにわたって膨大な量のRUMデータを収集しています。
これら2つのパフォーマンスデータから、Cloudflareは、Webページの読み込みのボトルネックをインテリジェントに分析することができます。読み込みのボトルネックがレンダリングブロックリソースのダウンロードに起因する場合、 CloudflareはSmart Hintsを生成し、ブラウザはこれらのリソースのダウンロードを優先順位付けすることができます。
私たちはSmart Hintsを展開する中で、ヒューリスティックに変えることができるパターンを探すために、学習モデルの利用を模索していきます。そしてこれらのヒューリスティックを活用することで、 RUM や合成テストを使用していない同様のサイトのパフォーマンスを向上させることができます。
Smart Hintsによって、CloudflareはWebサイトやアプリの配信方法に革命をもたらし、ブラウジング体験をより速く、よりスムーズに、より楽しいものにすることができます。Cloudflare は、与えられたクライアントに適切な優先順位を推測することで、お客様がWebサイトのパフォーマンスに最適な優先順位を見つけ、刻々と変化するWebページの最適化にかかる時間を最小化することを支援します。
これを行うには、Cloudflareをどのように支援できるか？
より広範囲にこれを展開する前に、私たちは、あらゆる種類のコンテンツに対して最高のパフォーマンスを確実に決定するために、システムの大規模なベータテストを実施する予定です。
今後数か月間、私たちはベータ版のコホートを構築し、彼らと協力して誰もがSmart Hintsで素晴らしい体験ができるようにしていきます。この取り組みにご協力いただける方は、こちら からサインアップし、クローズドベータにご登録ください（ダッシュボードの[Speed]タブにあります）。お客様が行うための準備やフィードバックの提供方法が整い次第、当社よりご連絡差し上げます。
まとめ
私たちはコミュニティと協力して、コード不要/設定不要のこのエクスペリエンスを構築・最適化し、ページ読み込みの大規模な改善を皆さんにお届けできることを楽しみにしています。
1スクリプトやスタイルシートは、<body>セクション内に配置することもできますが、主な配置場所は<head>になります。