---
title: Early Hints を使う難しさと頑張り方の考察
tags: 
author: [araya](https://www.docswell.com/user/araya)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/VJPK1DLPE8.jpg?width=480
description: Early Hints を使う難しさと頑張り方の考察 by araya
published: September 10, 26
canonical: https://www.docswell.com/s/araya/5N78MQ-early-hints
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/VJPK1DLPE8.jpg)

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

# Page. 2

![Page Image](https://bcdn.docswell.com/page/2EVVY1QVEQ.jpg)

かつて試した上での知見を共有
します
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

# Page. 3

![Page Image](https://bcdn.docswell.com/page/57GL92W1EL.jpg)

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

# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EQYWP3NJP.jpg)

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

# Page. 5

![Page Image](https://bcdn.docswell.com/page/KJ4WKY1371.jpg)

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/

# Page. 6

![Page Image](https://bcdn.docswell.com/page/LE1YX6GZ7G.jpg)

なにを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

# Page. 7

![Page Image](https://bcdn.docswell.com/page/GEWGNWK6J2.jpg)

実際に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

# Page. 8

![Page Image](https://bcdn.docswell.com/page/47ZL35ZRJ3.jpg)

頑張り方: 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

# Page. 9

![Page Image](https://bcdn.docswell.com/page/YJ6WX9Z1JV.jpg)

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

# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJ5MXNWLJ4.jpg)

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

# Page. 11

![Page Image](https://bcdn.docswell.com/page/LE3WX24DE5.jpg)

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

# Page. 12

![Page Image](https://bcdn.docswell.com/page/8EDK2ZQ27G.jpg)

日経電子版でやってみた
条件 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

# Page. 13

![Page Image](https://bcdn.docswell.com/page/V7PK1DLLJ8.jpg)

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

# Page. 14

![Page Image](https://bcdn.docswell.com/page/2JVVY1Q6JQ.jpg)

Thank you!
NIKKEI