Google は Core Web Vitals を直接的なランキングシグナルとして使用しています。2026 年には、 3 つの指標が「良好」の閾値を定義します: LCP 2.5 秒以下、INP 200 ミリ秒以下、CLS 0.1 以下。 1 つでも欠けると、ページエクスペリエンスシグナルを失います。このガイドでは各指標が実際に 何を測定するか、最も効果的な修正方法を解説します。
LCP — Largest Contentful Paint（最大コンテントフルペイント）
LCP はナビゲーション開始からビューポート内の最大の可視要素のレンダリングが完了するまでの時間を 測定します。実際には、LCP 要素はほとんどの場合ヒーロー画像、背景画像、または大きなテキストブロックです。
| スコア | LCP |
|---|---|
| 良好 | ≤ 2.5 秒 |
| 要改善 | 2.5–4.0 秒 |
| 不良 | > 4.0 秒 |
主要な LCP 修正方法
- LCP 画像は同一オリジンまたは高速 CDN から提供する。 DNS ルックアップ・ TCP ハンドシェイク・TLS ネゴシエーションごとに最初のバイト前に 50〜200 ms が追加されます。
- WebP または AVIF に変換する。 400 KB の JPEG LCP 画像は 90〜120 KB の WebP になります — 3G 接続で 300 ms を節約できます。
- LCP 画像に
fetchpriority="high"を追加する。 ブラウザに 他の画像や非クリティカルなリソースよりもこのリクエストを優先するよう指示します。 - LCP 画像をプリロードする。
<link rel="preload" as="image" href="/hero.webp">は HTML パーサーが<img>タグに到達する前にプリロードキューに入れます。 - LCP 画像に遅延読み込みを絶対に使わない。 ヒーロー画像への
loading="lazy"は 500 ms 以上追加する一般的なミスです。 - LCP 要素の上のレンダリングブロッキングリソースを排除する — クリティカルで ないスタイルシート、
<head>内の同期スクリプト。
INP — Interaction to Next Paint（次のペイントまでのインタラクション）
INP は 2024 年 3 月に FID（First Input Delay）を置き換えました。ページ訪問中のすべての ユーザーインタラクション（クリック・タップ・キーボード入力）における最悪のインタラクション 遅延を測定します。INP は入力から次のレンダリングフレームまでの全期間をキャプチャします。
| スコア | INP |
|---|---|
| 良好 | ≤ 200 ms |
| 要改善 | 200–500 ms |
| 不良 | > 500 ms |
主要な INP 修正方法
- 長いタスクを分割する。 50 ms 超の JavaScript タスクはメインスレッドを ブロックします。
scheduler.yield()またはsetTimeout(fn, 0)で チャンク間にブラウザへ制御を戻します。 - 重い処理をメインスレッド外に移動する。 Web Worker はユーザーインタラクションを ブロックせずにデータ処理・パーサー・シリアライゼーションを実行できます。
- レイアウトスラッシングを避ける。 DOM への読み書きの混在は強制同期レイアウトを 引き起こします。DOM の読み込みを一括処理してから、DOM の書き込みを一括処理します。
- サードパーティスクリプトを遅延させる。 アナリティクス・チャットウィジェット・ A/B テストスクリプトは一般的な INP キラーです。
<script defer>またはloadイベント後に読み込みます。
CLS — Cumulative Layout Shift（累積レイアウトシフト）
CLS は予期しないレイアウトシフトを測定します — ユーザーが読んでいるか、クリックしようとして いる瞬間に要素が動くことです。スコアは各シフトのビューポート影響率と移動距離を掛け合わせた すべてのレイアウトシフトスコアの合計から計算されます。
| スコア | CLS |
|---|---|
| 良好 | ≤ 0.1 |
| 要改善 | 0.1–0.25 |
| 不良 | > 0.25 |
主要な CLS 修正方法
- 常に画像の幅と高さを指定する。 サイズがないとブラウザは画像が読み込まれる まで領域を確保せず、シフトが発生します。
width・height属性または CSS のaspect-ratioを使用します。 font-display: optionalを使うかフォントをプリロードする。 フォールバックフォントが描画された後にスワップされる Web フォントはレイアウトシフトを引き起こします。- 広告・埋め込み・iframe のスペースを確保する。 コンテンツが読み込まれる前に 固定サイズのプレースホルダーコンテナを挿入します。
- 既存のコンテンツの上に DOM を挿入しない。 バナー・クッキー通知・ページ 上部に挿入される動的コンテンツはすべてを押し下げます。
優先順位
LCP を最初に修正します — 知覚速度との相関が最も高く、ランキングへの影響が最大です。次に INP — インタラクティビティに直接影響し、ユーザーが感じます。CLS は最後 — 通常 HTML 属性の 変更だけで修正でき、アーキテクチャの変更は不要です。