はじめに
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で診断し、サイトの健全性を維持しましょう。