💨

HTTP 103:Early HintsステータスコードをcURLとChromeから確認してみた

2022/08/02に公開約3,400字

Google Chromeブラウザは2022年の6月から HTTPステータスコード 103:Early Hints に対応し、リソースをプリロードすることで、ウェブを高速化する仕組みに対応しました。

Early Hintts は HTTP/2 サーバープッシュが解決しようとした課題を別のアプローチで解決しようとする取り組みです。

従来であれば、ブラウザが index.html を要求し、レスポンスを受け取ったあと、index.html 内で記述されている CSS/JavaScriptなどのリソースを後続のリクエストで要求しました。

引用元

Early Hints を利用すると、サーバーは index.html のレスポンスを返す前に、メインリソースが依存するであろうサブリソースを返します。
ブラウザはメインリソースのレスポンス(server think time)を待たずして、サブリソースをリクエストできるため、結果的に、ウェブの表示を高速化できます。

引用元

先行事例として、Shopifyでは、Early Hints により Largest Contentful Paint(LCP) が約1秒も改善しました。

引用元

cURL から Early Hints を確認

Shopify に HTTP リクエストすると、実際に HTTP 103 レスポンスを確認できます。

$ curl -I https://www.shopify.com/
HTTP/2 103
link: <https://cdn.shopify.com/shopifycloud/brochure/assets/manifests/incentives_code_red/phase1_promo/_announcement_banner-4b27a606c875b9fdcb372e9533485cea604ecb2378a9ed07517f79f25cf067e0.css>; as=style; rel=preload

HTTP/2 200
date: Tue, 02 Aug 2022 11:38:29 GMT
content-type: text/html; charset=utf-8
vary: Accept-Encoding
accept-ch: Save-Data
link: <https://cdn.shopify.com/shopifycloud/brochure/assets/manifests/home/index-94a14efae44cfe13aae8b8a6349c85f1788db6b8434fe5e66be3e4bac42693c7.css>; rel=preload; as=style
...

要求したリソースが HTTP 200 を返す前に、CSS ファイルの URL を HTTP 103 Early Hints で返しているのがわかりますね。

Chrome から Early Hints を確認

Google Chrome は2022年6月にリリースされた、バージョン 103 から Early Hints にデフォルトで対応しました。

試しに、fastly が提供している次のブラウザ向けEarly Hints検証サイトにアクセスしてみましょう。

https://early-hints.fastlylabs.com/

Chrome のネットワーク・パネルからは、どういうわけか HTTP 103 レスポンスを確認できません。

代わりに、Chrome ブラウザーのネットワークレベルのイベント・ステートをロギングする NetLogを利用すると、HTTP 103 を確認できます。

chrome://net-export/ にアクセスし、Start Over からロギングを開始し、 Early Hints を有効にしたサイトにアクセスします。

アクセス後にロギングを停止し、ログファイルを次の netlog viewer サイトで確認します。

https://netlog-viewer.appspot.com/#import

サイドメニューの「HTTP/2」からアクセスした ホストの Connection ID をクリックします。

HTTPセッションのログから HTTP 103 のレスポンスを確認できました。

最後に

ウェブを高速化する HTTP 103:Early Hints を cURL/Chrome から確認する方法を紹介しました。

サーバーサイドを Early Hints 化したい場合、Cloudflareを利用すると、サクッと対応できます。

参考

Discussion

ログインするとコメントできます