【PageSpeed改善連載 vol.2】Core Web Vitals ってなんですか？──LCP・CLS・INP を最短で理解する

PageSpeed改善連載の vol.2 です。
前回は「うちのサイトのモバイルスコアは57」という現状把握で終わりました。今回は改善に入る前に、そもそも Google が何を見ているのかを整理しておきます。

結論から言うと、PageSpeed の総合スコアより Core Web Vitals（コアウェブバイタル） の3指標のほうが本番です。ここが揃うと、体感速度も検索評価も一緒に伸びます。

Core Web Vitals は「体験の物差し」

Core Web Vitals は、Google がユーザー体験を数値化するために定めた指標セットです。
特徴は、開発者目線の「サーバー応答時間」や「バイト数」ではなく、ユーザーが実際に画面の前で感じる体験を測っているところ。

2026年時点で採用されている指標は、次の3つです。

• LCP（Largest Contentful Paint）── 表示の速さ
• CLS（Cumulative Layout Shift）── 表示の安定
• INP（Interaction to Next Paint）── 操作の反応

「速く出て」「ガタつかず」「触ったら返ってくる」──この当たり前を数値化したもの、と考えるとスッと入ってきます。

LCP：メインの絵が何秒で出ますか？

LCP は、ページを開いてから 一番大きな要素（多くはヒーロー画像や大きな見出し） が表示されるまでの秒数です。
ユーザーは「メインの絵が出た瞬間」に “読み込めた” と感じるので、この時間が体感速度そのものになります。

Google の目標値はこう決まっています。

• 2.5 秒以下 → 良好
• 2.5〜4.0 秒 → 要改善
• 4.0 秒超 → 不良

うちのサイトは前回の Lighthouse 推定で LCP が 3.0 秒台。まさに「要改善」ゾーンです。ヒーロー画像の配信・フォント読み込み・レンダリングブロックする JS/CSS が主な犯人になります。

CLS：読もうとしたら文字がズレる、あれ

CLS は「表示中に、意図しないレイアウトのズレがどれだけ起きたか」を積算した数値です。
画像のサイズを指定していない、広告が後から差し込まれる、Web フォントの読み込みで見出しの高さが変わる──こういうときに CLS は悪化します。

目標値はスコアで見ます。

• 0.1 以下 → 良好
• 0.1〜0.25 → 要改善
• 0.25 超 → 不良

「押そうとしたボタンが下にズレた」でイラッとした経験、誰でもあるはずです。あれをゼロに近づけるのが CLS 対策のゴール。

INP：タップしたのに一瞬止まる、あれ

INP は 2024年3月から Core Web Vitals に正式採用された、比較的新しい指標です。
ユーザーが クリック・タップ・キー入力 をしてから、画面が反応するまでの遅延を測ります。

• 200 ms 以下 → 良好
• 200〜500 ms → 要改善
• 500 ms 超 → 不良

重い JavaScript がメインスレッドを塞いでいると、INP はすぐ悪化します。ハンバーガーメニューを開いたのに一瞬固まる、フォームに文字を打っても遅れて表示される──あの違和感の正体です。

スコアと Core Web Vitals の関係

PageSpeed Insights のパフォーマンススコア（0〜100）は、実は Core Web Vitals を含む複数の指標を重み付けした合算値です。
だから スコアを追いかけても、Core Web Vitals を直接改善したほうが結果的にスコアも上がる。順序が逆にならないようにしたいところです。

スコアを 1 点上げるための最短ルートは、3指標のうち一番遅れている項目を潰すこと。うちの場合は、前回の監査で 「レンダリングブロックのリクエスト 5,700ms」 という大物が LCP を引きずっていました。次回はここに手をつけます。

まとめ：改善に入る前の共通言語ができました

今回は3指標のイメージだけ、まず言葉として持って帰ってもらえれば十分です。

• LCP＝メインの絵、何秒で出る？（目標 2.5 秒以下）
• CLS＝表示中にズレない？（目標 0.1 以下）
• INP＝触ったらすぐ返る？（目標 200 ms 以下）

次回 vol.3 は、実際に監査結果で一番重かった 「レンダリングブロックのリクエスト 5,700ms」 をどう読み解いて、どこから潰していくかを実践編としてお送りします。
ここが動くと、LCP がまとまって改善するはずです。お楽しみに。

この記事を書いた人

WEBディレクター

佐藤 広樹 Sato

仕事を通じて出会った方から「人から学ぶ」ことを大切に、AIやWEBから得られない知見を吸収するよう意識しています。

スタッフ紹介はこちら →