Cloudflare(クラウドフレア)、ウェブパフォーマンスの最適化を自動化するスマートヒントを導入

CloudflareはSmart Hintsを導入し、Early HintsとFetch Prioritiesの手動設定を不要にした。Cloudflareのネットワークを活用することで、Smart Hintsは最適化プロセスを合理化し、手動設定を必要とせずにパフォーマンスを改善することを目指している。

Cloudflareは1年前にEarly Hintsを導入し、ウェブサーバーが完全なレスポンスを準備しながらブラウザに指示を送ることを可能にした。これは、ページのレンダリングに必要なリソースに関するヒントを含む、実験的な103のEarly Hintsステータスコードで情報応答を送信するものである。クライアントがサーバにリクエストを送ると、サーバは最終的なレスポンスに関連するヘッダを含む別のレスポンスである"アーリーヒント"で応答できる。これらのヘッダには、事前に取得できる重要な静的オブジェクトや、関連リソースを指すリンクが含まれることがある。この積極的なアプローチにより、ブラウザはアセットを事前に読み込み、サードパーティのサーバーに事前に接続できるようになり、ウェブページのロード時間が短縮される。ラボでの実験では、ロード時間の改善は30%を超え、Cloudflareは何千ものウェブサイトのために何兆ものヒントを送信してきた。

Image source

ウェブ・ブラウザは、リソースをフェッチするための独自の優先順位付けメカニズムを持っている。しかし、開発者は Fetch Priorities を使って、これらのデフォルトの優先順位を上書きできる。HTMLやJavaScriptで個々のリソースに最高、高、中、低などの優先レベルを割り当てることで、開発者はリソースのフェッチとロードの順序を制御できるようになる。これにより、重要なスクリプトなどの重要なリソースに優先順位をつけ、早い段階でフェッチしてロードすることで、ウェブページの知覚パフォーマンスを向上させるのだ。ウェブページの全体的なパフォーマンスを不用意に損なうことなく、Fetch Prioritiesを効果的に利用するためには、徹底的なテストを実施することが重要なのである。

Image Source

Early Hints と Fetch Prioritiesを効果的に利用するには、ウェブサイトの所有者は、HTTPリンクヘッダまたはHTMLリンク要素を設定して、事前接続すべきアセットまたはサードパーティサーバを指定する必要がある。そのためには、ウェブサイトがブラウザとどのように相互作用するかを深く理解し、レンダリングをブロックするアセットを特定する能力が必要だ。さらに、ウェブサイトの所有者は、ここでEarly Hintsを設定するためにオリジンサーバーにアクセスする必要がある。CloudflareのSmart Hintsは、CDNにおける最適なアセットの優先順位を自動的に決定することで、このプロセスを簡素化するのだ。

Smart Hintsは、Cloudflareの広大なネットワークと、合成テストおよび実ユーザー測定（RUM）から収集されたデータを活用している。合成テストでは制御された環境でウェブページを読み込み、RUMではウェブページに小さなJavaScriptを注入することで、実際のブラウザ上の実際のユーザーからパフォーマンスデータを収集するのだ。ローディングのボトルネックを分析することで、CloudflareはSmart Hintsを生成し、レンダリングをブロックするリソースのダウンロードを優先する。RUMやシンセティックテストを行わずにウェブサイトのパフォーマンスを向上させるために、学習モデルやヒューリスティックの利用を検討する予定である。

CloudflareはSmart Hintsの大規模なベータテストを実施し、さまざまなコンテンツタイプに対して最適なパフォーマンス決定をする予定である。Cloudflareは、ウェブサイト所有者や開発者がベータ版コホートに参加し、このコード/設定不要のエクスペリエンスの形成に貢献することを奨励しているのだ。クローズドベータ版に登録することで、参加者はCloudflareがページのロード時間を最適化し、Smart Hints機能を改良するための貴重なフィードバックを提供可能になる。