Core Web Vitalsを数値で改善する｜LCP・INP・CLSの直し方
「うちのサイト、なんとなく重い気がする」——そう感じながらも、どこをどう直せばいいか分からず、そのままになっていませんか。 体感だけだと、直しても効いたのかどうかが分かりません。でも、ページの快適さは、いまや3つの数値で見える化できます。
今日は、Googleが公開しているCore Web Vitals（コア ウェブ バイタル＝ページ体験の良し悪しを測る3つの数値）を、あなたのお店の「健康診断表」としてお渡しします。難しい設定はいりません。無料ツールで測り、赤くなっている1つから直す。それだけで、静かな離脱を減らせます。
結論：ページの快適さは、表示の速さ・操作の反応・表示の安定という3つの数値（Core Web Vitals）で測れます。まず無料のPageSpeed Insightsで売れ筋の商品ページを1枚測り、いちばん赤い項目から手をつけましょう。多くの場合、最初の一手は「大きな画像を軽くする」です。
Core Web Vitals は、Googleが「ユーザーにとって快適なページか」を判断するために定めた3つの指標です。検索順位にも関わる要素の一つとされているので、直すことはCVR（購入率＝ページを見た人のうち買ってくれた割合）にも、SEO（検索からの集客）にも無駄になりません。
このページを動画で見る
文章だけだとイメージしにくい方へ。このページの内容を、動画でやさしく解説しました。読んでもピンとこなかったところは、ぜひ動画で確かめてみてください。
いま何が起きているか
多くのEC担当者は、ページの速さを「なんとなく速い／遅い」の体感で判断しています。だから、直しても効果が分からず、優先順位もつけられません。結果、いちばん効く場所が後回しになりがちです。
Core Web Vitals は、その体感を数字に変えてくれます。中身は次の3つです。いずれもGoogleが「良い」とする目安つきで、信号（緑・黄・赤）のように評価されます。
- LCP（表示の速さ）：ページを開いてから、メインの画像や見出しなど「いちばん大きな要素」が表示されるまでの時間。2.5秒以内なら良好の目安。遅いほど、中身を見る前に帰られます。
- INP（操作の反応）：タップやクリックをしてから、ページが反応するまでの速さ。0.2秒（200ミリ秒）以内が良好の目安。「押したのに反応しない」いらだちを防ぎます。
- CLS（表示の安定）：読み込み中に、ボタンや画像の位置がガタッとずれる量。0.1以下が良好の目安。押そうとした瞬間にズレて誤タップ、という離脱を防ぎます。
用語はアルファベットで難しく見えますが、意味は「速く表示され、押したらすぐ反応し、途中でズレない」という当たり前の快適さのことです。この3つを数字で見れば、どこが読者を取りこぼしているかがはっきりします。
具体例：3つの数値を測って、直す順番を決める
やることはシンプルです。次の手順で、あなたの主力ページの「弱い1つ」を見つけて直します。
1. 無料ツールで測る
PageSpeed Insightsに、売れ筋の商品ページのURLを入れるだけ。スマホ（モバイル）とパソコン（デスクトップ）の両方で、LCP・INP・CLSがそれぞれ緑・黄・赤で表示されます。まずはスマホの結果を見てください。買い物の多くはスマホで起きているからです。
2. いちばん赤い項目を1つだけ選ぶ
3つ全部を一度に直そうとしないこと。最も赤い（または黄色い）項目を1つ選び、そこに集中します。多くのECサイトでは、まずLCP（表示の速さ）が引っかかります。
3. 項目ごとの「効く直し方」を当てる
赤い項目によって、効く手当ては変わります。代表的なものは次の通りです。
| 弱い項目 | よくある原因 | まず効く直し方 |
|---|---|---|
| LCP（表示の速さ）が遅い | 大きすぎる画像、重い読み込み | メイン画像を表示サイズに縮小＋圧縮（WebP化）、下部画像は遅延読み込み |
| INP（操作の反応）が悪い | 裏で動く処理・タグが多い | 使っていないアプリ／計測タグを外す、装飾スクリプトを減らす |
| CLS（表示の安定）が悪い | 画像や広告枠のサイズ未指定 | 画像・枠に幅と高さを指定し、あとから割り込む表示を減らす |
4. 直したら、もう一度測って確かめる
手を入れたら、同じツールでもう一度測ります。数字が良くなったかで効果を判定できるのが、この方法のいちばんの強みです。体感に頼らず、「緑に変わった」を確認してから次へ進みましょう。より詳しい各指標の意味や基準は、Googleの技術ガイドweb.dev（Core Web Vitals 解説）でも確認できます。
※ 数値はGoogleが示す一般的な目安です。実際の体感や効果は、回線・端末・ページの中身で変わります。1回の計測でぶれることもあるので、時間を変えて2〜3回測ると安定して判断できます。
あなたへの影響
- せっかくのアクセスを取りこぼしにくくなります。 ページが速く安定すると、広告や検索で連れてきた人が「重さ・ズレ」で帰る前に、商品を見てもらえます。広告費を増やさずに購入率の底上げが狙えます。
- 直した効果が数字で分かります。 「なんとなく速くなった気がする」ではなく、緑・赤で結果が見えるので、次にどこを直すかの判断が速くなります。
- SEOの面でも無駄になりません。 Core Web Vitals は検索での評価に関わる要素の一つとされています。読者の快適さを整えることが、そのまま検索対策にもつながります。
- 注意点：数値は目的ではなく道具です。 満点を狙って直しすぎるより、赤を1つずつ緑に近づけるほうが費用対効果は高いことが多いです。まずは主力ページだけで十分。全ページを一度に完璧にする必要はありません。
明日やること
- 売れ筋の商品ページを1つ選び、PageSpeed InsightsにURLを入れて、スマホの結果を測る。
- LCP・INP・CLSのうち、いちばん赤い（黄色い）項目を1つメモする。
- その項目に合った直し方（多くはメイン画像の縮小＋圧縮）を1つだけ試す。
- 同じツールでもう一度測り、数字が良くなったかを確認する。
- 継続的に見張りたい場合は、Google サーチコンソールの「ウェブに関する主な指標」レポートで、サイト全体の状態を定期的にチェックする。
「なんとなく重い」を、今日で卒業しましょう。3つの数値は、あなたのサイトが読者に何を我慢させているかを、静かに教えてくれます。まずは1ページ、測ってみるところから。直す場所が見えると、改善はぐっと楽になります。
チェックリスト
- 売れ筋の商品ページをPageSpeed Insightsで測った（まずスマホ）
- LCP・INP・CLSのうち、いちばん弱い項目を1つ特定した
- LCPが弱い場合、メイン画像を縮小＋圧縮（WebP化）した
- INPが弱い場合、使っていないアプリ・計測タグを外した
- CLSが弱い場合、画像や枠にサイズ（幅・高さ）を指定した
- 直したあと、もう一度測って数字が良くなったか確認した
- サーチコンソールでサイト全体の指標を定期的に見ると決めた
関連記事・無料ツール
- ▶ 表示速度を上げてCVRを改善する｜重いECは買う前に閉じられる
- ▶ スマホ商品ページの離脱を防ぐ設計
- ▶ サーチコンソールで検索流入を分析する
- ▶ ファネル分析でCVRのボトルネックを直す 完全ガイド
- ▶ 商品ページ改善チェックリスト50
- ▶ EC利益計算ツール（ROAS / 利益率 / LTV）
あなたの商品ページは、3つの数値でいくつになっていますか。気になるページのURLを添えて、無料診断で「まず直すべき1か所」をお返しします。