Early Hints(アーリーヒント) ベータ版の実装により、コアウェブバイタル指標であるCLSの改善が可能に？

通常ブラウザからサイトにアクセスする際、サーバー側は「200 OK」などのレスポンスを返しています。
このレスポンスをCloudflare側で控えておくことで、サーバーが反応するよりも速くCloudflareが返し、結果的にコンテンツの速度が向上する機能になります。

以下、公式ブログ

https://blog.cloudflare.com/early-hints/

※2022/6/22 機能がアップデートされました
https://blog.cloudflare.com/early-hints-performance/

では実際どのくらい効果があるのでしょうか？

独自に検証を実施しました。

検証結果

結論：機能をONにすることで、CLSが30%向上！

検証サイト	検証用サイト
サイトの構成	静的ページ

ですが…
Webサイト全体に大きな効果は見られませんでした。
静的に作っているページを使って検証を行なったため、動的なページではまた違う結果が見られるかもしれません。

注意点

・ベータ版なので予測していない問題が起こる可能性がある

・スイッチオンだけではなく、オリジンのヘッダに細かい設定が必要
→年内にCloudflare側で自動設定が実装されると発表あり、オリジン側の設定が不要になる可能性があるのでそれを待った方が良い

導入の手順

①Cloudflareへログイン→対象のドメインを選択

②サイドバーより「Speed」を選択、プルダウンに表示される「最適化」をクリック

下に向かってスクロールしていくと表示されます

③右にあるトグルスイッチにカーソルを合わせてクリックすると、機能がオンになります

まとめ

Webサイト自体に大きな改善が見られなかったことや、Cloudflareだけではなくオリジンでの設定が必要となるため、機能を使用するには少しハードルが高く感じられる結果となりました。

今後、アップデートが予定されていますので、そちらを待ってみても良いかもしれません。