SEO
Core Web Vitalsとは?3指標の意味と、直さなくていい場合の見分け方
「Search Consoleに赤が出た」「LCPやCLSと言われても分からない!」と困っていませんか?
解説を読むと改善方法が並びますが、そもそも直す必要があるのかは書かれていません。
この記事では、3つの指標が測っているもの、実測値と参考値の違い、良好なら直さなくていい理由、指標ごとの原因、プラグインを使わずに直せる範囲までを解説します。
数値を見て手が止まっている方が、直す場所と後回しにする場所を切り分けられるようになります。
Core Web Vitalsの3指標が見ているもの
3つは別々のことを測っていて、原因も対処も違います
Core Web Vitalsは、ページの使い心地を3つの数値で表したものです。LCPが表示の速さ、INPが反応の速さ、CLSがずれにくさを測ります。
CLSは合計値ではありません。ずれを1秒未満の間隔でまとまりに区切り、最も大きいまとまりだけを採用します。ページを長く開いていても不利にはなりません。
INPだけは、実際に誰かが操作しないと測れません。PageSpeed Insightsの参考値に出てこないのは、そのためです。
それぞれ独立した指標です。1つが基準を外れると、全体の評価が下がります。
LCPは表示の速さ
Largest Contentful Paint の略で、画面の中で最も大きい要素が表示されるまでの時間です。多くの場合、記事の上にあるアイキャッチ画像がこれにあたります。
この指標は4つの区間に分かれており、どの区間が長いかで対処が変わります。画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。
基準は2.5秒以内です。ここが遅いと、読者は白い画面を見ながら待つことになります。
INPは反応の速さ
Interaction to Next Paint の略で、クリックやタップに画面が反応するまでの時間です。2024年3月にFIDから置き換わりました。
基準は200ミリ秒以内です。古い解説にFIDと書かれていたら、その記事は更新されていません。
対象になるのはクリック、タップ、キー入力の3つです。スクロールやマウスを乗せただけの動きは含まれません。押した瞬間ではなく、押した結果が画面に現れるまでを測ります。
CLSはずれにくさ
Cumulative Layout Shift の略で、読み込み中にレイアウトがどれだけずれるかを表します。基準は0.1未満です。
読もうとした瞬間に文字が下に動く、押そうとしたボタンが移動する。どちらも、読み込み中にずれたことが原因です。
読み込み中だけでなく、ページを閉じるまで測られます。下までスクロールした先で遅れて要素が入るずれも計上されます。ただし、利用者が自分で押した結果として動くものは対象外です。
Core Web Vitalsの数値を見る前に確認すること
2種類の数字があり、見るべきなのは実際の利用者のデータです
Core Web Vitalsには2種類の数字があります。実際の利用者から集めたデータと、その場で測った参考値です。
改善の判断に使うのは前者です。PageSpeed Insightsの点数だけを見て動くと、実際には問題のない箇所を直すことになります。
実測値はSearch Consoleで見る
Search Console のウェブに関する主な指標に出るのが実測値です。過去28日間に実際にサイトを見た人の環境から集められています。
ここに出ていない場合、データ量が足りていません。公開して間もない場合や、アクセスの少ないサイトでは表示されないことがあります。
Search Consoleの「ウェブに関する主な指標」を開くと、モバイルとPCそれぞれで、良好・改善が必要・不良の3区分に分かれた件数が表示されます。ここで不良のURLがあれば、そのグループを開いて対象のページを確認します。
データが表示されない場合、集計に必要な件数が集まっていません。アクセスの少ないサイトではよくあることです。その段階では参考値を目安にします。
参考値は環境で変わる
PageSpeed Insights の点数は、測定するたびに変わります。測定に使われた回線や端末の条件によって上下するためです。
原因を探るには役立ちますが、点数そのものを目標にする必要はありません。実測値が良好なら、参考値が低くても問題にはなりません。
参考値は、測定用の環境で1回だけ読み込んだ結果です。回線の状態や測るタイミングで数値が変わります。同じページを続けて2回測っても、同じ数値にはなりません。
そのため、参考値の細かい上下を追いかける意味はありません。判断の材料にするのは、明らかに悪い項目が指摘されているかどうかです。
SELF CHECK
PageSpeed Insightsの実測値で、3つの指標はどうなっていますか。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
診断結果
直す必要はありません
基準を満たしているなら、この領域での作業は不要です。点数を上げても検索の評価は変わりません。
その時間は記事を書くほうに回してください。表示速度より、扱っている内容のほうが順位に効きます。
診断結果
表示の遅さです。4区間に分けて見ます
LCPはサーバー応答、読み込みの遅延、読み込み時間、描画の遅延の4つに分かれます。どこが長いかで打ち手が変わります。
画像を圧縮しても数値が動かないのは、縮めた分が別の区間にずれるためです。まず内訳を確認してください。
診断結果
操作への反応です。JavaScriptを疑います
クリックやタップから画面が変わるまでの時間です。原因のほとんどはプラグインが読み込むJavaScriptです。
まず使っていないプラグインを停止します。スライダーとポップアップは、それだけで反応を鈍らせます。
診断結果
要素のずれです。3か所を順に見ます
寸法のない画像と埋め込み、後から差し込まれる要素、Webフォントの切り替わり。多くはこの3つのどれかです。
合計値ではなく、最も揺れた数秒間だけを見ています。直す範囲はページ全体ではなく数か所に絞れます。
診断結果
まだデータが集まっていません
実測値は28日間の集計です。アクセスが少ないと表示されません。ドメイン全体に切り替えると出ることがあります。
それでも出ない場合は、参考値を目安に明らかな問題だけ直しておきます。
Core Web Vitalsが良好なら直さなくていい
流入のないページを直しても、その改善は誰にも届きません
3つとも基準内に入っているなら、それ以上の最適化は優先度を下げて構いません。点数を伸ばす作業に時間を使うより、他にやることがあります。
Core Web Vitalsは順位を決める要因のひとつですが、内容の質に比べれば影響は小さい。同じ時間を記事の改善に使ったほうが、検索からの流入は増えます。
優先度は流入の多さで決める
数値が悪いページが複数あるとき、すべてを直す必要はありません。流入の多いページから手を付けます。
アクセスがほとんどないページの表示速度を改善しても、その速さを体験する人がいません。改善は、人が来ているページでこそ意味を持ちます。
Search Consoleの検索パフォーマンスで、表示回数の多いページを確認します。そのページがCore Web Vitalsで不良になっていれば、そこから直します。
逆に、誰も見ていないページの数値を直しても、影響を受ける利用者がいません。指標の改善そのものが目的になると、この判断を誤ります。
点数を目的にしない
90点を95点にする作業と、記事を1本増やす作業。多くの場合、後者のほうが結果につながります。
Core Web Vitalsは診断の道具であって、満点を取るためのチェックリストではありません。
PageSpeed Insightsの点数は、複数の項目を合成した値です。Core Web Vitalsの3指標とは別物で、点数が低くても3指標がすべて良好なら、検索の評価に不利にはなりません。
点数を100に近づける作業は、際限なく続けられます。3指標が良好に収まった時点で切り上げ、記事を書く時間に回すほうが、結果として流入は増えます。
Core Web Vitalsの指標別の直し方
まとめて直そうとせず、悪い指標を1つ選んで着手します
3つは原因が違うため、対処も別々になります。悪い指標を1つ選び、そこから手を付けます。
同時に複数を直すと、どれが効いたか分かりません。リライトと同じで、変更点は1つに絞ります。
LCPが遅い場合
最も多いのは画像です。ページ上部の大きな画像が重いと、そのまま表示時間になります。
このサイトでは、アイキャッチをPNGからWebPに変換しています。1,777KBのPNGが72KBになりました。形式を変えるだけで、容量が20分の1以下になっています。
あわせて、ページ上部の画像には遅延読み込みを付けません。後回しにすると、かえって表示が遅れます。
INPが遅い場合
JavaScriptの処理が長いと、クリックしても画面が反応しません。原因になりやすいのは、使っていない機能の読み込みです。
このサイトではプラグインを6本すべて削除し、フロント側で読み込むプラグインのファイルを0本にしました。使っていない目次やアクセス解析のスクリプトが、全ページで読み込まれていた状態でした。
CLSが大きい場合
画像や埋め込みに寸法を書いていないと、読み込みが終わった瞬間に周囲が押し下げられます。width と height を書けば、場所が先に確保されます。
このサイトでも、問い合わせフォームの埋め込みに固定幅を書いていて、スマートフォンで右にはみ出す状態がありました。埋め込みは幅を親要素に合わせ、高さは指定しておきます。
プラグインを入れずに直せる範囲
4つとも、テーマの編集だけで対応できます
解説の多くはキャッシュ系のプラグインを勧めますが、入れなくても改善できる部分があります。
このサイトはプラグイン0本で運用しています。SEO、目次、パンくず、構造化データ、問い合わせフォームまですべてテーマとGASで実装しています。
画像の形式を変える
PNGやJPEGをWebPに変換します。無料の変換ツールで済み、見た目はほとんど変わりません。
表示速度を説く記事に重い画像を載せていると、内容と実装が食い違います。費用も手間もかからないので、ここは最初に手を付ける場所です。
寸法を書く
すべての画像に width と height を指定します。埋め込みのiframeも同様です。
この作業だけでCLSはかなり下がります。難しい設定は要らず、書き足すだけで効きます。
WordPressの本文に挿入した画像には、幅と高さが自動で入ります。入っていない場合は、画像を最適化するプラグインが取り除いている可能性があります。
テーマのファイルに直接書いた画像は自動では入りません。ヘッダーのロゴやトップページの装飾画像が該当します。対象は数枚なので、一度入れれば済みます。
読み込まないものを増やさない
プラグインを追加するたびに、CSSとJavaScriptが増えます。使っていないものが残っていないか、定期的に確認します。
停止しただけでは読み込みが残る場合があります。停止では足りないので、使わないと決めたら削除してください。
プラグインは1つ増えるごとに、そのプラグイン専用のJavaScriptとCSSが読み込まれます。使っていないページでも読み込まれることが多く、積み上がると反応が鈍くなります。
当サイトはプラグインを使っていません。必要な機能はテーマに書いているため、読み込むJavaScriptは自分で書いた1ファイルだけです。この構成がすべてのサイトに向くとは考えていませんが、内容が安定している企業サイトなら選択肢になります。
よくある質問
Core Web Vitalsは順位にどれくらい影響しますか。
要因のひとつですが、単独で順位を大きく動かすものではありません。内容の質が同程度の競合と並んだとき、差になることがある程度です。
Search Consoleにデータが表示されません。
アクセス数が一定に満たないと表示されません。この場合はPageSpeed Insightsで参考値を見て、明らかな問題だけを直します。
改善したのに数値が変わりません。
実測値は過去28日間のデータなので、反映に時間がかかります。修正した日を記録して、1か月後に見比べてください。
キャッシュプラグインは入れるべきですか。
効果はありますが、必須ではありません。画像の形式と寸法の指定を先に済ませてから、それでも足りない場合に検討してください。
まとめ
Core Web Vitalsは、表示の速さ・反応の速さ・ずれにくさを測る3つの指標です。基準はLCPが2.5秒以内、INPが200ミリ秒以内、CLSが0.1未満です。
見るのはSearch Consoleの実測値です。PageSpeed Insightsの点数は測るたびに変わるので、目標にしません。
3つとも良好なら、直す必要はありません。数値が悪いページが複数ある場合は、流入の多いものから手を付けます。
まずSearch Consoleのウェブに関する主な指標を開き、赤が出ているかを見るところから始まります。何も出ていなければ、記事を書く時間に回してください。