Core Web Vitalsを実務でクリアする方法 — LCP・INP・CLS改善の実装ガイド

Core Web Vitalsとは何か

Core Web VitalsはGoogleが定めた、ウェブサイトのユーザー体験を数値化した指標です。LCP・INP・CLSの3つで構成され、それぞれ「読み込みの速さ」「操作の応答性」「視覚の安定性」を表します。

2021年からGoogleの検索ランキング要因に正式に組み込まれており、特にモバイル検索では数値の良し悪しが順位に影響します。同じ内容のサイトなら、速いサイトのほうが上位に表示される、という単純な原則です。

LCP(Largest Contentful Paint)を改善する

LCPは「ファーストビューで一番大きな要素が表示されるまでの時間」。多くのサイトではヒーロー画像か大きな見出しテキストがこれに該当します。目標は2.5秒以内です。

画像の最適化

ヒーロー画像の容量が500KB以上ある場合、ほぼ確実にLCPを悪化させています。次の対策が定石です。

• JPEGからWebPまたはAVIFへの変換(同じ品質で容量50〜70%削減)
• 表示サイズに合わせたリサイズ(横幅2000pxの画像を1200pxで表示しているなら、1200pxに縮小)
• <picture> タグで端末別に最適な画像を出し分け
• ヒーロー画像に fetchpriority="high" を指定

サーバー応答時間の短縮

ブラウザがサーバーに最初のリクエストを送ってから応答が返るまでの時間(TTFB)が遅いと、LCPも自動的に遅くなります。共有サーバーから専用サーバー・VPSへの移行、CDN(Cloudflareなど)の導入で大きく改善できます。

クリティカルCSSのインライン化

ファーストビューの表示に必要なCSSだけをHTMLに直接埋め込み、それ以外のCSSを遅延読み込みすると、レンダリングの開始が早まります。実装難度は高いですが、効果は確実です。

INP(Interaction to Next Paint)を改善する

INPは2024年3月から導入された比較的新しい指標で、それまでのFID(First Input Delay)を置き換えたものです。ユーザーがクリック・タップした瞬間から、画面が応答するまでの時間を表します。

JavaScriptの実行時間を減らす

INPの悪化原因の多くはJavaScriptの長いタスクです。具体的には次の対策があります。

• 使っていないライブラリの削除(jQuery、lodash全体読み込みなど)
• 大きな処理を requestIdleCallback や setTimeout で分割
• サードパーティスクリプト(広告、解析タグ、チャット)を遅延読み込み
• イベントハンドラの中で重い処理を避け、必要なら requestAnimationFrame で次フレームに回す

第三者スクリプトの管理

Google Analytics、Facebookピクセル、チャットボット、ヒートマップツールなどを次々に追加していくと、INPは確実に悪化します。Google Tag Managerで一元管理し、本当に必要なものだけを残すという「引き算」の判断が重要です。

CLS(Cumulative Layout Shift)を改善する

CLSは「ページの表示中にレイアウトがどれだけズレるか」の指標。読み込み途中で広告が出てきてクリックしたい位置がズレる、画像が遅れて表示されてテキストが下に押し下げられる、といったストレスを数値化したものです。0.1以下が目標です。

画像・動画に幅と高さを指定する

<img> や <video> タグに width と height 属性を必ず指定します。ブラウザは事前に領域を確保でき、コンテンツが読み込まれた後にレイアウトがズレません。

Webフォントの読み込み戦略

フォントファイルが遅れて読み込まれると、フォント切替時に文字幅が変わってレイアウトがズレます(FOUT現象)。対策として:

• font-display: swap の指定でブロッキングを防止
• <link rel="preload"> でWebフォントを優先読み込み
• size-adjust CSS プロパティでフォントメトリクスを揃える

動的に挿入される要素

ユーザー操作後にバナー・モーダル・通知を挿入する場合は、初期状態で領域を予約しておくか、既存コンテンツの上に重ねる(absolute/fixed)構造にします。コンテンツの間に押し込む形は避けます。

計測ツールの使い分け

Core Web Vitalsの計測には複数のツールがあり、それぞれ目的が異なります。

PageSpeed Insights — 個別ページの診断

最も基本的なツール。URLを入力すると、モバイル・PCそれぞれの3指標と改善提案が表示されます。ラボデータ(理想環境での計測)とフィールドデータ(実ユーザーの計測)が両方表示されるのがポイントで、SEOに影響するのは後者です。

Search Console — サイト全体の状況把握

「ウェブに関する主な指標」レポートで、サイト内のどのページ群が遅いかをまとめて確認できます。個別ページではなくサイト構造としての問題を見つけるのに有効です。

Chrome DevTools — 詳細な原因分析

Performanceパネルでネットワーク、JavaScript実行、レンダリングの内訳を秒単位で確認できます。改善施策後にどの部分が速くなったかを検証するのに使います。

WordPressサイトの改善ポイント

国内中小企業サイトの多くがWordPressで構築されており、いくつか定番の改善ポイントがあります。

テーマ選択

機能が豊富なテーマほど、デフォルトで読み込むCSSとJavaScriptが多く、Core Web Vitalsが悪化しがちです。軽量テーマ(Cocoon、Snow Monkey、SWELLなど)に切り替えるだけで指標が改善するケースは多くあります。

プラグインの整理

プラグインは便利な反面、それぞれが独自のCSS・JSを読み込みます。10個以上入っているサイトは、半分以下に減らせないか定期的に見直すと効果的です。特にスライダー系、SNSシェアボタン系、関連記事表示系は重い傾向があります。

キャッシュ・最適化プラグイン

WP Rocket、W3 Total Cache、LiteSpeed Cacheなどのキャッシュプラグインを導入すると、サーバー応答時間とLCPが大きく改善します。設定項目が多いため、無料の診断を活用しながら段階的に有効化するのが安全です。

改善優先度の決め方

すべての項目を一度に対応するのは現実的ではありません。次の順序で取り組むと費用対効果が高くなります。

1. 画像の最適化 — 工数が小さく効果が大きい。WebP変換と適切なサイズ指定だけでLCPが1秒以上短縮することもあります。
2. 使っていないプラグイン・スクリプトの削除 — 「念のため残している」ものを整理。INPとLCPの両方に効きます。
3. 画像・動画への width/height 指定 — CLSをほぼゼロにできる確実な対策。
4. Webフォントの読み込み調整 — font-display と preload の設定で、軽い実装の割に体感が改善します。
5. サーバーまわりの強化 — CDN導入や上位プランへの移行。費用は発生しますが効果は確実です。
6. クリティカルCSSのインライン化 — 専門知識が必要。ここまで来たら上級者向け。

ケーススタディ:建設会社サイトの速度改善

改善後の運用

Core Web Vitalsは一度クリアして終わりではありません。コンテンツ追加・プラグイン追加・テーマ更新のたびに数値は変動します。月1回の定点計測を習慣化すると、悪化に気づくのが早くなります。

Search Consoleの「ウェブに関する主な指標」レポートはGoogleがメールで悪化の通知も送ってくれるため、設定だけしておくと早期発見が可能です。改善は積み上げ、悪化は防ぐ、というスタンスが長期的に効きます。

よくある質問