Core Web Vitals改善方法｜LCP・INP・CLSの対策

「Core Web Vitalsの数値が悪い」とサーチコンソールに表示されても、LCP・INP・CLSという3つの指標のどれから手を付けるべきか分からず、放置してしまう企業は少なくありません。指標ごとに原因も対策もまったく異なるため、まとめて「速度改善」として捉えると手が止まりがちです。

本記事では、Core Web Vitalsを構成する3つの指標について、それぞれの意味としきい値、そして指標別の具体的な改善方法を解説します。

Core Web Vitalsとは？3つの指標の基本

Core Web Vitalsは、Googleがユーザー体験を測るために定めた指標群で、現在は次の3つで構成されています。

• LCP(Largest Contentful Paint): ページ内で最も大きなコンテンツが表示されるまでの時間。読み込み速度の指標です
• INP(Interaction to Next Paint): クリックやタップなどの操作に対して、画面が反応するまでの時間。応答性の指標です
• CLS(Cumulative Layout Shift): ページ表示中にレイアウトがどれだけ予期せず動くかを示す指標。視覚的安定性の指標です

評価は、実際の訪問者のChromeブラウザから集められたフィールドデータをもとに、モバイルとデスクトップそれぞれで75パーセンタイル値(訪問者の75%が達成している値)で判定されます。この仕組みの詳細はGoogle検索センターの公式ドキュメントで確認できます。各指標には「良好」「改善が必要」「不良」の3段階のしきい値があり、次の章から指標別に見ていきます。

指標1: LCP(読み込み速度)の改善方法

LCPは2.5秒以下が「良好」、4.0秒以下が「改善が必要」、4.0秒を超えると「不良」と判定されます。主な原因と対策は次のとおりです。

• 画像の最適化: ファーストビューに表示される画像が重いと直撃します。表示サイズに合わせたリサイズと圧縮、次世代フォーマット(WebPなど)への変換が効果的です
• サーバー応答時間の短縮: サーバーからの最初の応答が遅いと、以降のすべての表示が遅れます。レンタルサーバーのプラン見直しやキャッシュの活用が有効です
• 重要コンテンツの読み込み優先度を上げる: ファーストビューの画像やフォントを優先的に読み込む設定を行い、表示に関係ない処理を後回しにします
• 不要なCSS・JavaScriptの削減: 使っていないプラグインやテーマの機能が、表示をブロックしている場合があります

指標2: INP(応答性)の改善方法

INPは、クリックやタップなどの操作から画面が反応するまでの時間を測る指標で、200ミリ秒以下が「良好」、500ミリ秒以下が「改善が必要」、500ミリ秒を超えると「不良」です。なお、応答性の指標は以前はFID(First Input Delay)でしたが、Google検索センターの公式ブログによると、2024年3月12日にINPへ置き換えられています。FIDは「最初の操作」しか見ていませんでしたが、INPはページ滞在中のすべての操作の中で最も遅かったものを評価するため、より実態に近い指標になりました。

INPの改善には、次のような対策が有効です。

• JavaScriptの実行量を減らす: 重い処理を一度に実行すると、操作への反応が遅れます。処理を小さく分割する、不要なスクリプトを削除するといった対応が基本です
• サードパーティスクリプトの見直し: 広告タグやアクセス解析、チャットツールなど外部スクリプトが多いほど、メインスレッドが混雑し反応が遅れます。使っていないツールは外しましょう
• 入力やクリックへの反応を優先する実装にする: 開発者向けの対応になりますが、ユーザー操作に直結しない処理は後回しにする設計が効果的です

指標3: CLS(視覚的安定性)の改善方法

CLSは、ページの読み込み中にコンテンツが予期せず動く度合いを数値化したもので、0.1以下が「良好」、0.25以下が「改善が必要」、0.25を超えると「不良」です。記事を読もうとした瞬間に広告が挿入されてボタンを誤タップしてしまう、といった経験はCLSの不良によって起きています。対策は比較的取り組みやすいものが多く、次のとおりです。

• 画像・動画にサイズを指定する: width・height属性やCSSのaspect-ratioで表示領域を事前に確保し、読み込み完了後のガタつきを防ぎます
• 広告枠のスペースを事前に確保する: 広告が読み込まれる前から一定のスペースを空けておきます
• Webフォントの読み込みによる文字のガタつきに注意する: フォント切り替え時のレイアウト変化が大きい場合は、表示方法の見直しが必要です
• ページ上部へのバナーや通知の動的な挿入を避ける: ユーザー操作に起因しないタイミングでの要素挿入はCLSを悪化させます

計測方法: PageSpeed InsightsとSearch Consoleの使い分け

Core Web Vitalsの計測には、目的によって使い分けるべき2つの無料ツールがあります。

• PageSpeed Insights: 特定の1ページを今すぐ計測し、具体的な改善提案を得たいときに使います。ページ単位で原因を特定する場面に向いています
• Google Search Console: サイト全体として、どのページ群がどの指標で問題を抱えているかを把握するのに使います。実際の訪問者データに基づくため、サイト運営者が優先順位を判断する基準になります

いずれも、まずサーチコンソールで「不良」と判定されているページ群を確認し、どの指標(LCP・INP・CLS)が原因かを特定したうえで、該当するページをPageSpeed Insightsで個別に調べる、という順番で進めると効率的です。

まとめ: 指標を切り分けてから対策する

Core Web Vitalsの改善は、LCP・INP・CLSという3つの指標をひとまとめにせず、どの指標が問題なのかを先に切り分けることが出発点です。読み込みが遅いのか、操作への反応が遅いのか、表示中にガタつくのか、それぞれ原因も対策もまったく異なります。サーチコンソールで自社サイトの現状を確認し、本記事で紹介した指標別の対策から優先度の高いものに着手してみてください。

株式会社オモイカネでは、Core Web Vitalsを含むサイト診断とマーケティング支援を行っています。自社サイトのどこから改善すべきか分からない方は、お気軽にご相談ください。