WEBサイトやSEOに関わっている方であれば「コアウェブバイタル」というキーワードを聞いたことがあるのではないでしょうか。

コアウェブバイタルは、表示速度や操作への応答性に関する指標です。

レスポンスの遅い（表示速度の遅い）サイトは、検索ユーザーからもGoogleからも良好な評価は獲得できません。一方、軽快に操作できるサイトは、ユーザーはもちろんのこと、検索エンジンからも評価されやすくなります。より良いサイト運営を行うためにはこの指標は避けて通れません。

実際に、Googleの調査では、ページの読み込み時間が1秒から3秒に増えるだけで離脱率は32％増加するとされています。コアウェブバイタルの改善は、検索順位だけでなくコンバージョン率にも直結する経営課題だと言えます。

この記事では、コアウェブバイタルの基本、SEOとの関係性や改善方法、チェックツールなどを幅広くご紹介します。

コアウェブバイタル以外のSEOについて興味のある方は「コアウェブバイタル（Core Web Vitals）以外にSEOに関係する要因は？」も併せてご覧ください。

SEOと関連深いコアウェブバイタル（Core Web Vitals）とは？

「コアウェブバイタル（Core Web Vitals）」を理解する前に「ウェブバイタル（Web Vitals）」という指標について簡単に触れておきましょう。

ウェブバイタルとは？

ウェブバイタルはGoogleが設定しているサイトの健全性を示す重要指標のことです。Googleの考える「優れたユーザーエクスペリエンス（UX）」を実現するための要素を意味する指標だと覚えておきましょう。

UXについては「【UI/UX】ユーザーの快適環境を実現するためのポイントを解説！」をご覧ください。

サイト上のユーザー体験を高めるために利用される指標であるため、SEO対策においても重要な意味を持ちます。ウェブバイタル指標の向上により、ユーザー体験を改善し、結果として検索上位に表示させることができるようになります。

コアウェブバイタルとは？

「コアウェブバイタル（Core Web Vitals）」とは、ウェブバイタルの中でも中心となる3つの要素のことです。頭文字をとって「CWV」と記載されることもあります。（以下「コアウェブバイタル」として記載）

その3つの要素は以下の通り。

1. LCP（Largest Contentful Paint） : ページの中で最も大きな要素（キービジュアル等）が読み込まれるまでの時間のこと。
2. INP（Interaction to Next Paint）：ユーザーが行ったクリックやタップ、キー入力などの操作に対して、ブラウザが画面を更新するまでの時間のこと。2024年3月にFID（First Input Delay）に代わって採用された指標です。
3. CLS（Cumulative Layout Shift）:  ページ読み込み中に発生するレイアウトの「ズレ」のこと。

2020年11月10日に発表されたGoogle公式ブログによると、コアウェブバイタルは2021年5月よりランキングの評価指標に組み込まれることが発表され、以降もSEO上、大切な情報が更新され続けています。

なお、2024年3月12日には、それまで指標の1つだったFID（First Input Delay）に代わって、INP（Interaction to Next Paint）が正式にコアウェブバイタルへ採用されました。INPはページ滞在中に発生したすべてのインタラクションへの応答性を評価する指標で、最初の操作のみを計測していたFIDよりも、ユーザーが実際に体感する操作性を正確に反映します。

Googleの見解をかみ砕いて言うと「リンクをクリックした後、画像等を含む目的のページがスムーズに表示されて、すぐに動作が行えるサイトが良いサイト」ということです。

すでにある程度の表示速度が実現できているサイトは、それを維持するようにしましょう。極端にページ表示速度の遅いサイトは、今後、検索順位変動などで影響を受ける可能性もあるため、対策を行なった方がいいでしょう。

各指標の評価基準は、以下の通りです。

指標	良好	改善が必要	不良
LCP	2.5秒以内	2.5〜4.0秒	4.0秒超
INP	200ミリ秒以内	200〜500ミリ秒	500ミリ秒超
CLS	0.1未満	0.1〜0.25	0.25超

 

コアウェブバイタルの3つの指標

コアウェブバイタルがSEO上重要な意味を持つことはご理解いただけたのではないでしょうか？ここからは前述した3つの指標を理解しやすいよう、より細かく解説していきます。

LCP：ページの表示にかかる時間は短いか

LCP（Largest Contentful Paint）は、ページの表示速度を計測した指標です。「ユーザーがサイトにアクセスしてから、メインコンテンツが表示されるまでの時間」を表す指標だと覚えておきましょう。

この指標で使用されるのはテキストや画像、動画など、ページ内の大きなコンテンツがブラウザに表示されるまでの時間です。この数値は秒単位で計測され、数値が小さいほど評価が高いとみなされます。

読み込み開始からコンテンツが表示されるまでの時間が2.5秒以内である場合、LCPは優良と考えられます。しかし、この時間が4.0秒以上である場合、不良と見なされてしまうため改善が必要です。

INP：ページ内機能の動作は速いか

INP（Interaction to Next Paint）は、ユーザーの操作に対する応答性を計測した指標です。2024年3月12日に、それまでコアウェブバイタルの指標だったFID（First Input Delay：初回入力遅延）に代わって正式に採用されました。

この指標では、ユーザーがページ滞在中に行ったクリックやタップ、キー入力など、すべてのインタラクションに対してブラウザが実際に画面を更新するまでの時間を計測します。数値はミリ秒（ms）単位で計測され、数値が小さい（応答時間が短い）ほど評価が高くなります。INPは200ミリ秒以内であれば「良好」、200〜500ミリ秒は「改善が必要」、500ミリ秒を超えると「不良」と判定されます。

FIDとINPはどちらも応答性を示す指標ですが、計測対象となる範囲と時間に違いがあります。FIDは最初のインタラクションのみを対象とし、計測される時間も入力遅延時間のみでした。一方、INPはページの読み込みを開始してからユーザーがページを離れるまでの全インタラクションを対象に、入力遅延時間・処理時間・表示遅延時間の合計を計測します。

そのため、計測範囲・計測される時間のどちらの観点からも、INPはFIDよりも実際のユーザー体験を包括的に反映する指標であると言えます。たとえば「最初のクリックは速いが、フォーム送信や検索フィルターの操作になると反応が遅くなる」といったケースは、FIDでは検出できませんでしたが、INPでは正しく評価の対象になります。

INPについて詳しくは「INP(Interaction to Next Paint)とは？新たなCore Web Vital指標の解説」で解説していますので参考にしてみてください。

CLS：意図しない動作がどれくらい発生したか

CLS（Cumulative Layout Shift）は累積レイアウト変更を意味します。レイアウトの安定性を測る指標として活用されます。

レイアウトの安定性とは簡単に言うと「ページ内の要素が正しく動くかどうか」を指します。

例えば、

• 画像やページのサイズが急に可変する
• 画像やコンテンツがあるべき場所からズレてしまう
• クリックしようとしている場所に急に広告画像が挿入されてしまい予期せず別のページに遷移してしまう

このように、視覚的にユーザーが混乱してしまう状況は「レイアウトの安定性に課題がある」という状態です。そのため、ユーザーとして煩わしく感じるレイアウトのズレを指標としたのがCLSです。

CLSは、ユーザーがページを閲覧していて操作していない時間に、ページ内のコンテンツがどれだけ移動したかを元に計測されます。

 

コアウェブバイタル（Core Web Vitals）を改善するには？

コアウェブバイタルの数値に改善の余地があった場合、どのような対応を行うべきなのでしょうか？ここからは具体的な施策を交えて解説していきます。

• LCP改善：画像の容量を少なくする
• INP改善：不要なコードの削除とJavaScriptの最適化
• CLS改善：画像サイズを指定

各指標の数値は基本的にPageSpeed InsightsやLighthouseなど、Googleが提供する無料ツールで計測することが可能です。

LCP改善：画像の容量を少なくする

サイトの表示速度を低下させる最も大きな要因の1つは画像ファイルです。

画像サイズの見直し

ファイルサイズが原因で表示速度が低下しているのであれば、シンプルにサイズを見直せば問題ありません。

「とりあえず大きめの画像を用意しておけば良いだろう」とリサイズや圧縮を怠ると、表示速度が非常に重くなってしまいます。

可能な限り編集ツールを用いて画像のリサイズ・最適化を行い、適切な圧縮形式（jpg、png、gif等）で書き出すよう心がけましょう。また、Googleが開発した画像形式WebP（ウェッピー）を利用することも効果的な対策の一つです。

サイトの表示速度改善を行う際に最も取り組みやすいため、まずは画像ファイルの最適化からスタートしてみると良いでしょう。

ブラウザキャッシュの利用

画像ファイル圧縮に次いでサイト表示高速化を期待できる施策は、ブラウザキャッシュの利用です。

ブラウザキャッシュとは、一度表示したページのデータをブラウザ側に保存しておくことで、次回以降同じページを読み込む際、表示を高速化する仕組みのことです。

ちなみにレンタルサーバーを使っている場合は、デフォルトでブラウザキャッシュ設定が「ON」になっていることも多いようです。気になる方は、一度コントロールパネルからキャッシュの設定を確認してみると良いでしょう。

LCP対象画像と遅延読み込み（lazy loading）の注意点

画像の遅延読み込み（loading=”lazy”）は表示速度の改善に役立つ施策ですが、LCPの計測対象となるファーストビューのメイン画像にこの設定を行うと、表示が遅れてLCPが悪化してしまいます。

LCPの対象画像には、優先的に読み込むよう指定する fetchpriority=”high” 属性を付与し、遅延読み込みの対象から外すようにしましょう。

INP改善：不要なコードの削除とJavaScriptの最適化

Webページの読み込み中や操作中にブラウザのメインスレッド（処理の中心となる経路）がユーザーの操作に応答できない状態になると、INPの指標に悪影響を与えます。画像圧縮の次に、HTML・CSS・JavaScriptの圧縮・最適化に取り組みましょう。

ソースコードを見直すことで、リクエスト数を減らせる上にコードの見通しも良くなるため、メンテナンス性向上も期待できます。

INPを改善するための具体的な施策としては、以下が挙げられます。

• 処理時間の長いJavaScriptのタスクを、小さな単位に分割する
• チャットウィジェットや広告タグなど、表示に直接関わらないサードパーティスクリプトの読み込みを遅延させる
• UI操作に関係しない重い処理はWeb Worker（バックグラウンドでの処理を可能にする仕組み）に任せ、メインスレッドの負荷を減らす

これらの対応によりメインスレッドの負荷が軽減され、ユーザーの操作に対してブラウザがすぐに反応できるようになります。

CLS改善：画像サイズを指定

CLSはレイアウトに関係する指標です。そのため、画像や動画のサイズが指定されていないなど、ソースコードそのものを改善することが大切です。

コンテンツのサイズを指定する、動的コンテンツや広告・埋め込み要素の配置を考慮する、Webフォントの読み込みを最適化するなどが対策として挙げられます。

YouTubeの動画、Google マップの地図、ソーシャルメディアの投稿など「埋め込み要素」が適切に設定されていない場合も、レイアウトが崩れてしまうため、注意が必要です。

 

コアウェブバイタル（Core Web Vitals）の計測方法

コアウェブバイタルの状態を計測するためにはツールを使用します。サイト改善に役立つツールは数多くありますが、ここでは、代表的な５つのツールを中心にご紹介します。

なお、計測データには「フィールドデータ」と「ラボデータ」の2種類があります。

フィールドデータは実際のユーザーのアクセス情報（Chromeユーザーエクスペリエンスレポート：CrUX）に基づく数値で、Googleはこのフィールドデータの75パーセンタイル値（訪問者の75％が「良好」と感じられる体験ができているか）を基準にコアウェブバイタルを評価しています。一方、ラボデータはシミュレーション環境での測定値で、開発中の検証に向いています。

後述する各ツールがどちらのデータを扱っているかを意識すると、より的確な改善につながります。

Google Search Console

左側のメニューで、▼エクスペリエンス＞ウェブに関する主な指標を選択。モバイル、PC別でグラフが表示されます。

それぞれのグラフ右上「レポートを開く」を選択。評価項目と、その詳細を確認できます。

大まかなページ状況を「Search Console」で確認し、具体的な改善方法を後述の「PageSpeed Insights」で確認するなど、ほかのツールと組み合わせることでより効率的に問題点を洗い出せるでしょう。

PageSpeed Insights

PageSpeed Insightsは、Googleの提供するサイト表示速度チェックサービスの定番です。使い方はとても簡単で、チェックしたいサイトのURLを入力するだけですみます。

独自の指標に基づき、モバイルとPCの表示速度をスコアリングしてくれます。

スコアはあくまで目安として受け入れ、Google側から提案されたアドバイスの中で実行可能なものから修正していくような対策を行いましょう。

Yellow Lab Tools

「Yellow Lab Tools（イエローラボツール）」は、 HTML、CSS、JavaScriptといった各種コードの中身について具体的な改善策を提案してくれるチェックツールです。

PageSpeed Insights同様、100点満点で評価してくれます。

興味深いのはそのチェック項目です。例えば、CSSならコードの重複箇所、色の数、不要なベンダープレフィックスの数などかなり細かいところまで表示してくれます。

Test My Site

「Test My Site（テストマイサイト）」は、Googleが提供していたモバイルサイトの表示速度チェックツールでしたが、サービスは終了しており、現在は利用できません。モバイルサイトの速度を確認したい場合は、前述のPageSpeed InsightsやGoogle Search Consoleのモバイルユーザビリティレポート、後述のChrome DevTools「Lighthouse」のモバイルモードを活用するとよいでしょう。

Chrome DevTools 「lighthouse」

最後に紹介するのは、Googleのデベロッパーツール上で使用可能な「lighthouse（ライトハウス）」と呼ばれるチェックツールです。

ページスピードインサイトにアクセスしてURLを入力しなくても、同様の検証結果をデベロッパーツール上で確認できます。

まずは、デベロッパーツールの表示方法から確認しましょう。以下、OSによってショートカットキーが異なります。

• Macの場合 : 任意のページで「command + option + i」
• windowsの場合 : 任意のページで「F12キー」

デベロッパーツールを開いたら、右上のタブから「lighthouse」を選択します。あとは、デスクトップとモバイルどちらを検証するか選択し、「Generate Report」という青いボタンをクリックするだけ。

数十秒ほどで、デベロッパーツール上から表示速度に関する詳細な項目をチェック可能です。

 

コアウェブバイタルを改善し、サイト運営に役立てよう

今回は、サイトの表示速度やチェックツール、改善方法を中心に解説しました。

細部にこだわって作り上げたUI、コンテンツであっても、表示速度が遅くストレス要因の多いサイトではユーザーが離脱してしまう可能性も。これは非常にもったいない状況です。

昨今、モバイルデバイスの普及に伴い、PCと比較すると処理速度の面で劣るスマートフォンのブラウザからの閲覧も非常に多くなりました。リッチで目を惹く表現以上に、「ストレスなくスピーディーに表示されるかどうか」がウェブサイトにおける「当たり前品質」の1つとなりつつあります。

すぐに全てを改善するというのは中々難しいので、まずはコツコツとできることから始めましょう。ファイルサイズを圧縮したり、リソースの読み込みを最小限に抑えたりする等々、小さな改善を積み重ねていくことがサイト運営においては非常に大きな意味を持ちます。

Webサイト運営やSEO対策などご不明点やお悩みがありましたらぜひ一度ご相談ください。

お問い合わせはこちら