コアウェブバイタルのやり方完全ガイド！測定から改善まで徹底解説
コアウェブバイタルとは？SEOに影響する3つの指標を解説
コアウェブバイタル（Core Web Vitals）は、Googleが2021年から検索ランキングの要因として導入した、Webサイトのユーザー体験を数値化する指標です。
あなたのサイトがどれだけ優れたコンテンツを提供していても、ページの表示が遅かったり、操作中にレイアウトがズレたりすると、ユーザーは離脱してしまいます。
コアウェブバイタルを改善することで、ユーザーにとって快適なサイトを実現でき、結果としてSEO評価の向上にもつながるのです。
コアウェブバイタルの基本概念
コアウェブバイタルは、Webサイトのユーザー体験を測定するための3つの重要指標で構成されています。
Googleが「Web Vitals（ウェブバイタル）」という概念の中で、特に重要なものを「Core（コア）」として定義したのがコアウェブバイタルです。
この3つの指標を改善することで、ユーザーがストレスなくサイトを利用できるようになり、直帰率の低下やコンバージョン率の向上が期待できます。
3つの指標と基準値
コアウェブバイタルは、LCP・INP・CLSという3つの指標で構成されています。
それぞれの指標には「良好」「要改善」「不良」という3段階の評価基準があり、まずは「良好」な状態を目指すことが重要です。
LCP（Largest Contentful Paint）！ページの読み込み速度
LCPは、ページ内で最も大きなコンテンツ（メイン画像やテキストブロックなど)が表示されるまでの時間を測定する指標です。
ユーザーがページを開いてから、「このページには何が書いてあるのか」を認識できるまでの時間と考えると分かりやすいでしょう。
評価基準は以下の通りです。
良好：2.5秒未満
要改善：2.5秒〜4.0秒
不良:4.0秒超
LCPが遅いと、ユーザーは「このサイトは重い」と感じて離脱してしまう可能性が高まります。
特にモバイル環境では通信速度が不安定な場合も多いため、2.5秒以内を目標にしましょう。
INP（Interaction to Next Paint）！操作への応答速度
INPは、ユーザーがボタンをクリックしたり、フォームに入力したりした際に、ブラウザが視覚的に反応するまでの時間を測定する指標です。
2024年3月12日まではFID（First Input Delay）という指標が使われていましたが、より包括的にユーザー体験を測定するためINPに変更されました。
評価基準は以下の通りです。
良好：200ミリ秒未満
要改善:200〜500ミリ秒
不良:500ミリ秒超
INPが悪いと、ユーザーは「ボタンを押したのに反応がない」と感じてストレスを抱えてしまいます。
特にフォーム入力やカート操作など、コンバージョンに直結する場面で重要な指標です。
CLS（Cumulative Layout Shift）！レイアウトの安定性
CLSは、ページ読み込み中に発生するレイアウトのズレを数値化した指標です。
例えば、記事を読んでいる最中に広告が表示されて文章が下にずれたり、画像の読み込みでボタンの位置が変わったりする現象を測定しています。
評価基準は以下の通りです。
良好：0.1未満
要改善：0.1〜0.25
不良：0.25超
CLSのスコアは0に近いほど良好で、レイアウトが安定していることを示します。
意図しないクリックを防ぎ、ユーザーにストレスを与えないためにも、0.1未満を目指しましょう。
コアウェブバイタルの測定方法！使えるツール4選
コアウェブバイタルを改善するには、まず現状を正確に把握することが重要です。
Googleが提供する無料ツールを使えば、誰でも簡単にコアウェブバイタルのスコアを測定できますよ。
ここでは、代表的な4つのツールとその使い方を詳しく解説していきます。
PageSpeed Insightsでの確認方法
PageSpeed Insightsは、Googleが提供する最もポピュラーなWebページ速度測定ツールです。
URLを入力するだけで、モバイルとPCそれぞれのコアウェブバイタルスコアを確認でき、さらに改善のための具体的なアドバイスも得られます。
使い方は以下の手順です。
PageSpeed Insightsにアクセスします。
測定したいページのURLを入力欄に貼り付けます。
「分析」ボタンをクリックします。
30秒〜1分ほど待つと、分析結果が表示されます。
結果画面では、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の2つのセクションがあります。
「実際のユーザーの環境で評価する」は、過去28日間に実際にそのページを訪問したユーザーのデータを基にした評価です。
リアルなユーザー体験を反映していますが、アクセス数が少ないページでは表示されないこともあります。
「パフォーマンスの問題を診断する」は、特定の環境下でシミュレーションした結果で、0〜100点のスコアで表示されます。
具体的な改善項目も提案されるため、どこから手をつければよいか分かりやすいのが特徴です。
Google Search Consoleでの確認方法
Google Search Console（サーチコンソール）では、サイト全体のコアウェブバイタルの状態を一覧で確認できます。
個別ページの測定というより、サイト全体でどのページに問題があるかを把握するのに適しています。
使い方は以下の手順です。
Google Search Consoleにログインします。
左側のメニューから「ウェブに関する主な指標」をクリックします。
モバイルとPCそれぞれのグラフが表示されます。
「レポートを開く」をクリックすると、詳細が確認できます。
このレポートでは、「良好」「改善が必要」「不良」の3段階でページが分類され、どのURL群に問題があるかが一目で分かります。
特定の問題（例：「LCP の問題: 2.5秒超」）をクリックすると、該当するURLのリストが表示されるため、優先的に改善すべきページを特定できますよ。
サイト全体の改善状況を継続的に監視するには、Search Consoleが最適です。
Lighthouseでの確認方法
LighthouseはGoogle Chromeに標準搭載されている開発者ツールで、PageSpeed Insightsのベースとなっている機能です。
Chrome拡張機能としても提供されており、ブラウザ上で手軽にパフォーマンスチェックができます。
使い方は以下の手順です。
Google Chromeで測定したいページを開きます。
Chromeウェブストアから「Lighthouse」拡張機能をインストールします。
ブラウザ右上の拡張機能アイコンからLighthouseを選択します。
ポップアップ画面で「Generate Report」をクリックします。
数十秒待つと、詳細なレポートが表示されます。
Lighthouseでは、パフォーマンススコアに加えて、アクセシビリティ、ベストプラクティス、SEOなどの観点からもサイトを評価してくれます。
開発者向けの詳細情報も豊富なため、技術的な改善を進めたい場合に特に役立ちますよ。
Web Vitals拡張機能での確認方法
Web VitalsはGoogle Chromeの拡張機能で、ページを閲覧しながらリアルタイムでコアウェブバイタルの数値を確認できます。
他のツールと違い、実際にページを操作しながら測定できるため、ユーザー視点での体感と数値を照らし合わせやすいのが特徴です。
使い方は以下の手順です。
Chromeウェブストアから「Web Vitals」拡張機能をインストールします。
測定したいページをGoogle Chromeで開きます。
ブラウザ右上の拡張機能アイコンからWeb Vitalsを選択します。
ポップアップ画面にLCP、INP、CLSなどの数値がリアルタイムで表示されます。
各指標は色分けされており、緑色なら良好、オレンジなら要改善、赤なら不良という状態がひと目で分かります。
特にページをスクロールしたり、ボタンをクリックしたりしながら、INPやCLSの変化を確認したい場合に便利ですよ。
LCPの改善方法！ページ表示速度を高速化する
LCPが遅いと、ユーザーは「このページは重い」と感じて離脱してしまいます。
特にメイン画像や大きなテキストブロックの表示が遅れると、LCPスコアが悪化する原因になります。
ここでは、LCPを改善するための具体的な方法を解説していきます。
画像を最適化する
LCP改善で最も効果的なのが、画像の最適化です。
多くのWebページでは、メインビジュアルとして大きな画像が使われており、これがLCPの主要な要素になっています。
画像の最適化には以下の方法があります。
次世代画像フォーマット（WebP、AVIF）への変換が効果的です。
WebPはJPEGと比較して25〜35%ファイルサイズを削減でき、Googleも推奨している形式です。
画像圧縮ツール（TinyPNG、Squoosh）を使って、画質を保ちながらファイルサイズを小さくしましょう。
WordPressを使用している場合は、EWWW Image Optimizerなどのプラグインで自動的に画像を最適化できます。
画像サイズを適切に設定することも重要です。
例えば、表示領域が800pxなのに2000pxの画像を読み込んでいる場合、無駄なデータ通信が発生します。
レスポンシブ対応を意識して、デバイスに応じた適切なサイズの画像を配信しましょう。
サーバーの応答速度を改善する
LCPはサーバーからのレスポンス速度にも大きく影響されます。
どれだけ画像を最適化しても、サーバーの応答が遅ければLCPは改善されません。
サーバー応答速度を改善する方法は以下の通りです。
高速なレンタルサーバーに移転することを検討しましょう。
共有サーバーよりもVPSや専用サーバーの方が、安定した速度が期待できます。
CDN（Content Delivery Network）を導入すると、世界中のサーバーから最も近い場所からコンテンツを配信できるため、表示速度が大幅に向上します。
キャッシュ機能を有効にすることも効果的です。
WordPressの場合、WP Super CacheやW3 Total Cacheなどのプラグインで簡単に設定できますよ。
データベースの最適化も定期的に実施しましょう。
不要なリビジョンやスパムコメントを削除することで、サーバーの負荷が軽減されます。
不要なJavaScript・CSSを削減する
JavaScriptやCSSの読み込みが多いと、ブラウザのレンダリング（画面描画）がブロックされ、LCPが遅くなります。
特に、ページの最初に読み込まれるJavaScriptは、メインコンテンツの表示を遅らせる大きな要因です。
改善方法は以下の通りです。
使用していないJavaScriptやCSSを削除しましょう。
プラグインや外部スクリプトを追加した後、実際に使っていないものが残っていないか定期的にチェックすることが大切です。
JavaScriptの遅延読み込み（defer、async属性）を活用します。
ページ表示に必要ないスクリプトは、後から読み込むように設定することでLCPを改善できます。
CSSの重要な部分（クリティカルCSS）だけを先に読み込み、残りは後から読み込む手法も効果的です。
ファイルの圧縮（ミニファイ）も忘れずに行いましょう。
コメントや改行、空白を削除することで、ファイルサイズが小さくなり、読み込み速度が向上しますよ。
INPの改善方法！ユーザー操作への応答性を向上
INPが悪いと、ユーザーがボタンをクリックしても反応が遅く、「このサイトは動きが鈍い」と感じてしまいます。
特にフォーム送信や商品カートなど、コンバージョンに直結する操作で反応が遅いと、機会損失につながります。
ここでは、INPを改善するための具体的な方法を解説します。
JavaScriptの実行時間を短縮する
INPが悪化する最大の原因は、重いJavaScriptの処理です。
ユーザーがクリックした際に、JavaScriptが長時間実行されているとブラウザが応答できず、INPスコアが悪化します。
JavaScriptの実行時間を短縮する方法は以下の通りです。
不要なJavaScriptライブラリを削除しましょう。
jQueryなど、現在は使っていないライブラリが読み込まれたままになっていないか確認してください。
長いタスクは分割して実行します。
一度に大量の処理を行うのではなく、小さな処理に分けることでブラウザが応答しやすくなります。
Web Workerを活用すると、JavaScriptをバックグラウンドで実行できるため、メインスレッドをブロックせずに処理できます。
サードパーティのスクリプト（広告、アクセス解析など）の読み込みを最適化することも重要です。
非同期読み込みや遅延読み込みを設定して、ユーザー操作を妨げないようにしましょう。
画像の遅延読み込みを実装する
画面外にある画像を最初から全て読み込むと、ブラウザのリソースを圧迫してINPが悪化します。
遅延読み込み（Lazy Loading）を実装することで、画面に表示される画像だけを優先的に読み込み、ユーザー操作への応答性を向上できます。
実装方法は以下の通りです。
HTMLの``タグに`loading=”lazy”`属性を追加するだけで、ブラウザが自動的に遅延読み込みを行います。
WordPressをお使いの場合は、バージョン5.5以降で自動的にこの属性が追加されるようになっています。
JavaScriptライブラリ(Intersection Observer API)を使えば、より細かく制御することも可能です。
ただし、ファーストビュー（最初に表示される範囲）の画像には遅延読み込みを適用しないように注意しましょう。
メイン画像を遅延読み込みにしてしまうと、逆にLCPが悪化する可能性がありますよ。
CLSの改善方法！レイアウトのズレを防ぐ
CLSが悪いと、ユーザーがリンクをクリックしようとした瞬間にレイアウトがズレて、誤クリックを引き起こします。
こうした予期しないレイアウト変化は、ユーザーに大きなストレスを与えます。
ここでは、CLSを改善するための具体的な方法を解説していきます。
画像サイズを事前に指定する
CLS改善で最も基本的かつ重要なのが、画像のwidth(幅)とheight(高さ)を明示的に指定することです。
サイズを指定していないと、画像が読み込まれるまでブラウザはその領域を確保できず、読み込み後にレイアウトがズレてしまいます。
HTMLコードで画像を挿入する際は、以下のように記述しましょう。
`
`
widthとheight属性を指定することで、ブラウザは画像読み込み前からその領域を確保し、レイアウトのズレを防げます。
レスポンシブデザインの場合でも、CSSでmax-width: 100%を指定すれば、アスペクト比を保ったまま表示されます。
WordPressでは画像挿入時に自動的にサイズ属性が追加されますが、手動でHTMLを編集した場合は忘れずに指定してください。
動的に生成される画像についても、aspect-ratioプロパティを使って事前に領域を確保することができますよ。
広告表示領域を確保する
広告バナーの遅延表示は、CLSを悪化させる最大の要因の一つです。
ページを読んでいる最中に広告が突然表示されて、コンテンツが下にズレた経験は誰にでもあるでしょう。
広告によるレイアウトズレを防ぐ方法は以下の通りです。
広告を配置する場所に、事前に固定サイズの領域を確保しましょう。
CSSでmin-heightを設定することで、広告読み込み前からスペースを予約できます。
Google AdSenseなどの広告を使用している場合は、広告ユニットの推奨サイズに合わせて領域を確保してください。
ページ上部への広告配置は特に注意が必要です。
ファーストビュー内に広告を設置すると、読み込み時にレイアウトが大きくズレやすくなります。
可能であれば、コンテンツの途中や下部に配置することをおすすめします。
複数サイズの広告を配信している場合は、最大サイズに合わせて領域を確保すると安全ですよ。
Webフォントの読み込みを最適化する
Webフォント（カスタムフォント）の読み込み中にテキストが表示されると、フォント適用後にレイアウトが変化してCLSが悪化します。
この現象をFOIT（Flash of Invisible Text）やFOUT（Flash of Unstyled Text）と呼びます。
Webフォントによるレイアウトズレを防ぐ方法は以下の通りです。
font-display: swap;プロパティを使用して、システムフォントで先に表示してからWebフォントに切り替えるようにしましょう。
これにより、テキストが即座に表示され、ユーザー体験が向上します。
フォントファイルの事前読み込み（preload）を設定することも効果的です。
``を使うことで、優先的にフォントを読み込めます。
使用するフォントの文字セットを限定することもおすすめです。
日本語フォントは特にファイルサイズが大きいため、使用する文字だけをサブセット化することで読み込み時間を短縮できますよ。
Google Fontsを使用している場合は、font-display=swapパラメータを追加することで簡単に最適化できます。
コアウェブバイタルがSEOに与える影響とは
コアウェブバイタルはGoogleの検索ランキング要因の一つですが、その影響度について正しく理解することが重要です。
過度に改善に固執する必要はありませんが、場合によっては優先的に取り組むべきケースもあります。
ここでは、コアウェブバイタルとSEOの関係について詳しく解説していきます。
Googleの公式見解
Google公式の発表によれば、コアウェブバイタルは検索ランキング要因ではあるものの、コンテンツの質の方がはるかに重要だとされています。
Googleの「ページエクスペリエンスの Google 検索結果への影響について」では、以下のように述べられています。
「優れたページエクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません」
つまり、コアウェブバイタルのスコアが完璧でも、コンテンツの質が低ければ上位表示されないということです。
逆に、コアウェブバイタルのスコアがやや低くても、検索ユーザーにとって価値のある情報を提供していれば、上位表示される可能性は十分にあります。
ただし、Googleは「同様のコンテンツを含むページが複数ある場合は、ページエクスペリエンスが検索ランキングで非常に重要になります」とも述べています。
つまり、競合サイトと内容が同程度の場合は、コアウェブバイタルの良し悪しが順位の差になる可能性があるのです。
Googleのジョン・ミューラー氏も、「SEOのためだけに過度にスコア向上を目指す必要はない」と発言しています。
コアウェブバイタルは重要ですが、小数点以下の数値にこだわるよりも、コンテンツの質を高めることに時間を使うべきだと考えましょう。
改善を優先すべきケース
コアウェブバイタルの改善を優先的に行うべきケースもあります。
以下に該当する場合は、積極的に改善に取り組みましょう。
サイト内の多くのページで「不良」判定が出ている場合は、早急な対応が必要です。
Google Search Consoleで「不良URL」が半数以上を占めている状態は、ユーザー体験の観点からも改善すべきです。
実際にスマートフォンやPCでサイトにアクセスした際に、体感で「遅い」「重い」と感じる場合も優先的に改善しましょう。
ツールのスコアが良好でも、実際のユーザー体験が悪ければ意味がありません。
競合性の高いキーワードで上位表示を目指す場合も、コアウェブバイタルが差別化要因になります。
同じような質のコンテンツを提供する競合サイトが多い場合、ユーザー体験の差が順位に影響する可能性があります。
ECサイトやフォームを含むページでは、INPの改善が特に重要です。
ユーザーの操作に対する応答が遅いと、コンバージョン率に直接影響するためです。
これらのケースに該当する場合は、コンテンツ改善と並行して、コアウェブバイタルの最適化にも取り組んでいきましょう。
まとめ！コアウェブバイタルのやり方を実践しよう
コアウェブバイタルは、ユーザー体験を数値化した重要な指標です。
LCP（ページ読み込み速度）、INP（操作への応答性）、CLS（レイアウトの安定性）という3つの指標を改善することで、ユーザーにとって快適なサイトを実現できます。
測定には、PageSpeed Insights、Google Search Console、Lighthouse、Web Vitals拡張機能といった無料ツールを活用しましょう。
改善方法は、画像の最適化、サーバー応答速度の向上、JavaScript・CSSの削減、画像サイズの事前指定、広告領域の確保など、具体的な施策がたくさんあります。
ただし、SEOの観点では、コアウェブバイタルよりもコンテンツの質の方が重要だということを忘れないでください。
完璧なスコアを目指すのではなく、ユーザーが快適に利用できるレベルを目標に、段階的に改善を進めていくことが大切ですよ。
まずはPageSpeed Insightsで現状を測定して、優先度の高い改善項目から取り組んでいきましょう！
