HTTP 103:Early HintsステータスコードをcURLとChromeから確認してみた
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検証サイトにアクセスしてみましょう。
Chrome のネットワーク・パネルからは、どういうわけか HTTP 103 レスポンスを確認できません。
代わりに、Chrome ブラウザーのネットワークレベルのイベント・ステートをロギングする NetLogを利用すると、HTTP 103 を確認できます。
chrome://net-export/ にアクセスし、Start Over からロギングを開始し、 Early Hints を有効にしたサイトにアクセスします。
アクセス後にロギングを停止し、ログファイルを次の netlog viewer サイトで確認します。
サイドメニューの「HTTP/2」からアクセスした ホストの Connection ID をクリックします。
HTTPセッションのログから HTTP 103 のレスポンスを確認できました。
最後に
ウェブを高速化する HTTP 103:Early Hints を cURL/Chrome から確認する方法を紹介しました。
サーバーサイドを Early Hints 化したい場合、Cloudflareを利用すると、サクッと対応できます。
Discussion