Core Web Vitals ってなんだっけ？その意味と基本的な改善方法

Webサイトのパフォーマンスを改善したい時、「Core Web Vitals（コアウェブバイタル）」という言葉が出てくると思います。私はしばしば 「CLS ってなんだっけ？」「LCPの問題とは？」と思うことがあるためここにまとめていきます。

Core Web Vitalsとは？

Core Web Vitals は、Googleが発表した「ユーザー体験の良さを測る3つの指標」を指します。

Google には、「ユーザー体験がどれほど優れているWebサイトか」を判断するための目安となる「Web Vitals（ウェブに関する指標）」を提供していますが、その中で最も重要な指標に絞っているのが Core Web Vitals （ウェブに関する主な指標）です。

サーチコンソールを使用していれば、この数値がよくない場合「改善が必要なURL」や「不良URL」として表示されます。

SEO対策として、Core Web Vitals の改善に取り組むのは優先順位を考えた方がいいかもしれません。検索ランキング要因の一つにはなっていますが、SEOでは一貫してコンテンツの質が最優先事項となっています。非常に遅いサイトの場合、改善して検索順位が良くなるかもしれません。しかしある程度SEO対策を行なっており、指標もそこまで悪くないのであれば他の施策をした方がよさそうです。

数値にとらわれすぎず、UX（ユーザー体験）を高めて使いやすいサイトにすることを心がけていきましょう。

【3つの指標の詳細】数値が良くない原因と改善

Core Web Vitals は現在、LCP、INP、CLS の3つで構成されています。一つ一つを段階的に、優先順位をつけて改善してきましょう。

LCP（Largest Contentful Paint）- 表示速度

LCPは、ページの表示速度の指標です。
ページにアクセスしてから、最大コンテンツが表示されるまでの時間を指します。

この「最大コンテンツ」というのはページによって異なります。
このサイトで確認してみたところ、トップページではファーストビューのテキスト要素、記事ページではアイキャッチ画像でした。

デベロッパーツールのパフォーマンスから確認できます。「LCP要素 p」の「p」の部分をクリックするとその場所が下記画像のように表示されます。

【良い・悪いの数値基準】

• 良い：2.5秒以内
• 改善が必要：2.5〜4.0秒
• 悪い：4.0秒以上

よくある原因と改善

【原因一例】

• 重い画像ファイル（サイズが大きい、未圧縮）
• サーバーの応答が遅い
• CSSやJavaScriptの読み込みが重い
• 不要なプラグインが多い

【改善例】

• 画像をWebP形式への変換や適切なサイズへ変更、圧縮。
• 遅延読み込み（lazy loading）の実装。
• CDNの導入。
• キャッシュプラグインの活用。
• 不要なプラグインの削除
• 高速なホスティングサービスへの変更。

INP（Interaction to Next Paint）- 反応速度

INPは、ユーザーの応答性を示す指標です。
ボタンをクリック/タップしたりフォームに入力するなど、何かしら操作をした時に、どのくらい早く反応しているかを測定します。

【良い・悪いの数値基準】

• 良い：200ms以内
• 改善が必要：200ms〜500ms
• 悪い：500ms超

※200ms → 0.2秒

よくある原因と改善のヒント

【原因一例】

• 重いJavaScriptの処理
• メインスレッドのブロック
• 大きなDOMサイズ
• サードパーティスクリプトの影響
• ページ上の要素が多すぎる
• 大量のプラグインが同時動作

【改善例】

• 不要なスクリプトの削除・遅延読み込み
• jQuery依存の削減
• アニメーションの最適化
• サードパーティスクリプトの見直し（Google Analytics、広告など）
• コンテンツの整理、遅延読み込みの活用
• プラグインの見直し、軽量な代替手段の検討

CLS（Cumulative Layout Shift）- 視覚的安定性

CLSは、視覚的な安定性を示す指標です。
「累積レイアウト変更」と難しい言葉で表されますが、表示されたページでユーザーが意図しない形でのレイアウト変更がどれだけあるかを測定します。

広告や別の要素が、何かクリックしようとした時にパッと表示されたりする体験をしたことがある人も少なからずいるのではないでしょうか。これはユーザー体験が良いものとは言えないですよね。
後から読み込まれるフォントによって文字位置がズレる場合や大きく表示されていた画像が小さくなることも意図しないレウアウトシフトとなることがあります。

【良い・悪いの数値基準】

• 良い：0.1未満
• 改善が必要：0.1〜0.25
• 悪い：0.25超

よくある原因と改善のヒント

【原因一例】

• 画像に幅と高さが指定されていない
• 広告・埋め込みコンテンツの遅延読み込みやサイズ未指定
• Webフォントの読み込み方法
• 動的に追加されるコンテンツ

【改善例】

• HTMLで画像の幅・高さを明示的に指定
• 広告など埋め込みのスペースは事前に確保しておく。
• フォント読み込みの最適化。font-displayプロパティの設定やlinkタグに rel="preload" を追加するなど
• アスペクト比を設定しておく

Core Web Vitals の測定ツール

PageSpeed Insights

Google Search Console は1ページの評価ではなく、ユーザーエクスペリエンスが類似していると判断されたページのグループの評価です。ページ単位で見ると評価は悪くないといったこともあるかもしれません。

Chrome DevTools（開発者ツール）は F12 または Cmd + Option + I で開きます。
「パフォーマンス」タブでは「Lighthouse」タブを選択し「分析」ボタンをクリックすると、PageSpeed Insights のように結果が表示されます。
開発中のリアルタイム確認もできますし、ローカル環境での確認もできます。

WordPressサイトでの基本的な改善チェック

私はWordPressのサイトをよく取り扱うので、ここではWordPressを使っている場合の見直しポイントをご紹介します。

プラグインやテーマの選択だけでも改善できる場合もあります。

画像最適化

WebPなどファイルサイズが比較的軽い画像形式への変換（プラグインで対応可能）、適切なサイズにリサイズすることも検討してみてください。

すぐに表示させなくて良いものは遅延読み込み（Lazy Loading）を設定しておくと表示速度が上がります。

width/height属性を必ず指定するようにしましょう。

重要な画像はpreload設定しておくのも一つの手です。

なお使っていない画像は削除しちゃいましょう。

プラグイン見直し

使っていないプラグインや機能が重複しているプラグインが複数あるなら、削除したり統合したり整理していきましょう。

アニメーションや特殊効果を実装する過度な装飾系プラグインや、SNSの埋め込みプラグインなど。パフォーマンスに影響を及ぼす可能性の高いプラグインも見直してみてください。見た目にとらわれすぎないことも大事です。

長期間更新されていない古いプラグインはありませんか？パフォーマンスの面からもセキュリティの面からも良いとは言えないため、代替のプラグインを探すか削除をおすすめします。

キャッシュ対策をしていなくてパフォーマンスに影響が出ているなら、キャッシュプラグインの導入も検討してみてください。

テーマ選び

「高速なテーマ」というのもたくさんあります。パフォーマンスを重視するテーマは、過度な装飾は付けていないシンプルなデザインが多いです。

軽量で高速なコードで作られており無料で使用できる → GeneratePress、Astra、Cocoonなど

【参考】おすすめのWordPressテーマ10選（企業向け編）【2024年最新版】

「Neve」のように「Core Web Vitals対応」と公式に最適化をうたっているテーマを選ぶのも良いかと思います。

サイトに必要な最低限の機能があるテーマを優先しつつ、定期的に更新開発が活発に行われているテーマを選ぶことも大切なポイントです。

サーバー・ホスティング

PHPバージョンを最新にしたりデータベースの最適化も行いましょう。

CloudflareなどCDNの導入したり、高速なサーバーをにすることを検討するのも一つです。

簡単な改善ステップ

1. 画像最適化プラグインの導入。
   プラグインを使わない場合、アップロードする画像サイズを過度に大きくしないように気をつけたり、不要な画像やサイズの大きい画像を修正するなど、整理してみてください。
2. キャッシュプラグインの導入。
   サイトにキャッシュがない場合、WP Super Cache などのキャッシュプラグインを入れるのが簡単です。
3. 不要なプラグインの削除。
4. Google PageSpeed Insightsでスコア確認。
5. 必要に応じてテーマやサーバーの変更を検討。

完璧を目指さなくてもOK

Core Web Vitals の数値を完璧にすることを目的とするより、ユーザーが快適にサイトを使えることが大切なポイントです。

数値にとらわれすぎず、影響の大きい項目からでも小さなことからでもできることを行なって段階的に改善していきましょう。

一度改善したら終わりではなく、定期的にチェックすることもお忘れなく。（自戒をこめて）