#15 103 Early Hints、返すだけでは速くならない

103 Early Hintsは、最終的なHTMLが完成する前に、必要になりそうなCSSやJavaScriptを`Link`ヘッダーでブラウザへ知らせる仕組みです。ただし、103を返すだけでページが速くなるわけではありません。今回catatsuyが紹介するEarly Hintsについて、初めて聞くhentekoが仕組みから実運用の注意点まで質問しながら掘り下げます。

前半では、現在は主要ブラウザから削除されたHTTP/2 Server Pushから振り返ります。サーバーにはブラウザのキャッシュ状態が分からず、不要なリソースまで送ってしまう問題がありました。H2Oはこの問題に対して、ブラウザが持っていると推測されるリソースを`h2o_casper` Cookieで管理するCASPerを実装しました。さらに、その発想をHTTP/2へ一般化するCache Digestsも提案されましたが、標準化には至りませんでした。Early HintsではリソースそのものをPushせず、取得するかどうかをブラウザに委ねることで、この役割分担を変えています。

後半では、SSRでHTMLを生成している間にCSSやJavaScriptの取得を進める仕組み、CDN Edgeから早く返す利点、fingerprint付きassetとデプロイ世代の同期問題を取り上げます。nginx 1.29.0の`early_hints`ディレクティブはupstreamから届いた103を転送する機能であり、nginx自身が103を生成するものではありません。また、HTTP/2・HTTP/3かつ`Sec-Fetch-Mode: navigate`に対象を絞る理由や、nginx 1.29.7以降ではproxy先のデフォルトがHTTP/1.1に変わったことも紹介します。

Early Hintsで重要なのは、確実に使う少数のリソースだけをHintし、端末別に計測することです。Shopifyの観測データの事例も参照しながら、preloadするリソースを増やしすぎると逆効果になり得ることや、実際にLCPが改善したかを確認する必要性まで考えます。

- Early Hintsの解説（Chrome for Developers）: https://developer.chrome.com/docs/web-platform/early-hints

- Remove HTTP/2 Server Push from Chrome（Chrome for Developers）: https://developer.chrome.com/blog/removing-push

- H2O HTTP/2 Directives — http2-casper: https://h2o.examp1e.net/configure/http2_directives.html

- Cache Digests for HTTP/2（IETF Datatracker）: https://datatracker.ietf.org/doc/draft-ietf-httpbis-cache-digest/

- RFC 8297: An HTTP Status Code for Indicating Hints: https://datatracker.ietf.org/doc/html/rfc8297

- NGINX Introduces Support for 103 Early Hints: https://blog.nginx.org/blog/nginx-introduces-support-103-early-hints

- nginx Issue #779 — Enable Early Hints 103 without upstream support: https://github.com/nginx/nginx/issues/779

- Keep-alive to upstreams is now default in NGINX 1.29.7: https://blog.nginx.org/blog/keep-alive-to-upstreams-is-now-default-in-nginx-1-29-7

- Fastly Early Hints documentation: https://www.fastly.com/documentation/reference/http/early-hints/

- Fastly VCL `early_hints()`: https://www.fastly.com/documentation/reference/vcl/functions/tls-and-http/early-hints/

- FastlyとYottaaのEarly Hints導入事例: https://www.fastly.com/jp/blog/how-fastly-and-yottaa-transform-site-performance-with-early-hints

- Early Hints at Shopify（Performance @ Shopify）: https://performance.shopify.com/blogs/blog/early-hints-at-shopify

関連リンク:

- 103 Early Hints（MDN）: https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Status/103

- Sec-Fetch-Mode（MDN）: https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Sec-Fetch-Mode

- Next.js: https://nextjs.org/

- Go `net/http`: https://pkg.go.dev/net/http

- Lighthouse（Chrome for Developers）: https://developer.chrome.com/docs/lighthouse/overview

- CrUX（Chrome UX Report）: https://developer.chrome.com/docs/crux

- New Relic: https://newrelic.com/

─────────────

YouTube: https://youtu.be/jFyg4t3hK80

Web: https://yaoyorozu-oss.henteko07.com/

X: https://x.com/yaoyorozu_oss