はじめに
GoogleがSEOの評価基準として導入している「Core Web Vitals」は、ユーザー体験を数値化した重要な指標です。ページの読み込み速度や操作性、デザインの安定性を測るため、これらが悪化すると検索順位やユーザー満足度にも直結します。本記事ではCore Web Vitalsの基本と、それぞれの改善方法を解説します。実際にPageSpeed InsightsやSearch Consoleで計測しながら、サイトの速度とUXを最適化していきましょう。
Core Web Vitalsとは
Core Web Vitalsは、Googleが定義する「Web体験の品質を測る3つの主要指標」です。
- LCP（Largest Contentful Paint）：メインコンテンツが表示されるまでの時間
- CLS（Cumulative Layout Shift）：画面がどれだけ視覚的に安定しているか
- FID（First Input Delay）：最初の操作に対する応答速度
2025年以降はFIDに代わり、より包括的な INP（Interaction to Next Paint） が採用されています。これらの数値を改善することで、検索順位だけでなく直帰率やCVRの改善にもつながります。
LCP（表示速度）の改善方法
LCPはページのメインコンテンツ（画像や大きなテキストブロック）が表示される速さを示します。改善にはまず「画像最適化」が効果的で、WebPやAVIFに変換することで読み込みを大幅に短縮できます。また、サーバーの応答速度を改善するために高速ホスティングやCDNを利用するのも有効です。さらにCritical CSSを適用して、必要なスタイルを先に読み込む工夫も必要です。これらを組み合わせれば、LCPを3秒以上から2秒以下に改善することも可能です。
CLS（レイアウトシフト）の改善方法
CLSはページの要素が意図せず動く現象（レイアウトシフト）を数値化したものです。改善には、まず画像や動画タグに正しい幅・高さを指定し、ロード時に枠が確保されるようにすることが基本です。また、広告枠は動的に挿入せず、あらかじめ固定領域を確保しておく必要があります。さらにWebフォントを読み込む際は font-display: swap; を設定し、テキストのちらつきを抑えましょう。CLSを0.1未満に抑えることで、安定したUIを提供できます。
FID / INP（操作応答速度）の改善方法
FIDはユーザーが最初に操作したときの応答速度を測ります。現在はより包括的なINP（Interaction to Next Paint）が導入され、全体的な操作の応答性を評価するようになっています。改善には、不要なJavaScriptの削除や、処理の遅いライブラリを見直すことが重要です。また、JSを defer や async で遅延読み込みすれば、初期描画を妨げません。さらに複雑な処理はWeb Workerに分散することで、メインスレッドの負担を軽減できます。
改善チェック方法
Core Web Vitalsの状態を確認するには、Google公式ツールを活用しましょう。
- PageSpeed Insights：ページごとのLCP/CLS/INPを診断
- Lighthouse：開発者向けの詳細レポート
- Search Console：全ページを対象にCore Web Vitalsの問題を一括把握
PageSpeed Insightsで赤や黄色の警告が出ている部分を改善し、数週間後にSearch Consoleで評価の変化を確認する流れが効果的です。
実例：改善前後の比較
Before
- LCP：3.8秒
- CLS：0.25
- INP：380ms
- 問題点：画像が非圧縮、フォント遅延、JSの同期読み込み
After
- LCP：1.9秒
- CLS：0.05
- INP：160ms
- 改善施策：画像をWebP化、フォントを事前読み込み、JSを遅延化
この改善により、PageSpeed Insightsのスコアはスマホで60点台から80点台へ上昇し、ユーザー体感速度も向上しました。
まとめ
Core Web Vitalsの改善は、SEOとユーザー体験の両立に欠かせません。LCP・CLS・INPを意識した最適化を行うことで、検索順位の上昇だけでなく、離脱率の低下やコンバージョン率の改善も期待できます。重要なのは「一度改善して終わり」ではなく、継続的にチェックと改善を繰り返すことです。定期的にPageSpeed InsightsやSearch Consoleで診断し、サイトの健全性を維持しましょう。
関連記事：PC・スマホ表示速度改善ガイド｜PageSpeed Insights実例付きチェックポイント
Core Web Vitalsの改善状況は定期的なチェックが重要です。SEO_CHECKなら、URLを入力するだけで表示速度を含む45項目のSEO診断が無料で行えます。
よくある質問（FAQ）
Q. Core Web Vitalsとは何ですか？
Core Web Vitalsとは、Googleが定義するWebページのユーザー体験を測定する3つの指標です。LCP（最大コンテンツ描画時間）、CLS（累積レイアウトシフト）、INP（次のペイントへの入力遅延）で構成され、検索ランキングの要因にもなっています。
Q. LCPを改善する最も効果的な方法は？
LCP改善で最も効果的なのは、ファーストビュー内の画像最適化です。具体的には、画像のWebP変換、適切なwidth/height属性の指定、fetchpriority=”high”の設定、クリティカルCSSのインライン化が有効です。サーバーレスポンス時間（TTFB）の短縮も重要な改善ポイントです。
Q. CLSが発生する主な原因は？
CLSの主な原因は、サイズ未指定の画像・動画、動的に挿入される広告バナー、Webフォントの読み込みによるテキストの再描画（FOIT/FOUT）です。width/height属性の明示、広告枠の事前確保、font-display: swapの設定で大幅に改善できます。
Q. PageSpeed InsightsとCore Web Vitalsの関係は？
PageSpeed InsightsはCore Web Vitalsを含むパフォーマンス指標を測定するGoogleの無料ツールです。ラボデータ（シミュレーション）とフィールドデータ（実ユーザー）の両方を表示し、フィールドデータのCore Web Vitals値が検索ランキングに影響します。
