プライム・ストラテジーの福田です。今回はKUSANAGI+CloudFlareで103 Early Hintsを利用しサイトの読み込みを高速化する方法をご紹介します。
103 Early Hintsとは?
Early Hintsとは、原則としてHTTP/2以降で利用可能であり、業界標準のRFC 8297として策定済みのレンダリングを高速化するための手法です。
通常、画像やフォントなどの追加コンテンツのアクセスはHTTP 200に付随するHTMLやCSS、JavaScriptに存在するリンクをもとに開始されますが、特にHTMLは動的サイトの場合はが返ってくるまでに時間を要することがあり、この間アイドリング(レスポンス待ちでクライアント側では特に何もしない)時間が発生することがあります。そこで、これから読み込まれるファイルが先にわかっているなら200を返す前に送って先に読み込みを開始してしまえば高速化できるじゃないかという発想の元、このEarly Hintsが存在します。
KUSANAGIでの103 Early Hintsの対応状況
KUSANAGIではこの記事の公開時点では、Early Hintsをサポートしていません。ただし、上級者の方であればKUSANAGIのNginxやApacheの設定を編集の上、CloudFlareなどと接続すると、Early Hintsの利用が可能となります。
そこで、今回私が用意した環境は次のとおりとしました: KUSANAGI 9 + Nginx 1.25.4 + CloudFlare。
CloudFlareにおいて、Early Hintsの機能は、以下で説明するように手動で設定する場合であれば、Freeプラン、つまり無料でも利用が可能となっています。
まずは、Early Hintsに追加ができそうなファイルを選定するところから始めていきます。
103 Early Hintsで提供するファイルリストの選定
ファイルの選定方法として、私は以下の基準で選びました:
必須要件として、多くのページで読み込みされているファイル。
任意要件として、以下の項目:
- ページの読み込み後早い段階で必要なファイル
- レンダリングブロックが不必要に長引かないようなファイル
これを探すため、まずは開発者用ツール(DevTool)を開いて、Networkタブをクリックします。そして、トップページから順にリンク経由でアクセス可能な複数のページにアクセスします。
各ページへアクセスするごとに、リクエストされたURL/ファイル種別をメモ帳もしくはExcel/データベースなどに登録しておきます。
そして一通りアクセスが終わったところで、集計をし、読み込み回数が多いファイルをまとめました。
その結果、今回は以下に示すファイルをEarly Hintsに登録することを決定しました:
/wp-content/uploads/2024/04/demonstration-cta-top.png
/wp-content/uploads/2024/04/demonstration-cta-bottom.png次に、上記のファイル名をもとに、Nginxの設定を編集します。
Nginxの設定の編集
/etc/opt/nginx/conf.d/(編集する対象となるプロファイル名).wp.incを開きます。そして、”location ~ [^/].php(/|$)“の波括弧で囲われているディレクティブ内に、more_set_headers "Link: <(リンク)>; rel=preload as=(style|script|image|font)";を追加していきます。複数のファイルをEarly Hintsに登録したい場合は、ダブルクオートを閉じる直前にカンマを付けた上で内容を増やしていけば大丈夫です。
今回の場合は、以下の行を追加しました:
more_set_headers "Link: </wp-content/uploads/2024/04/demonstration-cta-top.png>; rel=preload; as=image, </wp-content/uploads/2024/04/demonstration-cta-bottom.png>; rel=preload; as=image";CloudFlareの設定の編集
まず、CloudFlareのダッシュボードに行き、上記ドメインのダッシュボードに移動します。サイドパネルから、”Speed”を開き、「最適化」をクリックします。そのうえで、「コンテンツの最適化」をクリックし、その中にあるEarly Hintsのトグルをクリックして有効化します。トグルの背景が緑色、もしくはチェックマークが表示されていればOKです。
あわせて、サイドパネルから”DNS”をクリックし、当該サイトのDNSレコード内のプロキシステータスが「プロキシ済み」になっていることも確認しておいてください。オレンジ色の雲に、直線状の矢印が通っているようなアイコンが表示されていればOKです。
これで、CloudFlare側での設定は完了です。
実際に103 Early Hintsが有効化されているか確認する
では、実際にEarly Hintsが使えるのかどうか確認していきます。上記で利用したブラウザのDevToolでは、103 Early Hintsが有効かどうかを目視で確認できないため、cURLというコマンドを利用します。
なお、Windowsの場合、この記事の公開時点ではOS標準のcURL(C:/Windows/System32/curl.exe)ではHTTP/2に未対応のため、別途macOSもしくはLinux(ただし当該サイトがインストールされているKUSANAGIを除く)をご用意いただくか、別にcurlをインストールして頂く必要があります。
そして、準備ができたら以下のコマンドを実行します。CloudFlareのエッジ側でLinkヘッダが認識されるまでの最初の数回はEarly Hintsが返ってこないことがあるので、うまくいかなくても何度かコマンドを実行することをおすすめします:
curl -X HEAD -I (当該サイトのURL)そして、HTTP/2 200の前に、次のような出力が結果に含まれていればEarly Hintsが動作しているとわかります:
HTTP/2 103
link: </wp-content/uploads/2024/04/demonstration-cta-top.png>; rel=preload; as=image, </wp-content/uploads/2024/04/demonstration-cta-bottom.png>; rel=preload; as=imageどうしても動作しない場合は、しばらく待って再度試してみるか、もしくは本当にLinkヘッダが返ってきているのかどうかなどを確認の上再度試してみることをおすすめします。
103 Early Hintsで実際どれくらいパフォーマンスが改善するのか?
Lighthouseというパフォーマンス計測ツールを利用し計測した結果、以下のような結果となりました:
| 検査内容 | 適用前 | 適用後 | 差分 | 結果 |
| First Contentful Paint (FCP) | 1.0秒 | 1.0秒 | 0秒 | 変化なし |
| Largest Contentful Paint (LCP) | 3.4秒 | 3.3秒 | -100ミリ秒 | 3%改善 |
| Total Blocking Time (TBT) | 60ミリ秒 | 40ミリ秒 | -20ミリ秒 | 50%改善 |
| Cumulative Layout Shift (CLS) | 0 | 0 | 0 | 変化なし |
| Speed Index (SI) | 3.9秒 | 3.7秒 | -200ミリ秒 | 5%改善 |
| Performance Score | 90 | 91 | +1 | 1%改善 |
弊社のケース以外の参考として、大手海外Eコマースプラットフォーム提供サイトShopifyのCEOであるColin Bendell氏のXの投稿によると、Shopifyの顧客のサイトにおいて平均して500ミリ秒程度のLCP改善が見られたと報告しています。また別のケースとして、CloudFlare社内でのテストでは、読み込み時間が30%も改善されたと報告されています。
対応しているブラウザ
この記事の公開時点では、Mozillaの開発者向けページであるMDNによると、Chrome/Edgeはバージョン103以降、Firefoxはバージョン120以降、Operaはバージョン89以降で完全対応となっています。Safariはバージョン17以降で対応ですが、rel=preconnectのみの対応で、rel=preloadには対応がなされていません。
まとめ
多くのブラウザで2022年から対応開始された技術です。よって、まだまだ利用が広がるまでには時間がかかる技術かもしれません。また、手動でのチューニングはトライアンドエラーが必要となり手はかかります。ですが、設定次第では500ミリ秒のLCP改善や30%の読み込み時間短縮となり得ます。みなさんも実装にトライしてみてはいかがでしょうか。
