Core Web Vitalsとは？改善したい3つの指標
ホームページの表示の速さや使いやすさを、Googleが数字で表したものが「Core Web Vitals（コアウェブバイタル）」です。
この記事では、Core Web Vitals の3つの指標の意味と、改善の方法を解説します。
1.3つの指標で、見る人の体験を測る
| 指標 | 測っていること | 良好の目安 |
|---|---|---|
| LCP（Largest Contentful Paint） | ページのいちばん大きな要素（主な画像や見出し）が表示されるまでの時間 | 2.5秒以内 |
| INP（Interaction to Next Paint） | 押す、入力するなどの操作に、画面が反応するまでの時間 | 200ミリ秒以内 |
| CLS（Cumulative Layout Shift） | 表示の途中で、レイアウトがずれた量 | 0.1以下 |
※INPは、2024年3月に、それまでのFID（最初の操作への反応）に代わって指標になりました。
2.Core Web Vitals が大切な理由
表示が遅い、押しても反応しない、読んでいる途中で文字がずれる。どれも、見る人にとってストレスになり、ホームページから離れる原因になります。
Googleは、Core Web Vitals を、ページの体験を評価する要素のひとつとしています。見る人にとって使いやすいページにすることが、結果として、検索で評価されることにもつながります。
Core Web Vitals は、見る人が「速い」「さわりやすい」「ずれない」と感じるかを表す数字です。
3.指標ごとの改善の方法
LCP（表示の速さ）
| 悪くなる原因 | 改善の方法 |
|---|---|
| 最初に見える画像が大きい | 画像を小さく、軽くする（WebPなど） |
| サーバーの反応が遅い | キャッシュを使う、サーバーを見直す |
| フォントやCSSの読み込みが遅い | 読み込むものを減らす |
INP（操作への反応）
| 悪くなる原因 | 改善の方法 |
|---|---|
| JavaScriptが多い・重い | 使っていないコードや、外部のサービスを減らす |
| 一度に多くの処理をしている | 処理を分ける（作った人に相談） |
CLS（表示のずれ）
| 悪くなる原因 | 改善の方法 |
|---|---|
| 画像に幅と高さを指定していない | img に width と height を指定する |
| あとから広告やバナーが差し込まれる | 表示する場所の大きさを、先に確保しておく |
| フォントの切り替わり | フォントの読み込み方を見直す |
確かめ方
PageSpeed Insights や、Search Console の「ウェブに関する主な指標」で確かめられます。PageSpeed Insights の使い方は、PageSpeed Insightsの使い方で解説しています。
4.よくある質問
3つすべてが「良好」でないといけませんか？
すべて良好が理想ですが、まずは「不良」の指標から改善するのがおすすめです。
Core Web Vitals がよければ、順位は上がりますか？
ページの体験を評価する要素のひとつですが、それだけで順位が決まるわけではありません。内容が役に立つことが、いちばんの土台です。
Search Console に「データ不足」と出ます。
見に来る人が少ないと、実際の人のデータが集まらず、表示されないことがあります。
WordPressで改善できますか？
画像の軽量化、キャッシュ、プラグインの整理などで改善できることが多いです。
5.まとめ
Core Web Vitals は、表示の速さ（LCP）、操作への反応（INP）、表示のずれ（CLS）の3つの指標で、見る人の体験を表したものです。
- LCPは2.5秒以内、INPは200ミリ秒以内、CLSは0.1以下が良好の目安
- LCPは画像の軽量化、INPはJavaScriptの整理、CLSは画像の大きさの指定から
- PageSpeed Insights と Search Console で確かめる
- 「不良」の指標から改善する
まずは、PageSpeed Insights で、トップページの3つの指標を確かめてみましょう。画像の軽くし方は、WebPとは？で紹介しています。
表示の速さや、Search Console に出る問題で困っている場合は、浅草Web屋にご相談ください。