検索ランクに影響するコアウェブバイタル（Core Web Vitals）指標とは？

Googleoの「PageSpeed Insights」（https://pagespeed.web.dev/）をご存じでしょうか？ このURLを開いて、計測したいWebページのURLを入力します。すると、そのページの読み込み速度の評価が表示されます。

そこには、LCP、INP、CLSといった見慣れない指標が並びます。

これら３つの指標は、まとめて「Core Web Vitals」と呼ばれます。重要なのは、Core Web Vitalsが示すのは、単なる「速度」ではないということです。

それは、ページの主要な内容がすぐ見えるか（LCP）、操作にすぐ反応するか（INP）、読み込み中に画面がずれないか（CLS）といった、ユーザーが実際にそのWebページで体験することの品質を評価するものなのです。

こうした３つの指標すべてを、Cloudflareだけで解決できるわけではありません。ではどうすればいいのかも含めて、Core Web Vitalsと、Cloudflareの関係を見ていきましょう。

Core Web Vitalsは3つの「体験」を測る

現在の「Core Web Vitals」は、次の３つの指標によって、ユーザーの「体験」を計測しています。

• LCP： Largest Contentful Paint （読み込み）
  • 画面内の大きな画像やテキストなど、主要なコンテンツが表示されるまでの時間を測る
• INP： Interaction to Next Paint （操作への反応）
  • クリックやタップなどの操作から、次の画面表示までの反応を測る
• CLS： Cumulative Layout Shift （表示の安定性）
  • 文字や画像、ボタンなどが予期せず動いていないかを測る

Googleが「良好」であると判断する目安は、LCPが2.5秒以下、INPが200ミリ秒以下、CLSが0.1以下です。評価の基準としては、実際の利用者によるページ読み込みの75パーセンタイルで判断します。つまり、少なくとも4人に3人が良好な体験と感じているかどうかで、総合的に良いか悪いかを判断することになります。

※INPは、2024年3月12日に、従来のFIDを置き換える新しい指標となりました

※出典： web.dev: Core Web Vitals

※出典： web.dev: Interaction to Next Paint becomes a Core Web Vital on March 12

PageSpeed InsightsのスコアとCore Web Vitalsのスコアは同じではない

PageSpeed Insightsでは、実際のユーザーの利用環境で測定したフィールドデータと、一定の環境を想定したシミュレーション環境で計測するラボデータの２種類のデータが同時に得られます。

Core Web Vitalsの実際の計測データは、「Chrome User Experience Report」、通称CrUXと呼ばれるデータセットとして確認できます。その中に含まれるフィールドデータは、過去28日間に集計されたデータから移動平均を取った値として毎日更新されます。

一方、ラボデータとしては、オープンソースのLighthouseを利用して、0〜100のPerformanceスコアを算出します。仮にこれが90点だからといって、Core Web Vitalsが必ずしも良好だとは限りません。逆に、これが60点だからといって、すべてのユーザーにとって遅く感じられるとは限らないのです。

フィールドデータとしてのPageSpeed Insightsは、実際のWebユーザーの体験の状況を見るために使い、ラボデータは、Webサイトが遅い場合に、その原因を探索するために参照する、といった使い分けができます。

※ CrUXとは、実際のChrome利用者から匿名で収集されたWeb体験データを集計したものです

※ Lighthouseとは、一定の条件でWebページの性能や品質を検査するツールです

※出典： Google PageSpeed Insights: About

Cloudflareによる改善が期待できるLCP

上に挙げたCore Web Vitalsの３つの指標の中で、最初のLCPは、画面内の最大画像や、メインとなるテキストブロックの表示時間を計測する、という指標です。

この値が悪化する原因としては、メイン画像が重い、オリジンサーバーの応答が遅い、画像取得が遅れる、CSSやJavaScriptによる描画が遅延する、といったことが考えられます。

このうち、Cloudflareによって改善が期待できそうなのは、「データを届ける」ことに関わる部分です。つまり、キャッシュによって、オリジンサーバーへのアクセスを減らす、CDNによってユーザーに近い場所から配信する、Cloudflare Imagesで画像を最適化する、さらに圧縮することで実際の転送量を減らす、といった対策が有効に機能します。

こうした施策は、当然ながらLCPの改善につながることが期待できます。ただし、不要な巨大画像が配置されていたり、読み込み順が考慮されていない、といった制作、実装上の問題まで自動的に直せるわけではありません。

※出典： web.dev: Largest Contentful Paint

※出典： Cloudflare Docs: Optimize performance

INPはJavaScriptやブラウザー側の処理を見る

次にINPは、ページを開いた後の操作への反応を見る指標です。たとえば、ユーザーがボタンを押す、メニューを開く、フォームに入力する、といった操作に対し、ブラウザーが次の画面を表示するまでの応答時間を測ります。

INPの値が悪い場合には、重いJavaScript、ブラウザー処理の詰まり、外部タグやスクリプトの過多などを疑います。たとえCloudflareで配信を速くしても、配信後のJavaScriptが重いなら、そのコード自体の実行時間は短くなりません。その場合には、コードそのものを見直す必要があります。

INPは、Cloudflareだけでは改善しにくい指標なのです。

※出典： web.dev: Interaction to Next Paint

CLSはページの作り方を確認する

３つめのCLSは、ページを読み込み中の予期しないレイアウトのずれを検出します。たとえば、文字で構成された文章を表示した後で画像が読み込まれて挿入され、それ以降の文章が下へ動いてしまう、ユーザーが押そうとしたボタンの位置が、広告の表示などによってずれ、タイミングが悪いと別の場所をクリックしてしまう、といった問題です。

その主な原因としては、画像や広告の表示領域があらかじめ確保されていないこと、後から要素が追加されること、Webフォントの適用によって文字幅が変化してしまうことなどが挙げられます。

Cloudflareによって画像やフォントの配信を改善できる場合はありますが、レイアウトそのものを改善するには、Webサイト側で設計、実装を見直す必要があります。

※出典： web.dev: Cumulative Layout Shift

PageSpeed Insightsで「100点」を目指す必要はない

Googleは、検索で上位に表示されたり、良いユーザー体験を実現するための指標として、Core Web Vitalsで良好な結果を得ることを推奨しています。

ただし、Core Web Vitalsが良好だからといって、必ず検索で上位になる、と単純には言えません。Google自身も、Core Web Vitalsで良い結果を出しても、検索上位が保証されるわけではないと説明しています。

つまり、SEOのためにPageSpeed Insightsを100点にすること自体を目的にする必要はないのです。それより優先したいのは、広告LP、商品・サービスページ、問い合わせページ、採用ページなど、ユーザーに近く、事業成果に直結するページの内容そのものです。

※出典： Google Search Central: Core Web Vitals and Google Search results

※出典： Google Search Central: Page Experience

DOMOの視点

Core Web VitalsはWebサイトの健康診断として使う

DOMOとしてCore Web Vitalsを見るとき、PageSpeed Insightsの点数だけを追うことはお勧めしません。まず確認するのは、以下の４点です。

• どのページで問題が起きているのか
• LCP、INP、CLSのどれが悪いのか
• 実ユーザーのデータでも悪いのか
• そのページは成果に近いのか

LCPなら配信や画像、INPならJavaScriptや外部タグ、CLSなら画像、広告、フォント、レイアウト、といったように、原因ごとに担当領域を分けます。すべてをCloudflareに頼って改善しようとするのでもなく、すべてをWebエンジニアだけの問題にしない、といった前提で臨むことが大切です。

Core Web Vitalsは、Web担当、マーケティング、制作、開発、インフラが同じ指標で課題を共有するための健康診断として使うのが有効です。大切なのは必ずしも100点を取ることではありません。ユーザーが待たされることなく、迷わずに目的を果たせるような状態を作ることです。

まとめ

Core Web Vitalsは、ユーザーのWebサイト体験を、LCP、INP、CLSの3つの指標から確認するためのものです。

Cloudflareは、CDN、キャッシュ、画像最適化、圧縮などを通じて、特にLCPに関わる配信領域を改善しやすいサービスです。

一方で、JavaScriptの処理やレイアウト設計など、Webサイト側で直すべき問題もあります。①どの指標が悪いのか、②なぜ悪いのか、③どこで直すべきなのか。この順番で考えるのが基本です。

覚えておきたい用語

• Core Web Vitals： Googleが定める、読み込み・操作への反応・表示の安定性を測るユーザー体験指標
• LCP： Largest Contentful Paintの略で、主要なコンテンツが表示される速さを測る指標
• INP： Interaction to Next Paintの略で、クリックやタップなどへの反応性を測る指標
• CLS： Cumulative Layout Shiftの略で、予期しないレイアウトのずれを測る指標
• FID： First Input Delayの略で、INP以前に使われていたCore Web Vitals指標
• PageSpeed Insights： Googleが提供するWebページのパフォーマンス分析ツール
• CrUX： Chrome User Experience Reportの略で、実際のChrome利用者の体験データを集計したもの
• Lighthouse： 一定のテスト環境でWebページの性能や品質を検査するツール