SEO

Core Web Vitalsとは?3指標の意味と、直さなくていい場合の見分け方

Core Web Vitalsとは?3指標の意味と、直さなくていい場合の見分け方

「Search Consoleに赤が出た」「LCPやCLSと言われても分からない!」と困っていませんか?

解説を読むと改善方法が並びますが、そもそも直す必要があるのかは書かれていません。

この記事では、3つの指標が測っているもの、実測値と参考値の違い、良好なら直さなくていい理由、指標ごとの原因、プラグインを使わずに直せる範囲までを解説します。

数値を見て手が止まっている方が、直す場所と後回しにする場所を切り分けられるようになります。

Core Web Vitalsの3指標が見ているもの

LCPは表示の速さで2.5秒以内、INPは反応の速さで200ミリ秒以内、CLSはずれにくさで0.1未満という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つの指標はどうなっていますか。

Core Web Vitalsが良好なら直さなくていい

数値の悪さと流入の多さという2軸で、流入が多く数値が不良なページを先に直し、流入の少ないページは直さないという優先度を示した図
流入のないページを直しても、その改善は誰にも届きません

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の指標別の直し方

LCPが遅いのは画像が重いこと、INPが遅いのはJavaScriptの処理が長いこと、CLSが大きいのは寸法を書いていないことが原因だと示した図
まとめて直そうとせず、悪い指標を1つ選んで着手します

3つは原因が違うため、対処も別々になります。悪い指標を1つ選び、そこから手を付けます。

同時に複数を直すと、どれが効いたか分かりません。リライトと同じで、変更点は1つに絞ります

LCPが遅い場合

最も多いのは画像です。ページ上部の大きな画像が重いと、そのまま表示時間になります。

このサイトでは、アイキャッチをPNGからWebPに変換しています。1,777KBのPNGが72KBになりました。形式を変えるだけで、容量が20分の1以下になっています

あわせて、ページ上部の画像には遅延読み込みを付けません。後回しにすると、かえって表示が遅れます。

INPが遅い場合

JavaScriptの処理が長いと、クリックしても画面が反応しません。原因になりやすいのは、使っていない機能の読み込みです。

このサイトではプラグインを6本すべて削除し、フロント側で読み込むプラグインのファイルを0本にしました。使っていない目次やアクセス解析のスクリプトが、全ページで読み込まれていた状態でした

CLSが大きい場合

画像や埋め込みに寸法を書いていないと、読み込みが終わった瞬間に周囲が押し下げられます。widthheight を書けば、場所が先に確保されます。

このサイトでも、問い合わせフォームの埋め込みに固定幅を書いていて、スマートフォンで右にはみ出す状態がありました。埋め込みは幅を親要素に合わせ、高さは指定しておきます

プラグインを入れずに直せる範囲

画像をWebPにすること、寸法を書くこと、読み込む順を変えること、使わない機能を消すことという4つがテーマの中だけで完結すると示した図
4つとも、テーマの編集だけで対応できます

解説の多くはキャッシュ系のプラグインを勧めますが、入れなくても改善できる部分があります。

このサイトはプラグイン0本で運用しています。SEO、目次、パンくず、構造化データ、問い合わせフォームまですべてテーマとGASで実装しています

画像の形式を変える

PNGやJPEGをWebPに変換します。無料の変換ツールで済み、見た目はほとんど変わりません。

表示速度を説く記事に重い画像を載せていると、内容と実装が食い違います。費用も手間もかからないので、ここは最初に手を付ける場所です

寸法を書く

すべての画像に widthheight を指定します。埋め込みの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のウェブに関する主な指標を開き、赤が出ているかを見るところから始まります。何も出ていなければ、記事を書く時間に回してください。

無料で
サイト診断
料金を
見る
料金を見る 無料でサイト診断