サーバープッシュを超える解決策 : 103 Early Hints ステータスコードを使った実験

Senior Principal Engineer, Fastly

2020年11月04日

Web パフォーマンスツールの有効性を実証するために、Chrome と Fastly は現在共同で実験を行なっています。そこで、この実験にご協力していただける方を募集しています。

一時期、サーバープッシュ機能が大きな注目を集めたのを覚えていますか？HTTP/2 の登場以来パフォーマンスの問題が重要視されてきましたが、サーバープッシュは理想的な解決策ではないことが次第に明らかになりました。その結果、複雑性やリスクを伴わずにほぼ同等のメリットが得られるプリロード機能がサーバープッシュに代わって広く使用されるようになりました。

しかし状況によっては、パフォーマンス上、プリロードの有効性に限界があります。2年前、Fastly のエンジニアを務める Kazuho Oku が提案した 103 Early Hints HTTP ステータスコードの活用について、Principal Developer Advocate の Andrew Betts がブログ記事を書きました。当時は Early Hints をサポートするブラウザがなかったためプロジェクトは行き詰まり、残念ながら Web トラフィックの処理に Early Hints が利用されることはほとんどありませんでした。

それ以来、プリロードヒントの使用が広がりましたが、HTTP Archive の2019年版 Web Almanac によると、Web サイトの16%がプリロード機能を使用しているそうです。また Firefox のテレメトリによると、HTTP/2 サーバープッシュの使用率は、2017年に Chrome が報告したセッションのおよそ0.04%だそうです。

そのため 103 Early Hints は、これらを超える可能性を秘めたパフォーマンス高速化のリューションとして期待できます。しかし 103 Early Hints への対応はブラウザベンダーにとって大規模な作業であるため、エンジニアの労力と時間を投資する前に有効性に関するデータを収集する必要があります。

そこで今回、実験を行うことになりました。

実験内容

必要なデータを集めるため Chrome は、受信した Early Hints に対応することによって節約された時間の追跡を始めました。実際に Early Hints を使用して処理するわけではないので、この時点ではパフォーマンスの改善は見られません。

それでも、Early Hint の受信と実際のレスポンスの受信の時間差を比較することで、103 Early Hints によってどれほどのパフォーマンス改善が見込めるか推定することが可能です。コミュニティが 103 Early Hints の将来性について判断できるよう、Chrome チームは集約されたデータを公開する予定です。

この実験でデータを集めるためには、103 Early Hints ステータスコードを送信するサイトが必要です。Chrome チームの実験に協力すべく、Fastly ではこの新しいステータスコードの送信をサポートしています。したがって、Fastly をご利用のお客様はこの実験に参加することができます。

今回の実験で特に必要とされているのは、レスポンスを送信する前にサーバーが何らかの処理を行う必要があるコンテンツで、レスポンスが自動的に読み込まれるアセット (画像、スクリプト、スタイルシートなど) を参照する可能性が高いものです。このようなコンテンツのリクエストに対して103 Early Hints を送信することで、サーバーが処理中の間にクライアントは空き帯域を利用してアセットをダウンロードすることができるというわけです。

例えば、埋め込まれた Fastly Fiddle が実行されると、このように POST リクエストが生成されます。

POST リクエストの処理完了後、データストリームの SVG 画像が参照され、SVG がさらに2つ読み込まれます。103 Early Hints を使用することで、ブラウザは POST リクエストの受信直後、最終レスポンスが始まる前に3つの SVG 画像の読み込みを開始できます。

これは POST 以外のリクエストでも同じです。キャッシュ不可能 (またはキャッシュしにくい) GET がオリジンへ送信された場合、エッジで生成された 103 Early Hints レスポンスによってブラウザがアセットをプリロードする前の遅延を大幅に回避することができます。

このようなコンテンツを含むサイトの場合、103 Early Hints を使用するメリットがある可能性があります。また、この実験に参加することで、この機能の有効性に関する貴重なデータをコミュニティと共有することができます。

Fastly を使って 103 Early Hints を送信

サイトで 103 Early Hints を有効化するには、以下のように VCL で実験用の h2.early_hints 関数を使用します。

sub vcl_recv {
 if (req.url ~ "^/fiddle/") {
   h2.early_hints("link: </images/progress.svg>; rel=preload", "link: </images/icons/server.svg>; rel=preload", "link: </images/icons/arrow.svg>; rel=preload");
 }
}

これによって、^/fiddle/ の正規表現にマッチする URL を含むすべての HTTP/2 リクエストに、3つの SVG 画像のヒントが送信されます。

安全性

お客様のサイトから 103 Early Hints ステータスコードを送信する場合、安全性に問題はないと考えられます。RFC でも推奨されているように、Fastly は HTTP/2 通信のみでこのステータスコードを送信するため、最先端の HTTP/2 クライアントには無視されるはずです。現在 Fastly Fiddle ツールでも実行されていますが、今のところ問題は見られません。

どのようなプロトコルへの変更でも見られるように、クライアントによっては問題が発生する場合がありますが、Fastly で行ったテストでは、古いベータ版の HTTP/2 クライアントのみにおいて 103 Early Hints の送信で問題が生じる可能性があることが分かっています。また Fastly が作成した 103 Early Hints を送信するテストページでは、最終的ではない 103 ステータスコードの受信によって問題が発生するか、さまざまなクライアントをテストすることが可能です。万が一クライアントにて問題が発生した場合は、テストページのリンクで問題を報告してください。

注意 : Fastly のテストページでは、フォームを通じて問題が報告されない限り新しい情報は保管されません。

より優れた Web の構築に向けてご協力ください

Web パフォーマンスを改善する手段として、103 Early Hints ステータスコードに対する関心が高まっています。しかし、ブラウザが Early Hints をサポートするためには、有効性を裏付けるデータが必要です。この記事に記述されているタイプのコンテンツを含むサイトをお持ちの方は、ぜひこの実験にご協力ください！

詳しくは、私のメールアドレスまで (mnot@fastly.com) お気軽にお問い合わせください。