Early Hints を使う難しさと頑張り方の考察

Early Hints を使う難しさ と頑張り方の考察 2026-09-10 Fastly Tech Meetup vol.1: QUIC, 103 Early Hints araya - @arayaryoma NIKKEI

かつて試した上での知見を共有 します https://hack.nikkei.com/blog/advent20201220/ ChromeとFastlyのEarly Hintsの効果 計測に貢献する 2020/12/20 (Sun) #Frontend #Backend #CDN 目次 • HTTP/2 Server Push ◦ Server Pushの問題点 ◦ ChromeがServer Pushのサポ • 103 Early Hints • FastlyとChromeの効果計測実験 • 日経電子版Webでの利点 ◦ Fastlyのエッジからクライアン • 残る課題 • 関連文献 この記事は Nikkei Advent Calend 日経電子版 Web チームの阿部です。今回は HTTP/2 の目玉機能の 1 つであった Server P ush の事実上の終焉と、現在 Chrome チームや Fastly 社が実験中の 103 Early Hints に NIKKEI

103 Early Hintsについておさら Client fastly origin server 1 GET /index.html 103 Early Hints link: </main.css>;rel=preload; as=style 2 GET /index.html 1 GET /main.css 200 3 index.html 4 200 index.html 5 parse html 200 2 main.css Fastly ロゴ 出典: https://www.fastly.com/img/og-image-lg.png

103 Early Hintsについておさら
Client
fastly
origin server
1
GET /index.html
103 Early Hints
link: </main.css>;
html payloadのresponse, parseを
待たずにsubresourceのfetchを始められる
LCPの改善に役立つ(かも)
1
GET /main.css
200
3
index.html
4
200
index.html
5
parse html
200
2
main.css
Fastly ロゴ 出典:
https://www.fastly.com/img/og-image-lg.png

2026年の実際の利用状況 利用側としても、一般的にパフォーマンスに実影響があるのかの 統計を取るためにもっとデータがほしい... => まずは自分たちが使わねば 0.12% CDNでの利用 Vercel(Next.js)が無意味な103を送って2.9%程度あり これが引き上げている +0.035% 直近2年のCDNでの利用増加量 2024年7月と2026年7月を比較したときの増加量 0.0064% Fastlyでの利用 Add a description or highlight changes datasource: https://httparchive.org/

なにをEarly Hintするか LCPの改善を狙うなら、本来は口の画像も入れたい が、動的に頻繁に変わりパーソナライズも入りうる コンテンツ部では扱いづらい まず入れやすいのはcritical cssやjs 1 GET /index.html 103 Early Hints link: </main.css>;rel=preload; as=style 1 GET /main.css NIKKEI

実際にdeployすることを考えると... 現代のWebサイトにおいて、cssやjsなどの subresourceのURLにhash値が入らないこ とはほぼないため、実際には`main.css` のような固定値は返さない 1 GET /index.html 103 Early Hints link: </main.css>;rel=preload; as=style 1 GET /main.css in the real world.... 1 GET /index.html 103 Early Hints link: </main.958e5f75.css>;rel=preload; as=style 1 GET /main.958e5f75.css

頑張り方: Deploy workflow CI/CD でアプリケーションデプロイ時に build artifactから特定のファイルpathだけを 取り出してDictionary(KVS)に書き込む VCLでは特定のrequest pathに対し103を返 却するファイル種別(key)をあらかじめ決めて おく Client GET / 103 Early Hints link: </main.958e5f75.css>; link: </main.aa0f6aa2.js>; fastly Dictionary / Config Store main.css main.js main.958e5f75.css main.aa0f6aa2.js Write req/res origin server deploy main.958e5f75.css main.aa0f6aa2.js Deploy Pipeline push codes Developer Fastly ロゴ 出典: https://www.fastly.com/img/og-image-lg.png

1 if (!fastly_info.is_h2 && !fastly_info.is_h3) {
2 return;
3 }
4
5 set var.css = table.lookup(k2_top_early_hints, "main.css", "");
6 set var.js = table.lookup(k2_top_early_hints, "main.js", "");
7
8 set var.links = "";
9
10 if (var.css != "") {
11 set var.links = "<" var.css ">; rel=preload; as=style";
12 }
13 if (var.js != "") {
14 if (var.links != "") {
15 set var.links = var.links ", ";
16 }
17 set var.links = var.links "<" var.js ">; rel=preload; as=script";
18 }
19
20 if (var.links != "") {
21 early_hints("link: " var.links);
22 }
NIKKEI

💡 Tip: Network panelの見方 Chrome Dev ToolsではEarly hintsは独立し たresponseではなく、200 responseの中に 入っているように見える NIKKEI

💡 Tip: req.http.no-early-hints パフォーマンス測定などで無効化したいときにはrequest header fieldに no-early-hints: 1 をつけるとh2oは103を返さない

日経電子版でやってみた 条件 FCP [ms] LCP [ms] 無制限 / 1416 1428 hints 無制限 / 1420 1420 no-hints Slow 4G / 2832 5452 hints Slow 4G / 6432 6432 no-hints headless chromeで15回試行した中央値 ネットワークが遅い環境だと 顕著に差が出る ナビゲーションリクエストのレスポンスが 詰まる環境だとそれなりに差が出る LCPを埋めるにはやはり画像 をなんとかする必要がある FCPにおいてはcritical css, jsの解決が早く なったことにより効果が大きく出ている (日経電子版においては)LCPに画像が含まれ るのでやはりここを詰める必要がある NIKKEI

まとめ 最新のデプロイ安全性を知りたい (Fastlyさんへのフィードバック) Early Hintsを解釈できないプロキシがどの程度あって、それら をja4などで識別できると嬉しい critical css, jsくらいなら割と簡単にできる 比較的簡単にデプロイできるstatic css, jsだけでも、遅いネット ワーク環境ではそれなりに効果が出そう Kats Omuroさんの発表にあったmanifest fileをそのまま置くの もよさそう hintのhit率が低いと余分なネットワークリクエストを発火させ てしまうため、動的なコンテンツは研究が必要 もうすこし流行ってほしい パフォーマンス向上の事例も少ないし、流行ってくれたほうが 103受け取ると壊れる実装も炙り出せる

Thank you! NIKKEI