Webサイトの表示速度やユーザー体験は、今やSEO対策において無視できない重要な要素となっています。

本記事では、Core Web Vitalsとは何か、その構成要素である3つの指標、SEOへの影響、詳しい計測方法まで、初心者の方にもわかりやすく詳しく解説していきます。

Core Web Vitalsとは？

Core Web Vitals（コアウェブバイタル）とは、Webサイトのユーザー体験（UX）を数値化するためにGoogleが設定した3つの重要指標のことです。

Webサイトのユーザーエクスペリエンス（UX）を客観的かつ統一的に測定できる基準になります。

Core Web Vitals（コアウェブバイタル）は下記の主要な3つの指標で構成されています。

• LCP（Largest Contentful Paint）
• INP（Interaction to Next Paint）
• CLS（Cumulative Layout Shift）

それぞれの指標について詳しく解説していきます。

Core Web Vitalsの3つの指標を詳しく解説

Core Web Vitalsは、以下の3つの指標で構成されています。

それぞれの指標について、詳しく見ていきましょう。

LCP（Largest Contentful Paint）の指標について

LCPはLargest Contentful Paintの略で、表示されている画面内のウェブページ上で最も大きなコンテンツ要素（画像、動画、テキストブロックなど）がブラウザに表示されるまでの時間を測定するパフォーマンス指標です。

最も大きなコンテンツ要素とは、表示されている画面内で表示面積の一番大きいコンテンツのことを指します。

例えば、初めに表示される画面の範囲に下記の画像のような要素があった場合、全体の50％を占めるメイン画像が最も大きなコンテンツと判断され、このメイン画像が表示されるまでの時間が評価されます。

LCPが重要とされている点は、視認性にあります。

初めに表示される部分で大きな面積を占めるコンテンツを早く表示させることで、ユーザーの離脱も減りサイトを見たいと感じます。

ここの表示が遅いと、使いにくいサイトと判断され離脱される確率も高くなるため、LCPの指標は重要視されています。

更に詳しくは「LCPとは？重要性から計測の仕組みまでわかりやすく解説」や「最大コンテンツの描写」でも詳しく解説しています。

LCPの評価基準

LCPの評価は、最も大きなコンテンツ要素が表示されるまでの秒数で評価されます。

もちろん、早く表示された方が評価は上がるということになります。

下記のように3段階の評価が与えられています。

INP（Interaction to Next Paint）の指標について

INP（Interaction to Next Paint）とは、ユーザーがWebページ上でユーザーの操作（クリック・タップ・キー押下）を行ってから、その操作に反応する画面の「次の描画」が行われるまでの応答時間を測定する指標です。

INPの指標は特にページの応答性に関わる指標で、ユーザーが操作を行った際に動作が早いかどうかを判断する指標です。

これらの動作が遅いと、ユーザーエクスペリエンスも悪くなり、ユーザーからしても使いにくいサイトと感じられてしまいます。

INPはこのように計測されます

INPの計測は下記のようなフェーズに分かれて計測が行われ、それぞれの要素で改善要素が変わってきます。

1. 入力遅延（Input Delay）
2. 処理時間（Processing Time）
3. 表示遅延（Presentation Delay）

INPの計測は、インタラクションが起きたタイミングで計測が開始され、そのインタラクションによる次のフレームが画面に出た時点で計測が終了となります。

INPの評価基準

INPは応答時間で評価を行います。短い時間の方が応答性もよく、評価が高くなります。

200ミリ秒以下は良好で200ミリ秒〜500ミリ秒は改善が必要で500ミリ秒以上は不良といった評価となります。

INPについて更に詳しく知りたい方は「INPとは？仕組みから計測方法まで徹底解説」の記事をご覧ください。

CLS（Cumulative Layout Shift）の指標について

CLS（Cumulative Layout Shift）は「累積レイアウトシフト」という意味で、Webページの視覚的な安定性を測る指標です。

ページが読み込まれるときに画像・広告・フォントなどが遅れて読み込まれ、ボタンやテキストがズレることがありますが、これがレイアウトシフトです。

利用者の立場からしても、ページが読み込まれる過程でコンテンツの配置がずれたりすると使いにくいと感じます。

CLSが起きた場合のイメージ例

上記の例は画像が後から読み込まれたことで、テキストやボタンの位置が画像の高さ分ズレてしまったというイメージ例です。

このズレが大きければ大きいと、誤クリックなどが生まれるなど、操作性も低下しストレスも感じやすくなりユーザー体験も損ないます。

CLSの計算方法

CLSは以下の式で計算されます。

CLS = Impact Fraction（影響面積の比率） × Distance Fraction（移動距離の比率）

簡単に言うと、画面の面積の中でずれた分の面積が大きければ大きいほど数値が悪くなり評価が下がるということになります。

ずれる面積を減らし、ずれる距離を減らすことができれば評価が上がる仕組みとなります。

CLSの評価基準

CLSはページの視覚的安定性を数値で表す指標でスコアで表現できます。

数値が小さいほどレイアウトの安定性が高くなります。

更にCLSの詳しい仕組みや計算方法が知りたいと言う方は「CLSとは？仕組みから計測方法まで徹底解説」の記事をご覧ください。

Core Web Vitalsが重要な理由

Core Web Vitalsが重要な理由は、ユーザーエクスペリエンスとビジネス成果に直結するためです。

2021年からGoogleの検索ランキング要因として導入され、SEO効果にも大きく影響を与えます。

検索ランキングの順位にも影響を与え、アクセス数の増減にもつながります。

また、利用しやすさやユーザー体験にも影響する指標でもあるため、最終的に離脱率やCVRなどにも影響があります。

もちろん、売上にも直結してくるものになるため、改善指標として重要なものとなります。

Core Web VitalsがSEOに与える影響

Core Web VitalsがSEOに与える影響について、正確に理解することは重要です。

Googleは、Core Web VitalsとSEOの関係について以下のように説明しています。

Google John Mueller氏の発言

Googleのジョン・ミューラー氏も、Core Web Vitalsについて以下のように述べています。

「SEOのためだけに過度にスコア向上を目指す必要はない。完璧なスコアを目指すのは技術的なチャレンジとしては面白いが、順位に大きな影響を与えるわけではない」

つまり、Core Web Vitalsは重要だが、過度に神経質になる必要はないというのが現実的な捉え方です。

googleからの説明分も引用します。

“ページエクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページエクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。

優れたページエクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。

しかし、同様のコンテンツを含むページが複数ある場合は、ページエクスペリエンスが検索ランキングで非常に重要になります。”

SEOの要素の一部としては、重要なもののCore Web VitalsだけがSEOの全てを左右するわけではない。ということです。

優れたコンテンツが前提のもの、更にユーザーエクスペリエンスを良くすることでプラスαの評価を得れる。と言うように捉えておくと良いでしょう。

SEOに関わらず、ユーザービリティの良いサイトは利用者にとっても良いことです。

ユーザーのためにいいサイトを作ろう！ということを心がけて運用していくことが成功につながりやすいでしょう。

Core Web Vitalsの本質を理解しよう

ここまで、Core Web Vitalsの指標について説明してきました。

改善の目安となる指標としては上記の数値が指標となりますが、あまり指標や数字ばかりにとらわれて本質の部分を見落とさないようにすることも重要です。

一番はユーザー体験をよくすることを念頭において指標は目安として捉えておくと良いかと思います。

Core Web Vitalsをもう少し噛み砕いて話をすると下記にも言い換えられることができます。

ページの読み込み速度

大事なポイントの一つとしてページの読み込み速度があります。

ページの読み込み速度が遅いと、コンテンツが表示されるまでに時間がかかります。

ユーザー側の立場としても、表示が遅いサイトは利用しにくいと感じたり、しっかり運用しているのかな？など不信感も募ります。

ページの読み込みを早くする事で、ユーザー体験もよくなる！という考え方を持つようにしましょう。

視覚部分の安定性

視覚部分についてもユーザー体験に大きく影響します。

実際に、読んでいた文章がずれてどこかに移動してしまったり、クリックしようと思ったボタンがずれて違う部分をクリックしてしまうなどの体験はありませんか？

ユーザーとしても、使いにくいサイトだったりストレスを感じるような部分になりますよね。

このようなストレスが起きないサイト作りを意識してサイトを構築できればユーザー体験第一に考えてみましょう。

ページの応答性

ページの応答性もユーザー体験にとっては重要な要素です。

ユーザーがクリック、タップ、キー入力などの操作を行った際に応答性が悪いと、ユーザーは「サイトが重い」「反応しない」と感じ、操作を諦めて離脱する原因となります。

操作もすぐ動きやすい環境が作れているか？色々なものを読み込みすぎて重すぎるサイトではないか？

このようなことを意識していくといいでしょう。

Core Web Vitalsの計測方法

Core Web Vitalsの改善に取り組む前に、現在の状況を正確に把握することが重要です。

ここでは主要な測定ツールとその使い方を詳しく解説します。

PageSpeed Insights

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測ができます。

手順としては下記の手順で分析ができます。

1. PageSpeed Insightsにアクセス
2. 調査したいホームページのURLを入力
3. 「分析」ボタンをクリック
4. 数分後に結果が表示される

上記の箇所にURLを入力し、分析ボタンを押します。

計測結果が出た後、下の方にスクロールするとパフォーマンスの枠が出てきます。

ここでCore Web Vitalsの3つの指標でもあるLCP、INP、CLSの数値の結果が見れます。

パフォーマンスの問題を診断するの更に下部にスクロールすると、下記のような画面になります。

ここで画像に記載のあるFCP、LCP、CLSなどをクリックすると、更に詳しい詳細が見れるようになります。

ここで具体的な改善が必要なポイントなどが確認できます。

PageSpeed Insightsの特徴

特徴としてあげられるのが、モバイル・PCそれぞれの数値を確認できる点や、具体的に改善が必要なポイントが出てくるということです。

どの項目の改善が必要なのかが個別に出てくるため、改善点が洗い出しやすいのがポイントです。

一つ注意点として、PageSpeed Insightsで表示される数値はテスト環境におけるシミュレーションの結果です。

そのため、実際のユーザーが体験する表示速度とは異なる場合があります。

より正確な数値を知りたい場合は、複数回測定して平均値を取ることをお勧めします。

Google Search Console（サーチコンソール）

Search Consoleにある「ウェブに関する主な指標」レポートでもサイト全体のCLSの状況を把握できます。

下記の手順に沿って確認ができます。

1. ウェブに関する主な指標の箇所をクリック
2. PC、モバイルのどちらかを選択
3. 不良、改善が必要、良好の箇所にそれぞれチェックを入れておく
4. 不良や改善が必要な場合は、CLSに関する問題が表示される

ウェブに関する主な指標＞レポート（モバイルorPC）の順にクリックすると下記の画面になります。

不良や改善が必要な箇所がある場合は、下部に問題の内容が表示されます。

CLSに関する問題の箇所をクリックすると、問題になっているURLが表示されます。

問題箇所を修正後に下記の修正を検証のボタンを押すと、サーチコンソール側で28日間の監視が始まり問題がなければ問題の表示が解消されます。

Search Console（サーチコンソール）の特徴

検索エンジンから見た評価がわかります。特に検索からの評価に影響するポイントを洗い出してくれます。

具体的に対象になるURLなどもわかるため、どこで問題が発生しているかがわかりやすいのも特徴です。

また、改善が終わったらサーチコンソール上から検証の依頼もできるため、検索エンジン評価にも特化していると言えます。

ただ、PageSpeed Insightsほど細かい詳細は出ないので、問題の発生しているURLが洗い出せたらPageSpeed Insightsと併用して改善を進めていくのがいいでしょう。

Chrome DevTools（Lighthouse）

Chrome DevToolsでは、下記の手順で分析ができます。

詳しく分析したい場合は、レコーディングを使った分析も可能です。

1. 対象ページで右クリックし「検証」でDevToolsを開く
2. 「パフォーマンス」タブを選択（計測結果が表示）
3. 記録ボタン（○）をクリック
4. ページをリロードまたは操作を実行
5. 停止ボタンを押して計測終了

ここまで操作すると上記のような計測結果が表示されます。

ここから更に詳しい詳細を見ることができます。

LCPの詳細の確認方法

LCPの詳細を確認したい場合は、LCPの内訳という部分をクリックすると下記の画像のように表示されます。

更に上の赤枠部分は、読み込みの時系列を表しているので確認したい時系列を選択できます。

下部ではレンダリング遅延の要素が細かく表示されるので、ここで表示までに時間のかかっている要素などが確認できます。

INPの詳細の確認方法

INPの詳細を確認したい場合は、INPの内訳という部分をクリックすると下記の画像のように表示されます。

こちらも同様に上の赤枠部分にある時系列でINPが計測されている部分を探します。

下部の「操作」という枠でINPのかかった時間が確認できます。

並行してメインタスクやアニメーション項目なども確認することで、何が表示までの要因になっているかが確認できます。

CLSの詳細の確認方法

CLSの詳細を確認したい場合は、レイアウトシフトの原因という部分をクリックすると下記の画像のように表示されます。

こちらも同様に上の赤枠部分にある時系列でレイアウトシフトが起きているされている部分を探します。

下部の「レイアウトシフト」という枠で影響の大きいレイアウトシフトを確認できます。

ここの棒線部分をクリックすると下部にレイアウトシフトの要素が表示されるので、ここで確認を取りましょう。

Chrome DevTools（Lighthouse）の特徴

開発者向けにおすすめで、読み込まれているタイミングや時間から、細かい要素までが詳しく分析できます。

開発者ではここの原因から改善までを細かくチェックすることができます。

開発時などの調整におすすめです。

Core Web Vitalsの改善方法

ここではCore Web Vitalsの指標でもあるLCP、INP、CLSのそれぞれの改善方法について解説していきます。

LCP（Largest Contentful Paint）の改善方法

LCPの改善のポイントとしては、最も大きなコンテンツが何かを把握することと、対象のコンテンツの表示速度を速くすることに尽きます。

改善方法を詳しく解説します。

LCPが悪化する主な原因

LCPが悪化するポイントをまとめておくと下記になります。

1. レンダリングのブロック
2. サーバーの応答時間が遅い
3. 画像や動画のファイルサイズが大きい
4. ファイルの読み込み時間

主にはこのような要素が悪化させる原因となります。

LCPの具体的な改善方法

1. CSSとJavaScriptの遅延読み込みとインライン化
2. サーバースペックの向上
3. キャッシュの活用（ブラウザ・サーバー・DNSキャッシュ等）
4. CDNの活用
5. 画像の圧縮・サイズ変更
6. LCP以外の遅延読み込み
7. HTML・CSS・JavaScriptを圧縮させる
8. 不要なコンテンツの削除
9. フォントの最適化

LCPの改善でインパクトが大きいのが、遅延読み込みとインライン化の部分とサーバーの応答速度、画像やファイルの圧縮部分が大きいです。

主に3つのアプローチで実現できます。

遅延読み込みとインライン化では、クリティカルCSS のインライン化、フォントの事前読み込みの設定で改善を行います。

サーバー応答時間の最適化では、CDNの活用、データベースクエリ高速化、サーバースペック向上が効果的です。

リソース読み込みする際には、画像の圧縮・次世代フォーマット（WebP、AVIF）採用、重要でないCSSの遅延読み込み、JavaScriptの非同期化を実施します。

更に詳しい改善方法を知りたい方は「LCP改善方法」の記事をご覧ください。

INP（Interaction to Next Paint）の改善方法

INP改善のポイントは、ユーザーの操作後に次の描写が行われるまでの間でJavaScriptなどの重いタスクを最適化させる部分と、そのリソース読み込む速度を早くするという点がポイントとなってきます。

INPが悪化する主な原因

1. JavaScriptの処理が重い
2. 長時間実行されるタスクが存在する
3. メインスレッドがブロックされている
4. 不要なスクリプトが多数読み込まれている

INPが悪化する主な原因としては、上記のような要素があります。

INPの具体的な改善方法

INPの改善は入力遅延（Input Delay）、処理時間（Processing Time）、表示遅延（Presentation Delay）といった3つの要素を総合的に最適化することで実現できます。

改善方法を項目にまとめると下記となります。

1. setTimeoutによるタスク分割
2. requestIdleCallback()による空き時間の活用
3. scheduler.postTask()で優先度を指定する
4. JavaScriptの計算や実行を最適化させる
5. デバウンス・スロットリングの実装
6. 重要度に応じたUI更新の分離
7. DOMサイズの最適化
8. 強制同期レイアウトの回避
9. CSSの最適化
10. サーバー応答時間の最適化

入力遅延（Input Delay）の部分では、主にJavaScriptの分割読み込み、不要なライブラリやプラグインの削除、サードパーティスクリプトの遅延読み込みを実施しメインスレッドの負荷軽減が重要となります。

処理時間（Processing Time）の要素に関しては、長いタスクを50ミリ秒単位で分割し、setTimeoutやrequestIdleCallbackを活用してメインスレッドのブロックを防ぎます。

また、重い計算処理はWeb Workersに移行し、並列処理を実行しメインスレッドの負荷を軽減できます。

表示遅延（Presentation Delay）では、CSSアニメーションでGPUを活用（transform、opacity使用）、レイアウト計算の最小化、will-change属性による事前最適化を行います。

デバウンシング・スロットリング実装でイベント頻度を制御し、コード分割による初期読み込み軽減も効果的です。まとめ：Core Web Vitalsで競合に差をつけよう

Core Web Vitalsは、現代のWebサイト運営において無視できない重要な指標です。しかし、その本質はSEO対策のためだけでなく、ユーザーにとって快適で使いやすいWebサイトを提供することにあります。

Core Web Vitalsまとめ

Core Web Vitalsは、Googleが定めたユーザーエクスペリエンス評価の核心指標です。LCP（読み込み速度2.5秒以下）、INP（応答性200ms以下）、CLS（視覚安定性0.1以下）の3つで構成され、2021年からSEOランキング要因として機能しています。

これらの改善により、企業は売上8%増加（Vodafone）、コンバージョン率80-100%向上（Redbus）など、具体的なビジネス成果を実現しています。Chrome DevToolsのPerformanceパネルでリアルタイム計測・分析が可能で、技術的最適化とユーザー体験向上を両立できます。

単なる技術指標を超えて、競合優位性確保と持続的成長の基盤となるCore Web Vitalsは、現代のデジタル戦略において欠かせない重要要素といえるでしょう。