コアウェブバイタルとは何か？
Googleが2020年に発表したコアウェブバイタルは、ウェブサイトのユーザー体験を数値化するための指標群です。従来のSEOでは、コンテンツの質やバックリンクの数が重視されてきましたが、現在ではページの表示速度や操作性といった技術的な側面も検索順位に影響を与えるようになっています。
コアウェブバイタルが生まれた背景には、モバイルファーストの時代においてユーザーがストレスなくウェブサイトを閲覧できる環境を整えたいというGoogleの意図があります。スマートフォンからのアクセスが全体の半数以上を占める現在、ページが遅かったり、タップしても反応がなかったり、読み込み中にレイアウトがずれたりすると、ユーザーはすぐに離脱してしまいます。こうした体験の悪さを防ぐために、Googleは具体的な数値目標を設けて、サイト運営者が改善に取り組みやすい環境を整えました。
コアウェブバイタルは、単なる技術的な指標ではなく、ユーザーの満足度を高めるための羅針盤です。数値を改善することで、検索順位の向上だけでなく、コンバージョン率の改善や直帰率の低下といったビジネス面でのメリットも期待できます。
コアウェブバイタルの3つの指標を理解する
コアウェブバイタルは、LCP、INP、CLSという3つの指標で構成されています。それぞれが異なる側面からユーザー体験を測定しており、すべての指標をバランスよく改善することが重要です。
LCPはLargest Contentful Paintの略で、ページ内で最も大きなコンテンツ要素が表示されるまでの時間を測定します。具体的には、メインビジュアルの画像や見出しテキストなどが対象となります。ユーザーがページを開いてから「読み込みが完了した」と感じるまでの体感速度を反映しており、2.5秒以内に表示されることが良好とされています。
INPはInteraction to Next Paintの略で、2024年3月にFIDに代わって正式に導入されました。ユーザーがボタンをクリックしたり、リンクをタップしたりした際に、画面が反応するまでの時間を計測します。200ミリ秒以内であれば良好、500ミリ秒を超えると改善が必要とされています。
CLSはCumulative Layout Shiftの略で、ページ読み込み中に起こる予期しないレイアウトのずれを数値化したものです。広告が突然表示されてテキストがずれたり、画像の読み込みで全体のレイアウトが変わったりする現象を防ぐための指標です。0.1以下であれば良好とされ、ユーザーが意図せずに間違った箇所をクリックしてしまう事故を防ぎます。
| 指標 | 正式名称 | 測定対象 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|---|---|
| LCP | Largest Contentful Paint | 読み込み速度 | 2.5秒以下 | 2.5〜4.0秒 | 4.0秒超 |
| INP | Interaction to Next Paint | 操作への応答性 | 200ms以下 | 200〜500ms | 500ms超 |
| CLS | Cumulative Layout Shift | 視覚的安定性 | 0.1以下 | 0.1〜0.25 | 0.25超 |
LCPを改善するための具体的なアプローチ
LCPの改善は、ユーザーが最初に感じるページの印象を左右する重要な取り組みです。表示速度が遅いと感じられたページは、内容がどれほど充実していても離脱されてしまう可能性が高まります。LCPを2.5秒以内に抑えるためには、複数の観点から最適化を進める必要があります。
まず着手すべきは、サーバーの応答時間の短縮です。ユーザーがURLにアクセスしてからサーバーが最初のバイトを返すまでの時間をTTFBと呼びますが、この値が大きいとLCPの改善は困難になります。TTFBを短縮するには、サーバーのスペック向上やデータベースクエリの最適化が効果的ですが、最も手軽で効果が高いのがCDNの導入です。
Cloudflareのような無料のCDNサービスを利用すれば、世界中に分散配置されたエッジサーバーからコンテンツを配信できるため、ユーザーの地理的な位置に関係なく高速な表示が可能になります。Cloudflareは無料プランでも十分な機能を備えており、DNSの設定を変更するだけで導入できるため、サイト規模を問わず積極的に活用すべきツールです。また、Cloudflareにはキャッシュ機能やDDoS対策も含まれているため、パフォーマンス改善とセキュリティ強化を同時に実現できます。Cloudflareの公式データによると、CDN導入により静的コンテンツの配信で約1900ミリ秒のレイテンシ改善が見込め、HTTP/3有効時にはP95で116ミリ秒の接続時間短縮が実現できます。
画像とフォントの最適化がLCPに与える影響
LCPの対象となる要素の多くは画像です。そのため、画像の最適化はLCP改善において最も効果的な施策の一つとなります。画像のファイルサイズを削減するには、WebPやAVIFといった次世代フォーマットへの変換が有効です。これらのフォーマットはJPEGやPNGと比較して同等の画質を維持しながらファイルサイズを大幅に削減できます。
画像の読み込み方法も重要な要素です。ファーストビューに表示される画像には遅延読み込みを適用せず、優先的に読み込まれるように設定することで、LCPの数値を改善できます。具体的には、imgタグにfetchpriority属性を追加してhighを指定することで、ブラウザに対してこの画像を優先的に読み込むよう指示できます。
<img src="hero-image.jpg" fetchpriority="high" alt="メインビジュアル" width="1200" height="630">ウェブフォントもLCPに影響を与える要因です。カスタムフォントを使用している場合、フォントファイルの読み込みが完了するまでテキストが表示されないことがあります。この問題を解決するには、font-displayプロパティにswapを指定して、フォント読み込み中はシステムフォントで仮表示し、読み込み完了後に切り替える方法が効果的です。フォントファイル自体もサブセット化によって必要な文字だけを含めることで、ファイルサイズを削減できます。
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}LCP改善の主な施策を以下に整理します。
- サーバー応答時間の短縮：CDN導入、サーバースペック向上、データベースクエリ最適化
- 画像の最適化：WebP/AVIF形式への変換、適切なサイズ指定、fetchpriority属性の活用
- フォントの最適化：font-display: swapの設定、サブセット化、プリロードの活用
- レンダリングブロックの排除：CSSの最小化、JavaScriptの遅延読み込み
INPを改善してインタラクティブな体験を実現する
2024年3月にFIDからINPへと正式に移行したことで、ユーザーのインタラクションに対するレスポンス速度の重要性がより明確になりました。FIDがページ読み込み後の最初の操作だけを測定していたのに対し、INPはページ滞在中のすべてのインタラクションを対象とし、その中で最も遅かった応答時間を指標として採用しています。これにより、ページ全体を通じた操作性の良さが求められるようになりました。
INPを改善するためには、JavaScriptの実行時間を短縮することが不可欠です。重いスクリプトがメインスレッドを長時間占有すると、ユーザーの操作に対する反応が遅れます。まずはLong Tasksと呼ばれる50ミリ秒以上かかる処理を特定し、それらを分割することから始めましょう。
HTTP Archiveの調査によると、2024年時点でINPの合格率はモバイルで74%、デスクトップで97%となっています。デスクトップと比較してモバイルの合格率が低い傾向にあり、モバイル環境での最適化が特に重要であることがわかります。
メインスレッドのブロッキングを解消する方法
メインスレッドがブロックされる主な原因は、大量のJavaScriptの同期的な実行です。これを解消するには、処理を小さなタスクに分割し、それぞれを非同期的に実行する手法が効果的です。requestIdleCallbackやsetTimeoutを使用して処理を分散させることで、ユーザーの操作に対する応答性を維持しながら重い処理を実行できます。
サードパーティスクリプトもINPに大きな影響を与えます。アクセス解析ツール、広告タグ、SNSウィジェットなどは、それぞれ独自のJavaScriptを実行するため、積み重なると相当な負荷になります。不要なスクリプトを削除し、必要なものについてもasync属性やdefer属性を適切に設定することで、メインスレッドへの影響を最小限に抑えられます。
イベントハンドラの最適化も重要な施策です。クリックやスクロールなどのイベントに紐づけられた処理が重いと、INPの悪化に直結します。デバウンスやスロットリングを適用して不必要な処理の実行回数を減らすとともに、処理自体もできるだけ軽量化することが求められます。また、イベントリスナーの登録時にpassiveオプションを指定することで、スクロールなどのイベント処理がブロッキングを引き起こさないようにできます。
document.addEventListener('scroll', handleScroll, { passive: true });
document.addEventListener('touchstart', handleTouch, { passive: true });
CLSを改善してレイアウトの安定性を確保する
CLSは、ページ読み込み中にレイアウトがどれだけずれるかを数値化した指標です。ユーザーが記事を読んでいる最中に広告が挿入されてテキストがずれたり、ボタンをタップしようとした瞬間に位置が変わったりする現象は、非常にストレスを感じさせます。CLSを0.1以下に抑えることで、安定した閲覧体験を提供できます。
CLSが悪化する最も一般的な原因は、サイズが指定されていない画像です。ブラウザは画像を読み込むまでその大きさを把握できないため、読み込み完了時にレイアウトの再計算が発生します。これを防ぐには、すべての画像にwidthとheight属性を明示的に指定することが基本です。CSSでaspect-ratioプロパティを使用する方法もあり、レスポンシブデザインにおいて特に有効です。
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}HTTP Archiveの調査データによると、2024年時点でCLSの合格率はモバイルで79%、デスクトップで72%となっています。興味深いことに、CLSはコアウェブバイタルの3指標の中で唯一、モバイルの方がデスクトップよりも良好な結果を示しています。
動的コンテンツと広告によるレイアウトシフトへの対策
広告枠はCLSを悪化させる代表的な要因です。広告の読み込みタイミングはコントロールが難しく、突然大きな広告が表示されるとページ全体のレイアウトがずれてしまいます。この問題に対処するには、広告枠に対してあらかじめ固定のサイズを確保しておくことが効果的です。min-heightプロパティを使用して広告の最小高さを指定しておけば、広告が読み込まれてもレイアウトへの影響を最小限に抑えられます。
動的に挿入されるコンテンツも注意が必要です。ニュースサイトやECサイトでは、おすすめ記事や関連商品がJavaScriptで後から挿入されることがありますが、これもレイアウトシフトの原因になります。動的コンテンツを挿入する場所には、事前にスケルトンスクリーンやプレースホルダーを配置しておくことで、読み込み完了時のずれを防げます。
ウェブフォントの読み込みもCLSに影響します。フォントが切り替わる際にテキストの高さや幅が変わると、レイアウトシフトが発生します。size-adjustプロパティを使用してフォールバックフォントとウェブフォントのサイズを揃えることで、この問題を軽減できます。また、font-display:optionalを使用すれば、フォントの読み込みが遅い場合はフォールバックフォントをそのまま使い続けるため、レイアウトシフトを完全に防ぐことができます。
CLS悪化の主な原因と対策を以下にまとめます。
- サイズ未指定の画像：width/height属性の明示、aspect-ratioプロパティの活用
- 広告枠：事前のスペース確保、min-heightの指定
- 動的コンテンツ：スケルトンスクリーン、プレースホルダーの配置
- ウェブフォント：font-display設定、size-adjustプロパティの活用
- iframe：width/height属性の指定、コンテナでのサイズ固定
コアウェブバイタルを計測する方法
改善を進めるためには、まず現状を正確に把握することが重要です。Googleはコアウェブバイタルを計測するための複数のツールを無料で提供しており、目的に応じて使い分けることで効率的な改善が可能になります。
PageSpeed Insightsは、URLを入力するだけでコアウェブバイタルのスコアを確認できる最も手軽なツールです。ラボデータとフィールドデータの両方を表示し、具体的な改善点も提示してくれます。フィールドデータはChrome User Experience Reportから取得した実際のユーザーデータであり、本番環境での実態を反映しています。一方、ラボデータはシミュレーション環境での測定結果であり、改善施策の効果を即座に確認する際に役立ちます。
Google Search Consoleのコアウェブバイタルレポートは、サイト全体のパフォーマンスを俯瞰的に把握するのに適しています。良好、改善が必要、不良の3段階でURLがグループ分けされ、優先的に対処すべきページを特定できます。ただし、このレポートは28日間の移動平均を使用しているため、改善施策を実施してから結果に反映されるまでに時間がかかる点は理解しておく必要があります。
| ツール | 特徴 | データタイプ | 主な用途 |
|---|---|---|---|
| PageSpeed Insights | URLごとの詳細分析 | ラボ＋フィールド | 個別ページの改善点特定 |
| Search Console | サイト全体の俯瞰 | フィールド | 問題ページの優先度付け |
| Lighthouse | 開発者向け詳細分析 | ラボ | 開発中のパフォーマンス検証 |
| Web Vitals拡張 | リアルタイム計測 | ラボ | 閲覧中の即時確認 |
| CrUX Vis | 視覚的なデータ分析 | フィールド | 非開発者向けデータ確認 |
開発者向けの計測ツールと実践的な活用法
Chrome DevToolsのLighthouseパネルは、開発者が改善作業を行う際に欠かせないツールです。ローカル環境でページを分析し、パフォーマンス、アクセシビリティ、SEOなどの観点からスコアを算出します。さらに、Performanceパネルを使用すれば、ページ読み込みの詳細なタイムラインを確認でき、どの処理がボトルネックになっているかを特定できます。
Web Vitals拡張機能は、Chromeブラウザにインストールすることで、閲覧中のページのコアウェブバイタルをリアルタイムで表示します。開発中のページを実際に操作しながら、INPの値がどのように変化するかを確認できるため、インタラクション周りの改善に特に役立ちます。
JavaScriptのweb-vitalsライブラリを使用すれば、実際のユーザーのコアウェブバイタルデータを収集できます。このデータをGoogle Analyticsなどの分析ツールに送信することで、フィールドデータを自分で蓄積し、改善の効果を継続的にモニタリングできます。特定のページやユーザーセグメントごとのパフォーマンスを分析したい場合に有効です。2024年10月にはGoogleがCrUX Visという新しいツールを公開し、非開発者でもChrome User Experience Reportのデータを視覚的に確認できるようになりました。
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);【執筆者のコメント】実務でよくある失敗は、ラボデータだけを見て改善したつもりになることです。Lighthouseのスコアが改善しても、フィールドデータが改善しなければ意味がありません。私のクライアントサイトでは、必ずweb-vitalsライブラリを導入してRUMデータを収集し、実際のユーザー体験を継続的に監視しています。
コアウェブバイタルがSEOに与える影響を正しく理解する
コアウェブバイタルは2021年からGoogleのランキング要因として正式に導入されましたが、その影響度については正しく理解しておく必要があります。Googleは一貫して、コンテンツの関連性や品質が最も重要なランキング要因であると述べており、コアウェブバイタルはあくまで補助的な要因として位置づけられています。
ただし、コンテンツの質が同程度のページ同士を比較した場合、コアウェブバイタルのスコアが優れているページが上位に表示される可能性は十分にあります。特に競争が激しいキーワードにおいては、わずかな差が順位を分けることがあるため、コアウェブバイタルの改善は無視できない要素です。
また、直接的なランキングへの影響とは別に、ユーザー体験の向上がもたらす間接的なSEO効果も見逃せません。ページの表示が速くなればユーザーの離脱率が下がり、滞在時間が延び、より多くのページを閲覧してもらえる可能性が高まります。こうしたユーザー行動の改善は、検索エンジンがページの価値を判断する際の間接的なシグナルとなり得ます。
HTTP Archiveの調査によると、2024年時点でコアウェブバイタル全体の合格率はモバイルで43%、デスクトップで54%となっています。2020年にはモバイルでわずか20%だった合格率が、2024年には43%まで上昇しており、ウェブ全体のパフォーマンスが着実に改善していることがわかります。
コアウェブバイタルの改善によるSEO効果を継続的に測定するには、検索順位の変動を定期的にチェックすることが重要です。以下のツールを活用すれば、改善施策の効果を数値で確認できます。
コアウェブバイタル改善施策の効果を検証するには、対象キーワードの検索順位変動を追跡することが不可欠です。最大20キーワードを同時計測でき、過去データとの比較も可能なため、施策前後の順位推移を定量的に把握できます。
モバイルファーストインデックスとコアウェブバイタルの関係
Googleはモバイルファーストインデックスを採用しており、モバイル版のページを基準にインデックスとランキングを行っています。コアウェブバイタルの評価もモバイルとデスクトップで別々に行われますが、モバイルでのパフォーマンスが特に重要視される傾向にあります。
モバイル環境では、デスクトップと比較してネットワーク速度が不安定だったり、デバイスの処理能力が低かったりするため、コアウェブバイタルのスコアが悪化しやすい傾向があります。そのため、改善施策を実施する際は、モバイルを優先的に対象とすることが効果的です。レスポンシブイメージを活用して適切なサイズの画像を配信したり、モバイル向けにJavaScriptの処理を軽量化したりすることで、モバイルでのスコア改善を図ることができます。
2024年の各指標別合格率を見ると、モバイルではLCPが59%、INPが74%、CLSが79%となっており、LCPが最も改善が難しい指標であることがわかります。一方デスクトップではLCPが72%、INPが97%、CLSが72%と、INPはほぼすべてのサイトで良好な結果を示しています。
コアウェブバイタル改善の優先順位と進め方
コアウェブバイタルの改善に取り組む際は、すべての指標を同時に改善しようとするのではなく、優先順位をつけて段階的に進めることが重要です。まずはGoogle Search Consoleのレポートを確認し、不良と判定されているページを特定することから始めましょう。
一般的に、LCPの改善から着手することをおすすめします。LCPはユーザーが最初に感じるページの印象を左右するため、改善効果が体感として分かりやすいという利点があります。また、LCPの改善施策はサーバー応答時間の短縮や画像の最適化など比較的取り組みやすいものが多く、短期間で効果を実感できるケースが多いです。
次にCLSの改善に取り組みます。CLSは画像やiframeへのサイズ指定、広告枠のスペース確保など、HTMLやCSSの修正で対応できることが多いため、開発リソースが限られている場合でも比較的対応しやすい指標です。
改善の進め方としては、まずSearch Consoleで問題ページを特定し、次にPageSpeed Insightsで具体的な改善点を確認します。その後、改善施策を実施してラボデータで効果を検証し、最終的にフィールドデータの改善を確認するという流れになります。フィールドデータは28日間の移動平均を使用しているため、改善効果が反映されるまでには数週間かかる点に注意が必要です。
継続的なモニタリングと改善サイクルの構築
コアウェブバイタルは一度改善すれば終わりではなく、継続的にモニタリングし、必要に応じて改善を続けることが重要です。新しい機能の追加やコンテンツの更新によってスコアが悪化することがあるため、定期的なチェックの仕組みを構築しておく必要があります。
CI/CDパイプラインにLighthouseを組み込むことで、デプロイ前にパフォーマンスへの影響を検知できます。スコアが一定の閾値を下回った場合にアラートを発生させる設定にしておけば、意図せずパフォーマンスを悪化させるコードのリリースを防げます。
また、Real User Monitoring（RUM）を導入することで、実際のユーザーのパフォーマンスデータを継続的に収集できます。地域やデバイス、ブラウザごとのパフォーマンスの違いを把握し、特に問題が発生しているセグメントに対して重点的に改善を行うことで、効率的なリソース配分が可能になります。
- Search Consoleのコアウェブバイタルレポートを週次でチェック
- CI/CDパイプラインにLighthouseを組み込み、デプロイ前に検証
- web-vitalsライブラリでフィールドデータを継続収集
- RUMツールでデバイス・地域別のパフォーマンスを監視
- 月次でパフォーマンスレビューを実施し、改善施策を検討
よくある質問
まとめ
コアウェブバイタルは、LCP、INP、CLSという3つの指標を通じてユーザー体験を数値化し、改善の方向性を明確にする重要な取り組みです。これらの指標を改善することで、検索順位への好影響だけでなく、ユーザーの満足度向上やコンバージョン率の改善といったビジネス面でのメリットも期待できます。
LCPの改善にはサーバー応答時間の短縮とCloudflareなどのCDN導入、画像やフォントの最適化が効果的です。INPの改善にはJavaScriptの実行時間短縮とメインスレッドのブロッキング解消が鍵となります。CLSの改善には画像サイズの明示や動的コンテンツへの事前スペース確保が有効です。
改善を進める際は、Google提供の各種ツールを活用して現状を正確に把握し、優先順位をつけて段階的に取り組むことが重要です。また、一度改善して終わりではなく、継続的なモニタリングと改善サイクルを構築することで、長期的に良好なユーザー体験を維持できます。
SEO Note! Team (SEO施策スタッフ)
SEOエンジニア、マーケター、ライター、編集担当からなる専門チームです。技術的なサイト最適化からコンテンツ戦略の立案、記事の執筆・編集まで、SEO施策を一気通貫で対応できる体制を整えています。10万パターン以上のキーワード対策と3万を超えるドメインの運用で培った実践的なノウハウをもとに、机上の理論だけでは得られない現場視点のSEO支援を提供しています。