Web

HTTPステータスコード「103 Early Hints」について

投稿日:2022年6月24日 更新日:

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 が利用されていない場合

以下のレスポンスが返ってきます。

103 Early Hints が使われていない場合のレスポンス

ごく一般的なレスポンスです。

ボディーに入っているHTMLでは、<link>タグで /css/style.css というCSSファイルの読み込みが指定されています。

この場合、こんな流れで処理が行われます。

  1. ブラウザがリクエストを送信する。
  2. Webサーバーがレスポンスを返す (ステータスコードは 200)。
  3. ブラウザがレスポンスを受け取る。
  4. 受け取ったHTMLを解析する(DOMツリーを生成する)。
  5. その中で見つかった CSSファイルを取得するためにリクエストを送信する。
  6. CSSファイルを取得して解析し、CSSOMツリーを生成する。
  7. DOMツリーとCSSOMツリーから、レンダーツリーを生成する。
  8. 画面にレンダリングする。

仮にDOMツリーの生成がすぐに終わったとしても、「CSSファイルをリクエスト → 取得する → 解析してCSSOMツリーを生成する」という処理が終わるのを待ってからでないと、レンダーツリーの生成に進めません。

参考として、ウェブブラウザがページを取得して表示するまでの流れに載せた図を再掲します。

HTML取得後の処理フロー

2-2. 103 Early Hints が利用されている場合

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 のレスポンスもキャッシュしてくれるようです。

[Speed] – [最適化] ページ

参考

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 のレスポンスを確かめることができます。

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

2020.09.09

Burp Suite

Burp Suite で 103 Early Hints が使われているURLにアクセスすると、103 Early Hints で先読みされたファイルの「Link」フィールドが、「200 OK」のレスポンスヘッダの中に表示されるようです。

Wireshark

Wireshark で SSL(TLS) 通信を複合できるように設定しておけば、HTTP通信を細かく観察することができます。

ここでは、いくつかスクリーンショットを貼っておきます。

HTTP2 (HyperText Transfer Protocol 2) の中に「103 Early Hints」と「200 OK」があります。
その前には、PUSH_PROMISE というフレームがあります。
1つ前の画面において、1つ下の階層を開いたところです。

更に1つ下の階層を開いたところです。

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

103 Early Hints – HTTP | MDN

8. おわりに

CloudFlare のようなCDNの場合、元のHTMLに <link rel="preload" ...> が含まれていれば、自動的に 103 Early Hints のレスポンスを生成して、次回からそれをブラウザに返すこともできそうです。便利そうではありますが、実際はそうなっていないところを見ると何か問題があるのかもしれません。もちろん、Apache や nginx などのWebサーバーが、このような機能を実装することにも期待しています。かなりWebサイトが速くなるはずです。

追記(2022-10-07):本日、CloudFlare Pages が 103 Early Hints を実装したそうです。➡ Cloudflare Pages gets even faster with Early Hints

追記(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

9. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

複数のGoogleアカウントのGmailページを一括で開く

複数のGmailアカウントのメールページを一括で開く方法について書いています。

Chrome

Chrome 96 で Lighthouse の検査が終わらない問題が修正されました

Chrome 96で Lighthouse の検査が終わらない問題について書きました。

Web

クロスルート証明書の仕組みについての覚書

クロスルート証明書についての覚書です。

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。