「表示速度が遅くてユーザーがすぐ離れてしまう」
「SEO対策しているのに検索順位がなかなか上がらない」
「コアウェブバイタルの数値を改善したいけど、どこから手をつければいいのかわからない」
こんな悩みを感じたことはありませんか？
コアウェブバイタル（Core Web Vitals）とは、Googleがユーザー体験を数値で評価するために導入した指標です。Webサイトの表示速度や操作性、視覚の安定性などが評価の対象になります。
本記事ではコアウェブバイタルについて、以下の内容をわかりやすく解説します。
- コアウェブバイタルの基本的な3つの指標
- コアウェブバイタルの評価を確認する方法
- 評価が悪いときに考えられる原因と改善方法
この記事を読むことでコアウェブバイタルの仕組みを理解し、SEO効果を高めることができます。上位表示を目指す方は、ぜひ参考にしてください。
- 目次
コアウェブバイタル（Core Web Vitals）とは？
コアウェブバイタルとは何ですか？
簡単にいうと、ユーザーエクスペリエンス（UX）の質を計測するための評価指標のことです。
ユーザーファーストを掲げているGoogleは、ユーザーがより快適に利用できるよう、定期的に検索順位を決める評価指標をアップデートしています。その指標として2021年6月から新たに運用が始まったのが「コアウェブバイタル（Core Web Vitals）」です。
コアウェブバイタル（Core Web Vitals）とは、ユーザーエクスペリエンス（UX）の質を計測するための評価指標です。LCP・INP・CLSの3つの指標を用いて、Webサイトを訪問したユーザーの使い勝手の良し悪しを測ります。
Googleでは、もともとWebサイトで優れたユーザー体験を提供するための「ウェブバイタル（Web Vitals）」という指標を設けていました。その中でも、LCP・INP・CLSの3つが「核」となる重要な指標であるため、コアウェブバイタルと呼んでいます。
また、検索結果の表示順位を決める要素の1つでもあるコアウェブバイタルは、以前はモバイル端末のみが対象でしたが、2022年2月からパソコンでも適用されています。
SEOに与える影響
では、コアウェブバイタルはSEOにどのような影響を与えるのでしょうか？
Googleでは公式に以下のように明言しています。
ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。
引用：Google検索セントラル「より快適なウェブの実現に向けたページ エクスペリエンスの評価」
以上のことから、コアウェブバイタルの数値が低いから評価が下がるのではなく、内容や質が同じ程度のWebページが複数ある場合には、コアウェブバイタルの数値の高いWebページが上位表示を獲得できる仕組みであることがわかります。
つまり、コアウェブバイタルの数値を高めることばかりに力を注いでも、結局は良質なWebページのほうが評価されるってことですか？
そういうことです！良質なコンテンツ作りが重要であることには変わりありません。
コアウェブバイタル（Core Web Vitals）を構成する3つの指標とは？
3つの指標があるとのことですが、どういうものですか？
表示の速さ・操作への反応速度・デザインのズレなど、ユーザー体験に関わる3つの要素を測る指標です。
コアウェブバイタルは、LCP・INP・CLSの3つの指標で構成されています。
| 指標名 | 内容 |
|---|---|
| LCP（Largest Contentful Paint） | ページの表示速度を示す指標 |
| INP（Interaction to Next Paint） | ユーザー操作に対する応答の速さを示す指標 |
| CLS（Cumulative Layout Shift） | 表示中のレイアウトの安定性を示す指標 |
それぞれの指標について、詳しく解説します。
LCP（Largest Contentful Paint）
LCPは「Largest Contentful Paint）」の頭文字をとったもので、日本語では「最大コンテンツの描画」という意味です。これは、Webページの読み込みが開始されてから、ユーザーが「ページのメインコンテンツが表示された」と体感できるまでの時間を評価する指標です。
ユーザーに快適な体験を提供するためには、このLCPの時間が2.5秒未満であることが理想とされています。
INP（Interaction to Next Paint）
INPは「Interaction to Next Paint」の頭文字をとったもので、日本語では「次の描画までの応答時間」という意味です。
これは、ユーザーがWebページ上でボタンを押したりリンクをタップしたりといった操作を行った際に、その操作に対して画面上で反応が表示されるまでの時間を評価する指標です。
ユーザーに快適な体験を提供するためには、このINPの時間が200ミリ秒未満であることが理想とされています。
なお、これまで使われていたFID（First Input Delay）は、2024年3月にINPへ正式に置き換えられました。
INP（Interaction to Next Paint）
CLSは「Cumulative Layout Shift」の頭文字をとったもので、日本語では「累積レイアウトシフト」という意味です。Webページの表示中に、ユーザーが意図しないレイアウトのズレがどれだけ発生したかを評価する指標です。
読み込み中にボタンの位置が突然変わって押し間違えるような現象が、CLSによって数値化されます。CLSスコアはズレの大きさと発生頻度をもとに計算され、0.1未満が理想です。
コアウェブバイタル（Core Web Vitals）の評価を確認する方法
コアウェブバイタルの概要はわかりましたが、数値はどうやって確かめるんですか？
コアウェブバイタルの評価は、ツールを使って確認します！
コアウェブバイタルの評価を確認するのに、特別なツールは必要ありません。Googleが提供している以下のツールで確認できます。
それぞれのツールを使ったコアウェブバイタルのチェック方法を解説します。
Googleサーチコンソール
Googleが提供する「Googleサーチコンソール」は、Webサイトの検索パフォーマンスや技術的な問題を把握できる無料の管理ツールです。
コアウェブバイタルの3つの指標を「良好」「改善が必要」「不良」の3つの段階で判定し、問題のあるWebページを自動で検出・リストアップします。
- Googleサーチコンソールにログインします。
- 左にあるメニューの「ウェブに関する主な指標」をクリックしてください。
- 「モバイル」と「PC」のグラフが表示されますので、確認したいデバイスの「レポートを開く」をクリックしましょう。
- LCP・INP・CLSの3つの指標の判定結果が、「良好」「改善が必要」「不良」で表示されます。
PageSpeed Insights
Googleが提供する「PageSpeed Insights」は、Webページの表示速度や操作性、視覚的な安定性などを総合的に分析できる無料ツールです。操作はとても簡単で、計測したいURLを入力するだけで、Webページ全体の数値と合わせて、コアウェブバイタルの数値が表示されます。
さらに、修正箇所や改善提案も表示されますので、Webページの改善に役立てられます。
- PageSpeed Insightsにアクセスしましょう。
- 計測したいURLを検索バーに入力し、「分析」をクリックします。
- 表示された結果を確認してください。
LightHouse
Chromeに標準搭載されている「LightHouse」は、開発者向けのWebサイト・アプリ評価ツールで、開発・テスト環境や本番ページのパフォーマンスをシミュレーション的に測定することができます。
LCPやCLSなどのコアウェブバイタルの一部を確認することも可能ですが、実ユーザーデータ（フィールドデータ）ではなく、あくまでシミュレーション結果です。
また、オフラインでの計測となるため、INPの数値は測定できません。代わりに、ユーザーのクリックやタップなどの行動から応答までの合計待ち時間である、「TBT（Total Blocking Time）」の測定が可能です。
Chrome拡張機能での確認方法
- LightHouseをインストールします。インストールが完了したら、ブラウザの右上にある拡張機能のアイコンが表示される場所に、LightHouseのアイコンが表示されます。
- 計測したいWebページを開いたら、LightHouseのアイコンをクリックし、「Generate Report」ボタンをクリックしましょう。
- レポート画面が表示されます。
Chrome DevToolsでの確認方法
- 計測したいWebページで、Chrome DevToolsを開きましょう。
- タブメニューの「Lighthouse」を選択し、「Generate Report」ボタンをクリックしてください。
- レポート画面が表示されます。
LCP（Largest Contentful Paint）の改善方法
コアウェブバイタルの数値を確認して、改善が必要であれば対応しましょう！
まずは、LCPのスコアが低下する原因と改善策を解説します。
原因
- サーバーの応答に時間がかかる
- 画像やフォントなどのリソースの読み込みが遅い
- JavaScriptやCSSの読み込みがレンダリングをブロックしている
- メインスレッドの負荷が高く、表示処理が遅延している
- DOM構造が複雑で、描画に時間がかかる
LCPのスコアが低下する原因は、主にデータが重い、表示までの処理が遅いといったことが考えられます！
改善策
- 画像のサイズと形式をを最適化する
- 不要な画像を削除する
- 画像をCDN経由で配信する
- Lazy Loadを設定する
- 不要なJavaScriptとCSSを削除する
- JavaScript・CSSを圧縮して読み込みを軽くする
- レンダリングをブロックするリソースの非同期読み込みを検討する
- サーバーのレスポンス速度を改善する
- HTMLの初期表示を高速化する
- DOMサイズを小さくし、複雑な構造を避ける
- フォントの読み込みを最適化する
LCPのスコアを改善するには、ページ表示の遅延を引き起こしている要素を特定し、リソースの最適化や読み込みの効率化を行うのが効果的です。
INP（Interaction to Next Paint）の改善方法
次に、INPのスコアが低下する原因と改善策を解説します。
原因
INPのスコアが悪化する主な原因は、ユーザー操作に対する反応が遅れることです。特に、大量のJavaScript処理やイベントリスナーの処理が重い場合、メインスレッドがブロックされて操作に即時反応できなくなることがよくあります。
なるほど。JavaScriptが多いと、ユーザーが何か操作しても、すぐに画面が反応しなくなってしまうんですね！
そうなんです。ページ読み込み後も重い処理が続いていると、INPのスコアに悪影響が出ます。
改善策
- 不要なJavaScriptやサードパーティスクリプトを削除する
- 必要なスクリプトは圧縮して軽量化する
- JavaScriptの実行タイミングを遅延・非同期に調整する
- メインスレッドでの処理を最小限に抑える
- Webワーカーを活用して、メインスレッド以外でバックグラウンド処理を行う
- 長時間かかる処理は分割する
- ネットワークリクエストの数とサイズを減らして通信を高速化する
Webワーカーは、メインスレッドとは別にJavaScriptの処理をバックグラウンドで実行できる仕組みです。通常はメインスレッドで行われる処理がバックグラウンド処理になれば、INPの改善につながります。
CLS（Cumulative Layout Shift）の改善方法
最後に、CLSのスコアが低下する原因と改善策を解説します。
原因
- 画像や動画の読み込み時にサイズ指定がされていない
- 広告埋め込みウィジェットなど、動的コンテンツが後から挿入される
- スライダーやカルーセル内で画像の読み込みによるサイズ変更が起こる
- Webフォントの読み込みが遅く、表示フォントが切り替わってレイアウトがズレる
- JavaScriptでDOMを動的に変更した際にレイアウトが再計算される
CLSは、ユーザーが意図しないレイアウトの変化によって発生するため、「いつ」「どのくらい動いたか」がスコアに影響します。
改善策
- すべての画像や動画に明確なwidthとheight属性をを指定する
- スライダーや広告の表示領域をあらかじめ確保しておく
- Webフォントはフォントディスプレイ戦略を適用して、表示のズレを防ぐ
- 動的に挿入される要素は、事前にスペースを確保してレイアウトを崩さないようにする
- JavaScriptによるDOMの操作は最小限にし、視覚的に影響のない方法で行う
表示に時間がかかる外部リソースがある場合でも、あらかじめ領域を固定しておくことで、あとからズレる心配を減らせます。
コアウェブバイタル（Core Web Vitals）とともに重要視される4つのシグナル
Googleが重要視しているのは、コアウェブバイタルだけではありません。検索順位を決める際にコアウェブバイタルとともに重要視される、4つの指標を解説します。
モバイルフレンドリー
Webサイトがスマートフォンに対応しているかどうかを評価する指標がモバイルフレンドリーです。モバイルフレンドリー対応とは、Webサイトをスマートフォンで快適に閲覧できるように、最適化することを指しています。
スマートフォンの普及により、多くのユーザーがスマートフォンを使ってWebサイトを閲覧するようになりました。そのため、ユーザーエクスペリエンスを損なわないためには、スマートフォンの小さな画面でもストレスなく閲覧できるように、Webサイトのデザインや機能をスマートフォンに合わせる必要があります。
モバイルフレンドリーにWebサイトが対応しているかどうかは、Google Search ConsoleのモバイルユーザビリティレポートやPageSpeed Insightsを活用して確認しましょう。
セーフブラウジング
セーフブラウジングとは、ウェブブラウジングの安全性を確保するサービスのことです。
悪意のあるソフトウェア・コードによって感染したWebサイトや、不正なWebサイトなどにアクセスした際に、ブラウザ上で警告を表示させます。
HTTPS
HTTPSとは、「Hypertext Transfer Protocol Secure」の頭文字をとったもので、Webサイトと閲覧するユーザーとの間でやり取りされるデータを暗号化し、安全性と機密性を保つ接続プロトコルです。
WebページのURLが「http」で始まっている場合は、データの閲覧や改ざんのリスクがありますので、対応が求められます。
インタースティシャルの有無
ユーザーがWebサイトにアクセスしたり、Webページを遷移したりする際に、自動で表示される広告がインタースティシャルです。
画面全体を覆うようなインタースティシャルは、画面が見にくいだけではなく操作もしにくいため、ユーザーがストレスを感じてユーザーエクスペリエンスが低下してしまいます。そのため、Googleでは過剰なインタースティシャルがない状態を評価します。
コアウェブバイタル（Core Web Vitals）に関するよくある質問
コアウェブバイタルとは何ですか？
ユーザーエクスペリエンス（UX）の質を計測するための評価指標です。
コアウェブバイタルはSEOにどのくらい影響がありますか？
コアウェブバイタルが低いことによって評価が下がるのではなく、内容や質が同じ程度のWebページが複数ある場合には、コアウェブバイタルが高いほうが上位表示を獲得できる仕組みです。
コアウェブバイタルのスコアはどうやって調べられますか？
「Googleサーチコンソール」や「PageSpeed Insights」などのツールを使って確認できます。
コアウェブバイタルはSEOにどれくらい影響しますか？
コアウェブバイタルはGoogleのランキング要因の一つとされており、似たようなコンテンツ同士の順位決定時に差が出る可能性があります。とはいえ、コンテンツの質や関連性の方が優先されるため、SEO全体における影響は限定的です。
モバイルとPCでスコアが違うのはなぜですか？
モバイルとPCでは通信環境や処理能力、画面サイズなどが異なるため、同じWebページでも表示や操作の快適さに差が出ます。その結果、コアウェブバイタルのスコアにも違いが生じます。特にモバイルでは通信速度やデバイス性能の影響を受けやすいです。
まとめ
コアウェブバイタルのLCP・INP・CLSの3つの指標は、検索結果の表示順位に大きな影響を与えるだけではなく、Webサイト全体の評価の向上にもつながります。
指標の数値はツールを使って確認できますので、スコアが低下している場合はぜひ本記事で紹介した改善策に取り組んでみてください。
ただし、Googleが明言しているとおり、ユーザーエクスペリエンスを向上させることはもちろん良質なコンテンツを作ることが優先です。数値ばかりに注目するのではなく、ユーザーに有益な情報を提供できるコンテンツを作るように心がけましょう。
