ラボラジアン 目次
1. 103 Early Hints とは？
103 Early Hints とは、HTTP レスポンスステータスコード の1つです。
ブラウザからリクエストされた Webページに、外部のCSSファイルを読み込むなどがあった場合、そのCSSファイルのURLを、いち早くブラウザに伝えるために使われます。
2. どのように動作するのか？
https://example.com/ というURLで Webページが公開されていると仮定します。
このWebページで、103 Early Hints が使われていない場合と、使われている場合のレスポンスを curl コマンドで取得して比較します。
curl -i -XGET https://example.com/2-1. 103 Early Hints が利用されていない場合
以下のレスポンスが返ってきます。
ごく一般的なレスポンスです。
ボディーに入っているHTMLでは、<link>タグで /css/style.css というCSSファイルの読み込みが指定されています。
この場合、こんな流れで処理が行われます。
- ブラウザがリクエストを送信する。
- Webサーバーがレスポンスを返す (ステータスコードは 200)。
- ブラウザがレスポンスを受け取る。
- 受け取ったHTMLを解析する（DOMツリーを生成する）。
- その中で見つかった CSSファイルを取得するためにリクエストを送信する。
- CSSファイルを取得して解析し、CSSOMツリーを生成する。
- DOMツリーとCSSOMツリーから、レンダーツリーを生成する。
- 画面にレンダリングする。
仮にDOMツリーの生成がすぐに終わったとしても、「CSSファイルをリクエスト → 取得する → 解析してCSSOMツリーを生成する」という処理が終わるのを待ってからでないと、レンダーツリーの生成に進めません。
参考として、ウェブブラウザがページを取得して表示するまでの流れに載せた図を再掲します。
2-2. 103 Early Hints が利用されている場合
103 Early Hints が利用されていると、以下のレスポンスが返ってきます。
先ほどのレスポンス (200) の前に、103 Early Hints のレスポンスが返ってきており、linkフィールドで /css/style.css が指定されています。
ブラウザは、最初にこのレスポンスを受け取ることで、すぐにCSSファイルにリクエストを送ることができます。これにより、全体の処理がより早く終了するというわけです。
3. Webサーバー側での、103 Early Hints 対応
103 Early Hints を利用するには、ブラウザが対応しているだけでなく、Webサーバーでの設定も必要です。
103 Early Hints は Webパフォーマンスを上げるのに効果的だと思いますが、これが面倒な点だと思います。
Apache での設定
Apache の場合、httpd.conf ファイルに以下を記述します。
H2EarlyHints onそして、例えば https://example.com/foo.html というURLで、/css/style.css ファイルを先読みさせたいのであれば、以下のように追記します。
<Location /foo.html>
H2PushResource /css/style.css
</Location>（ページ毎にこの記述をすることが現実的なのか？ 疑問ではあります）
そして Apache を再起動します。
各ディレクティブが記述できるコンテキスト
- H2EarlyHints ディレクティブを記述できるコンテキストは「server config, virtual host」です。
- H2PushResource ディレクティブを記述できるコンテキストは「server config, virtual host, directory, .htaccess」です（Apache 2.4.37 (centos) で .htaccess を試しましたが、なぜかちゃんと動きませんでした）。
参考ページ
4. CloudFlare の 103 Early Hints 対応
CloudFlare では、103 Early Hints のレスポンスもキャッシュしてくれるようです。
参考
5. 103 Early Hints が利用されていることを確認する方法
どのリソースに 103 Early Hints が使われているか知りたい場合、どうするのがよいでしょうか？ いくつか調べてみました。
curl コマンド
本記事の最初の方でも書きましたが、curl コマンドが楽です。103 のレスポンスが返ってくるかどうかすぐに確かめることができます。
curl -i -XGET https://example.com/Chrome DevTools（デベロッパー ツール）
103 Early Hints によって取得されたリソースは、[Network]パネルの [Initiator]列に「Push」と表示されます。
※ Webページにアクセスする際、[Disable cache] にチェックを入れておかないと、103 Early Hints が使われず、代わりにキャッシュが使われてしまうことがあるので注意してください。
そのままリソースを選択し、[Timing] を開くと、「Receiving Push」や「Reading Push」が表示されています。103 Early Hints で取得されたリソースには、この2つの項目が表示されます。
また、今回はスクリーンショットを用意していないですが、Chrome の通信ログ(TCP/IPも含む)を記録するで紹介した方法でも、103 Early Hints のレスポンスを確かめることができます。
Burp Suite
Burp Suite で 103 Early Hints が使われているURLにアクセスすると、103 Early Hints で先読みされたファイルの「Link」フィールドが、「200 OK」のレスポンスヘッダの中に表示されるようです。
Wireshark
Wireshark で SSL(TLS) 通信を複合できるように設定しておけば、HTTP通信を細かく観察することができます。
ここでは、いくつかスクリーンショットを貼っておきます。
その前には、PUSH_PROMISE というフレームがあります。
6. 103 で先読みさせたのにページ上で使われていない場合
「103 Early Hints」で読み込まれたリソースファイルが、HTMLページ上で使用されていない場合、Chrome デベロッパーツールの [Console]パネルに警告が表示されます。
The resource https://example.com/XXX.png was preloaded using link preload in Early Hints but not used within a few seconds from the window’s load event.
7. ブラウザの実装状況
2022年6月時点で、Chrome しか実装していません。
HTTP status code: 103 | Can I use… Support tables for HTML5, CSS3, etc
8. おわりに
CloudFlare のようなCDNであれば、元のHTMLに <link rel="preload" ...> があれば、自動的に 103 Early Hints のレスポンスを生成して、次回からそれをブラウザに返すこともできそうです。便利そうではありますが、実際はそうなっていないところを見ると何か問題があるのかもしれません。もちろん、Apache や nginx などのWebサーバーが、このような機能を実装することにも期待しています。かなりWebサイトが速くなるはずです。
追記（2022-06-25)：CloudFlare は「自動で 103 Early Hints を生成する機能 (Smart Early Hints)」を開発中だそうです。➡ Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone
