メインコンテンツへスキップ

Insight / 表示速度・技術品質

Core Web Vitals 完全解説 — INP 時代の表示速度改善

読了目安 8 分

この記事の結論

Core Web Vitals は Google が定める 3 つの実ユーザー体験指標です。合格基準は LCP 2.5 秒以内・INP 200 ミリ秒以内・CLS 0.1 以内。2024 年 3 月に FID が INP に置き換わりました。重要なのは、Lighthouse のラボ値ではなく実ユーザーのフィールドデータ(CrUX)で判定される点。表示速度は検索順位と離脱率の両方に直結します。

LCP 表示の速さ 2.5 秒以内 INP 操作の応答 200ms 以内 CLS 表示のずれ 0.1 以内
図 1:Core Web Vitals の 3 指標と「良好」の合格基準。

1. Core Web Vitals とは — 3 つの指標

Core Web Vitals は、Google が「実際のユーザー体験の良し悪し」を数値で表すために定めた 3 つの指標です。技術用語ですが、中身は単純です。

LCP(Largest Contentful Paint)は、ページの主要な中身が表示されるまでの時間。INP(Interaction to Next Paint)は、ユーザーがクリックやタップをしてから画面が反応するまでの速さ。CLS(Cumulative Layout Shift)は、読み込み中に画面がガタつく量です。

合格基準は LCP 2.5 秒以内・INP 200ms 以内・CLS 0.1 以内。3 つすべてが基準内に入って初めて「良好」になります。

2. なぜ INP が FID を置き換えたのか

2024 年 3 月、Google は応答性の指標を FID から INP に切り替えました。理由は測定範囲の違いです。

FID は「最初の 1 操作」への応答だけを測っていました。INP は「ページ滞在中のすべての操作」の応答性を測ります。ユーザーが感じる「もたつき」を、より正確に捉えられるようになったのです。

モバイルで INP 基準を満たせているサイトは世界でまだ約 77%。逆に言えば、ここを改善すれば差をつけられる余地が残っています。

旧 FID — 最初の 1 操作だけ 新 INP — 全操作を測定
図 2:FID は 1 操作、INP は全操作を測る。ユーザー体験により忠実になった。

3. ラボ値と CrUX — 90 点でも落ちる理由

「Lighthouse で 90 点取れたから安心」— これが落とし穴です。Google が検索順位の判定に使うのは Lighthouse のスコアではありません。

判定に使われるのは CrUX(Chrome ユーザーエクスペリエンスレポート)。実際のユーザーが過去 28 日間に体験した速度の、上位 75% 地点の値です。回線の遅い人・古い端末の人も含まれます。

だから、開発者の高速な環境で測ったラボ値が 90 点でも、実ユーザーの CrUX が基準を下回ることは普通に起きます。見るべきは「フィールドデータ」です。

4. 【Top 7】INP を 200ms 未満にする手法

米国 web.dev の最新ガイダンスが示す、INP 改善の実装手法を 7 つにまとめました。

  1. 長い JavaScript タスクを分割する — 重い処理を小さく区切り、メインスレッドを定期的に解放する。

  2. 重い計算は Web Worker へ逃がす — 画面描画を止めない別スレッドで処理する。

  3. サードパーティスクリプトを減らす — 広告・解析タグの詰め込みが応答性を最も悪化させる。

  4. スクロール・リサイズ処理を間引く — debounce と passive listener で過剰な発火を抑える。

  5. DOM を 1,500 ノード未満に保つ — 要素が多すぎると毎回の再計算が重くなる。

  6. LCP 画像に fetchpriority="high" を付ける — 主要画像を最優先で読み込ませる。

  7. LCP 要素に loading="lazy" を付けない — 主要画像を遅延させると逆に表示が遅れる。

5. 計測の正しい手順

計測には 2 つのコツがあります。1 つ目は、PageSpeed Insights を開いたら「フィールドデータ」欄を先に見ること。これが Google の判定に使われる実ユーザーの値です。

2 つ目は、Lighthouse は 3〜5 回実行して中央値を採ること。Lighthouse の単発の値は ±5〜10 点ぶれます。1 回の結果で一喜一憂しないことです。

T.C.HARTON は全ページでこの計測規律を実践し、結果を 方法論ページで公開しています。

よくある質問

Core Web Vitals の合格基準は?
LCP は 2.5 秒以内、INP は 200 ミリ秒以内、CLS は 0.1 以内が「良好」の基準です。3 指標すべてが基準内に入って初めて合格となります。
INP と FID は何が違いますか?
FID は最初の操作への応答だけを測りましたが、INP はページ滞在中の全操作の応答性を測ります。2024 年 3 月に INP が FID を正式に置き換えました。
Lighthouse のスコアが 90 以上なら大丈夫ですか?
必ずしも大丈夫ではありません。Google が順位判定に使うのは実ユーザーのフィールドデータ(CrUX)です。Lighthouse のラボ値が高くても、実環境のスコアが基準を下回ることはよくあります。
表示速度は検索順位に影響しますか?
影響します。Core Web Vitals は Google の検索ランキング要因の一つです。さらに表示が遅いと離脱率が上がり、問い合わせや売上の機会損失にも直結します。

関連記事

出典

Free Diagnosis

あなたのサイトの表示速度、測ってみませんか

無料診断では、現状サイトの Core Web Vitals を実測してお見せします。発注前に「成功の基準」を一緒に決めます。診断だけで終わっても費用は一切かかりません。

1 分で無料診断を申し込む