Core Web Vitalsとは？3指標の意味と、直さなくていい場合の見分け方
「赤い表示が出た」「LCPやCLSと言われても分からない！」と困っていませんか？
解説を読むと直し方は並んでいますが、そもそも直す必要があるのかまでは書かれていません。
この記事では、3つの指標の意味、実測値と参考値、直さなくていい場合、直し方を解説します。
数値を見て手が止まっている方が、直す場所と後回しにする場所を切り分けられるようになります。
Core Web Vitalsの3つの指標が測っているもの
Core Web Vitalsは、ページの使い心地を3つの数値で表したものです。LCPが表示の速さ、INPが反応の速さ、CLSがずれにくさを測ります。
| 指標 | 測るもの | 良好の基準 |
|---|---|---|
| LCP | 最も大きな要素が表示されるまでの時間 | 2.5秒以内 |
| INP | 操作してから画面が反応するまでの時間 | 200ミリ秒以下 |
| CLS | 読み込み中のレイアウトのずれ | 0.1以下 |
基準は、利用者の75パーセンタイルで判断されます。
① LCPは、表示の速さ
LCPは、画面の中で最も大きな要素が表示されるまでの時間です。多くのページでは、記事の上にあるアイキャッチ画像がこれに当たります。
LCPは4つの区間に分かれ、どの区間が長いかで直し方が変わります。画像を圧縮しても数値が動かないのは、縮めた分がほかの区間にずれることがあるためです。
2.5秒を超えると、読者は白い画面を見ながら待つことになります。
② INPは、反応の速さ
INPは、クリックやタップ、キー入力をしてから、結果が画面に現れるまでの時間です。2024年3月に、それまでのFIDから置き換わりました。
スクロールやマウスを乗せただけの動きは、測る対象に含まれません。実際に誰かが操作しないと測れないため、測定用の環境で1回読み込むだけの参考値には出てきません。
古い解説にFIDと書かれていたら、その記事は更新されていないと考えてください。
③ CLSは、ずれにくさ
CLSは、読み込み中にレイアウトがどれだけずれるかを表します。読もうとした文字が下に動く、押そうとしたボタンが逃げる、といったずれの大きさです。
CLSは、ずれを合計し続けた値ではありません。間隔の近いずれをまとまりに区切り、最も大きいまとまりだけを採用します。ページを長く開いていても、それだけで不利にはなりません。
利用者が自分で押した結果として動くものは、対象から外れます。
Core Web Vitalsの数値を見る前に、2種類の数字を分ける
Core Web Vitalsには、2種類の数字があります。実際の利用者から集めた実測値と、その場で測った参考値です。
直すかどうかの判断に使うのは、実測値のほうです。参考値の点数だけで動くと、実際には困っていない箇所を直すことになりかねません。まずはどちらの数字を見ているのかを確かめてから、手を動かしてください。
① 実測値は、Search Consoleで見る
Search Consoleのウェブに関する主な指標に出るのが、実測値です。実際にサイトを見た人の環境から集めたデータで、モバイルとパソコンに分けて表示されます。
画面には、良好、改善が必要、不良の3つに分かれた件数が並びます。不良があれば、そのグループを開いて対象のページを確かめてください。データが足りないと「データがありません」と出るのは、アクセスの少ないサイトでよくある状態です。
② 参考値は、測るたびに変わる
PageSpeed Insightsの点数は、測定用の環境で1回読み込んだ結果です。回線や端末の条件で上下するため、同じページを続けて測っても同じ数値にはなりません。
原因を探る道具としては役立ちますが、点数そのものを目標にする必要はありません。実測値が良好なら、参考値が低くても慌てる必要はないのです。
実測値がまだない段階では、参考値で明らかに悪い項目だけを直してください。
SELF CHECK
Search Consoleのウェブに関する主な指標は、どう表示されていますか。
診断結果
直さなくて構いません
3つとも基準内なら、それ以上の最適化は後回しで大丈夫です。その時間を、記事を書くことや直すことに使ってください。
診断結果
流入の多いページから直します
該当するグループを開き、どの指標が悪いかを確かめます。検索パフォーマンスで流入の多いページから、1つの指標ずつ直してください。
診断結果
参考値で明らかな問題だけ直します
実測値を集めるだけのアクセスがまだありません。PageSpeed Insightsで大きく指摘される項目だけを直し、記事を増やすほうに時間を使います。
診断結果
先に実測値を見ます
点数が低くても、実測値が良好なら困っていない可能性があります。Search Consoleのウェブに関する主な指標を開いてから判断してください。
Core Web Vitalsが良好なら、直さなくていい
3つとも基準内に入っているなら、それ以上の最適化は後回しで構いません。点数を伸ばす作業に時間を使うより、ほかにやることがあります。
Googleの説明では、Core Web Vitalsはランキングで考慮される要素の1つです。一方で、検索の評価で中心になるのは、内容が検索した人の役に立つかどうかです。良好に収まった時点で、時間を記事の側に回してください。
直す順番は、流入の多さで決める
数値の悪いページが複数あっても、すべてを一度に直す必要はありません。流入の多いページから手を付けます。
アクセスのほとんどないページを速くしても、その速さを体験する人がいません。検索パフォーマンスで表示回数の多いページを確かめ、そのページが不良なら、そこから直してください。
指標を良くすること自体が目的になると、この判断を誤ります。
点数を目的にしない
PageSpeed Insightsの点数は、いくつかの項目を合わせた値です。Core Web Vitalsの3つとは別のもので、点数が低くても3つが良好なら困ることはありません。
点数を100に近づける作業は、きりなく続けられます。90点を95点にする作業と、記事を1本増やす作業なら、多くの場合は後者のほうが成果につながります。
Core Web Vitalsの指標ごとの直し方
3つの指標は原因が違うため、直し方も別々です。悪い指標を1つ選び、そこから手を付けてください。
同時に複数を直すと、どれが効いたか分かりません。直した日と内容を記録し、実測値が入れ替わるのを待ってから次に進みます。実測値は過去の一定期間のデータなので、直してすぐには数字が変わらないことにも注意してください。
LCPが遅いとき
最も多い原因は、ページ上部の大きな画像です。画像が重いと、その分だけ表示が遅れます。
当サイトでは、アイキャッチをPNGからWebPに変えています。1,777KBのPNGが72KBになり、容量は20分の1以下になりました。
ページ上部の画像には、遅延読み込みを付けないでください。後回しにすると、かえって表示が遅れます。
INPが遅いとき
JavaScriptの処理が長いと、押しても画面がすぐに反応しません。原因になりやすいのは、使っていない機能の読み込みです。
当サイトでは、プラグインを6本すべて削除し、表側で読み込むプラグインのファイルを0本にしました。使っていない目次やアクセス解析の仕組みが、全ページで読み込まれていた状態でした。
止めただけで読み込みが残ることもあるため、使わないものは削除します。
CLSが大きいとき
画像や埋め込みに寸法を書いていないと、読み込みが終わった瞬間に周りが押し下げられます。widthとheightを書けば、表示する場所が先に確保されます。
当サイトでも、問い合わせフォームの埋め込みに固定の幅を書いていて、スマホで右にはみ出していました。埋め込みは幅を外側の枠に合わせ、高さは指定しておいてください。
プラグインを入れずに直せる範囲
解説の多くは表示を速くするプラグインを勧めますが、入れなくても直せる部分があります。当サイトはプラグイン0本で運用しています。
目次や構造化データ、問い合わせフォームなどは、テーマとGASで作りました。すべてのサイトにこの形が向くわけではありませんが、内容が安定している会社のサイトなら選択肢になります。次の3つは、どのサイトでも先に済ませられる作業です。
画像の形式を変える
PNGやJPEGを、WebPに変換します。無料の変換ツールで済み、見た目はほとんど変わりません。
表示の速さを説く記事に重い画像を載せていると、内容と中身が食い違います。費用も手間もかからないので、最初に手を付ける場所です。
新しく画像を入れるときも、アップロードの前にWebPにしておくと後の手間が減ります。
画像や埋め込みに寸法を書く
すべての画像に、widthとheightを指定します。埋め込みのiframeも同じです。
WordPressの本文に入れた画像には、幅と高さが自動で入ります。テーマのファイルに直接書いたロゴや装飾の画像は自動では入らないため、自分で書き足してください。
対象は数枚のことが多く、一度書けば済む作業です。広告や動画の埋め込みは、表示する枠の大きさを先に決めておきます。
使わない読み込みを増やさない
プラグインを1つ足すたびに、専用のJavaScriptとCSSが読み込まれます。使っていないページでも読み込まれることが多く、積み上がると反応が鈍くなります。
入れる前に、その機能がテーマや既存の仕組みでまかなえないかを確かめてください。使わないと決めたものは、停止ではなく削除します。削除したあとは、表示や機能が崩れていないかを確かめてください。
Core Web Vitalsに関するよくある質問
Core Web Vitalsは、順位にどれくらい影響しますか
ランキングで考慮される要素の1つですが、それだけで順位が大きく動くものではありません。内容の質が同じくらいの競合と並んだときに、差になりうる要素です。
Googleも改善を強く勧めていますが、検索した人の役に立つ内容であることが前提です。良好に収まったら、記事の中身に時間を使ってください。悪いまま放置してよいわけではないため、不良が出たときだけ手を入れれば足ります。
Search Consoleに、データが表示されません
アクセスが少ないと、実測値を出すのに必要なデータが集まりません。新しいサイトでは、よくある状態です。
この段階では、参考値を見て、明らかに悪い項目だけを直してください。アクセスが増えれば、やがて実測値が表示されるようになります。それまでは、記事を増やすほうに時間を使います。新しいサイトなら、まずは画像の形式と寸法の指定だけを済ませておけば十分です。
直したのに、数値が変わりません
実測値は、過去の一定期間に集めたデータです。直したあとのデータに入れ替わるまで、時間がかかります。
直した日を記録し、1か月ほどたってから見比べてください。その間は、参考値で直した項目の指摘が消えているかを確かめておきます。待つ間に別の箇所を直すと、どれが効いたか分からなくなる点にも気をつけてください。
表示を速くするプラグインは、入れるべきですか
効果はありますが、必須ではありません。画像の形式と寸法の指定を先に済ませ、それでも足りない場合に考えてください。
入れる場合は、入れる前と後で実測値を比べます。ほかの機能とぶつかって表示が崩れることもあるため、入れたあとはスマホでも確かめておいてください。入れたプラグインの名前と日付も、記録に残しておきます。
スマホとパソコンで、結果が違うのはなぜですか
使う人の回線や端末の性能が違うためです。スマホのほうが、回線や処理の力が弱い環境で見られることが多くあります。
Search Consoleでも、モバイルとパソコンは別々に集計されます。どちらかが不良なら、その環境で見たときに何が遅いのかを確かめてください。多くのサイトでは、スマホの結果を先に直すほうが効きます。
まとめ
Core Web Vitalsは、表示の速さ、反応の速さ、ずれにくさを測る3つの指標です。基準は、LCPが2.5秒以内、INPが200ミリ秒以下、CLSが0.1以下です。
見るのはSearch Consoleの実測値で、参考値の点数は目標にしません。3つとも良好なら直す必要はなく、悪いページがあれば流入の多いものから直します。
まずはSearch Consoleのウェブに関する主な指標を開き、不良があるかを確かめてください。