コアウェブバイタルの改善方法|LCP・CLS・INPの対策とSEOへの影響を解説

「PageSpeed Insightsのスコアが低いけど、何から手をつければいいの?」「コアウェブバイタルって結局SEOにどう影響するの?」

そんな疑問を持つWeb担当者や事業者の方は多いのではないでしょうか。

コアウェブバイタル(Core Web Vitals)とは、Googleが定めたユーザー体験(UX)を測定するための3つの指標です。

LCP(読み込み速度)・CLS(視覚的な安定性)・INP(応答性)の3指標を改善することで、ユーザー体験が向上し、SEO評価にもプラスの影響を与えます。

本記事では、コアウェブバイタルの基本から、各指標の確認方法、WordPressでの具体的な改善手順まで、初心者にもわかりやすく解説します。

もくじ

コアウェブバイタル(Core Web Vitals)とは

コアウェブバイタル(Core Web Vitals)とは

Googleが重視するユーザー体験(UX)の指標

コアウェブバイタルとは、Googleがページのユーザー体験を評価するために定めた3つの指標の総称です。

具体的には、LCP(最大コンテンツの描画時間)、CLS(レイアウトのズレ)、INP(ユーザー操作への反応速度)の3つで構成されています。

これらの指標は、ユーザーが「ページが速く表示されるか」「表示が安定しているか」「操作にすぐ反応するか」を数値で測定するものです。

Googleは2021年からコアウェブバイタルをランキング要因の一つとして導入しています。

SEO(検索順位)への影響

コアウェブバイタルは、Googleのランキング要因の一つです。

ただし、コンテンツの質や関連性と比べると影響度は小さく、コアウェブバイタルだけで大幅に順位が変わることは少ないです。

しかし、同じ品質のコンテンツが競合している場合、コアウェブバイタルのスコアが高いサイトが優先される可能性があります。

また、ユーザー体験が悪いとページの離脱率が上がり、間接的にSEOに悪影響を与えます。

なぜ改善が必要なのか

コアウェブバイタルの改善は、SEOだけでなく、ユーザーの満足度向上にも直結します。

ページの読み込みが遅いと、ユーザーは待ちきれずに離脱してしまいます。

Googleの調査によると、ページの読み込み時間が1秒から3秒に増えると、離脱率は32%増加するとされています。

特に、スマートフォンからのアクセスが多いサイトでは、表示速度の改善が直接的にコンバージョン率の向上につながります。

コアウェブバイタルの3つの指標(LCP・CLS・INP)

コアウェブバイタルの3つの指標(LCP・CLS・INP)

LCP:最大コンテンツの描画時間

LCP(Largest Contentful Paint)は、ページ内で最も大きなコンテンツが表示されるまでの時間を測定する指標です。

LCPの合格基準は2.5秒以内です。4秒を超えると「不良」と判定されます。

最大コンテンツとは、通常はメインビジュアルの画像やH1テキストなど、ファーストビューで最も面積の大きい要素を指します。

LCPが遅い主な原因は、画像ファイルのサイズが大きい、サーバーの応答が遅い、レンダリングをブロックするリソースがあるなどです。

CLS:レイアウトのズレ

CLS(Cumulative Layout Shift)は、ページの読み込み中に発生するレイアウトのズレの大きさを測定する指標です。

CLSの合格基準は0.1以下です。0.25を超えると「不良」と判定されます。

レイアウトのズレとは、ページを読んでいる最中に、画像や広告が遅れて読み込まれることで、テキストや要素の位置がずれる現象です。

ユーザーがクリックしようとした瞬間にボタンの位置がずれるなど、操作ミスの原因にもなります。

INP:ユーザー操作への反応速度

INP(Interaction to Next Paint)は、ユーザーの操作(クリック、タップ、キー入力)に対してページが反応するまでの時間を測定する指標です。

INPの合格基準は200ミリ秒以内です。500ミリ秒を超えると「不良」と判定されます。

INPは2024年3月にFID(First Input Delay)に代わって導入された新しい指標です。

FIDが最初の操作のみを測定していたのに対し、INPはページ上のすべての操作の応答性を測定するため、より正確にユーザー体験を反映します。

指標 測定内容 良好 改善が必要 不良
LCP 最大コンテンツの描画時間 2.5秒以内 2.5〜4秒 4秒超
CLS レイアウトのズレ 0.1以下 0.1〜0.25 0.25超
INP 操作への反応速度 200ms以内 200〜500ms 500ms超
サイトスピードの改善でお困りの方へ

「PageSpeed Insightsのスコアが低い」「何から改善すればいいかわからない」とお悩みではありませんか?

伊藤企画では、コアウェブバイタルの改善からテクニカルSEOまで対応しています。

まずはお気軽にご相談ください。

無料相談・お問い合わせはこちら

コアウェブバイタルを確認する方法

コアウェブバイタルを確認する方法

PageSpeed Insightsを使う

PageSpeed Insightsは、Googleが提供する無料のページ速度測定ツールです。

URLを入力するだけで、LCP・CLS・INPの各スコアと、具体的な改善提案が表示されます。

測定結果は「フィールドデータ」と「ラボデータ」の2種類があります。

フィールドデータは実際のユーザーのアクセスデータに基づく数値で、ラボデータはシミュレーション環境での測定値です。

SEOに影響するのはフィールドデータですが、アクセス数が少ないサイトではフィールドデータが表示されない場合があります。

サーチコンソールでサイト全体を確認する

Google Search Console(サーチコンソール)では、サイト全体のコアウェブバイタルの状況を確認できます。

サーチコンソールの「ウェブに関する主な指標」レポートで、「良好」「改善が必要」「不良」のURL数を一覧で確認できます。

PageSpeed Insightsが1ページずつの測定であるのに対し、サーチコンソールはサイト全体の傾向を把握するのに適しています。

サーチコンソールの使い方については以下の記事でも解説しています。

サーチコンソールでインデックスされない原因は?確認順と対処法をわかりやすく解説

合格基準(良好・改善が必要・不良)の見方

コアウェブバイタルの評価は、3段階で表示されます。

「良好(緑)」はユーザー体験が十分なレベル、「改善が必要(黄)」は改善の余地がある状態、「不良(赤)」は早急な対応が必要な状態です。

まずは「不良」のURLを優先的に改善し、次に「改善が必要」のURLに対応するのが効率的です。

すべてのURLを「良好」にする必要はなく、サイト全体の75%以上が「良好」であれば合格とされています。

LCP(読み込み速度)の改善方法

LCP(読み込み速度)の改善方法

画像のファイルサイズを圧縮する

LCPの改善で最も効果が大きいのは、画像のファイルサイズの圧縮です。

画像の圧縮は、コアウェブバイタル改善の中で最も優先度が高く、初心者でもすぐに取り組める施策です。

WordPressでは「EWWW Image Optimizer」や「ShortPixel」などのプラグインを使うことで、アップロード時に自動的に画像を圧縮できます。

目安として、1枚あたりの画像サイズは200KB以下に抑えることを推奨します。

次世代フォーマット(WebPなど)を使用する

WebPは、Googleが開発した次世代の画像フォーマットです。

WebPはJPEGやPNGと比べて25〜35%ファイルサイズが小さくなるため、LCPの改善に大きく貢献します。

WordPressでは「EWWW Image Optimizer」を使えば、既存の画像を自動的にWebP形式に変換できます。

ほぼすべての主要ブラウザがWebPに対応しているため、互換性の問題はほとんどありません。

サーバーの応答時間を改善する

サーバーの応答時間(TTFB:Time to First Byte)が遅いと、LCPにも悪影響を与えます。

TTFBの目安は200ミリ秒以内です。これを超える場合は、サーバーのスペックアップやキャッシュの導入を検討しましょう。

WordPressでは「WP Super Cache」や「W3 Total Cache」などのキャッシュプラグインを導入することで、サーバーの応答時間を大幅に短縮できます。

また、CDN(コンテンツデリバリーネットワーク)を導入することで、ユーザーに近いサーバーからコンテンツを配信し、表示速度を向上させることも可能です。

テクニカルSEOの改善でお困りの方へ

「画像の最適化やサーバー設定がよくわからない」「プラグインの選び方に迷っている」とお悩みではありませんか?

伊藤企画では、WordPressのサイトスピード改善からテクニカルSEOまで対応しています。

まずはお気軽にご相談ください。

無料相談・お問い合わせはこちら

CLS(視覚的な安定性)の改善方法

CLS(視覚的な安定性)の改善方法

画像や動画にwidthとheightを指定する

CLSの改善で最も基本的な対策は、画像や動画にwidthとheight属性を指定することです。

widthとheightを指定することで、ブラウザが画像の読み込み前に表示領域を確保し、レイアウトのズレを防ぎます。

WordPressでは、メディアライブラリから画像を挿入すると自動的にwidthとheightが設定されます。

ただし、CSSで「width: 100%」と指定している場合は、heightも「auto」に設定しておく必要があります。

広告や埋め込みコンテンツの領域を確保する

広告バナーやYouTubeの埋め込みなど、外部コンテンツの読み込みが遅れるとレイアウトのズレが発生します。

広告や埋め込みコンテンツを配置する場所には、あらかじめCSSで固定サイズの領域を確保しておくことが重要です。

具体的には、min-heightプロパティを使って最小の高さを指定するか、aspect-ratioプロパティでアスペクト比を固定します。

これにより、コンテンツが読み込まれる前から表示領域が確保され、レイアウトのズレを防ぐことができます。

Webフォントの読み込みを最適化する

Webフォントの読み込みが遅いと、テキストが一時的に非表示になったり、フォントが切り替わる際にレイアウトがずれたりします。

font-display: swapを設定することで、Webフォントの読み込み中はシステムフォントで表示し、読み込み完了後に切り替えることでCLSを軽減できます。

また、使用するWebフォントの種類を最小限に抑えることも効果的です。

日本語フォントはファイルサイズが大きいため、必要なウェイト(太さ)だけを読み込むようにしましょう。

INP(応答性)の改善方法

INP(応答性)の改善方法

不要なJavaScriptを削減する

INPの改善で最も効果的なのは、不要なJavaScriptの削減です。

使っていないプラグインやトラッキングスクリプトを削除するだけで、INPが大幅に改善するケースが多いです。

WordPressでは、使っていないプラグインを無効化・削除することが最初のステップです。

また、「Asset CleanUp」などのプラグインを使えば、特定のページで不要なCSSやJavaScriptの読み込みを無効化できます。

メインスレッドの処理を軽くする

ブラウザのメインスレッドが重い処理で占有されると、ユーザーの操作に対する反応が遅くなります。

JavaScriptの処理を分割し、長時間実行されるタスクを50ミリ秒以内に分割することで、メインスレッドの負荷を軽減できます。

WordPressの場合、テーマやプラグインが読み込むJavaScriptが原因であることが多いため、不要な機能を無効化することが有効です。

また、JavaScriptの読み込みをdefer属性やasync属性で遅延させることも効果的です。

ブラウザのキャッシュを活用する

ブラウザキャッシュを適切に設定することで、2回目以降のアクセス時にリソースの再ダウンロードを省略し、応答速度を向上させます。

キャッシュの有効期限は、静的リソース(画像・CSS・JavaScript)は1年、HTMLは1時間程度に設定するのが一般的です。

WordPressでは、キャッシュプラグインを導入することで、ブラウザキャッシュの設定を簡単に行えます。

サーバー側の.htaccessファイルでキャッシュヘッダーを設定する方法もあります。

改善施策 対象指標 難易度 効果 優先度
画像の圧縮 LCP 最優先
WebP形式への変換 LCP
width/height属性の指定 CLS
不要プラグインの削除 INP
キャッシュプラグインの導入 LCP・INP
サーバーのスペックアップ LCP
CDNの導入 LCP
JavaScript の遅延読み込み INP
Webフォントの最適化 CLS

まとめ

コアウェブバイタルは、Googleが定めたユーザー体験を測定するための3つの指標(LCP・CLS・INP)です。

改善の優先順位は「画像の圧縮・WebP変換」→「width/height属性の指定」→「不要プラグインの削除」→「キャッシュの導入」の順で進めるのが効率的です。

PageSpeed Insightsやサーチコンソールで現状を確認し、「不良」のURLから順番に対応していきましょう。

コアウェブバイタルの改善は、SEO内部対策の一環として重要な施策です。

SEO内部対策の全体像については以下の記事で解説しています。

SEO内部対策とは?初心者向けにやること一覧と優先順位をわかりやすく解説

よくある質問(FAQ)

コアウェブバイタルを改善すれば必ず順位は上がりますか?

コアウェブバイタルの改善だけで順位が大幅に上がることは少ないです。

コアウェブバイタルはランキング要因の一つですが、コンテンツの質や被リンクなど他の要因と比べると影響度は小さいとされています。

ただし、ユーザー体験の向上は離脱率の低下やコンバージョン率の向上につながるため、間接的にSEOにプラスの効果があります。

WordPressプラグインだけで全て解決できますか?

多くの改善はプラグインで対応可能ですが、すべてをプラグインだけで解決するのは難しい場合があります。

画像の圧縮やキャッシュの設定はプラグインで簡単に対応できますが、テーマのコード修正やサーバー設定の変更が必要な場合もあります。

まずはプラグインでできる範囲から対応し、それでも改善しない場合は専門家に相談することをおすすめします。

どの指標から優先して改善すべきですか?

まずはLCP(読み込み速度)から改善するのがおすすめです。

LCPは画像の圧縮やWebP変換など、初心者でもすぐに取り組める施策で大きな改善が見込めるため、最優先で対応しましょう。

次にCLS(レイアウトのズレ)、最後にINP(応答性)の順で対応するのが効率的です。

PageSpeed Insightsのスコアは何点以上を目指すべきですか?

PageSpeed Insightsのスコアは、モバイルで50点以上、デスクトップで80点以上を目安にしましょう。

ただし、スコアの数値よりも、LCP・CLS・INPの各指標が「良好」の基準を満たしているかどうかが重要です。

スコアが低くても各指標が「良好」であれば、SEOへの悪影響はほとんどありません。

コアウェブバイタルの測定結果がページごとに異なるのはなぜですか?

ページごとにコンテンツの構成や読み込むリソースが異なるため、測定結果もページごとに変わります。

画像が多いページはLCPが遅くなりやすく、広告が多いページはCLSが悪化しやすいなど、ページの特性によって影響を受ける指標が異なります。

サーチコンソールでサイト全体の傾向を確認し、問題のあるページを特定して個別に対応しましょう。

モバイルとデスクトップで結果が違うのはなぜですか?

モバイルとデスクトップでは、端末の処理能力やネットワーク速度が異なるため、測定結果も異なります。

一般的にモバイルの方がスコアが低くなる傾向がありますが、Googleはモバイルファーストインデックスを採用しているため、モバイルのスコアを優先して改善しましょう。

モバイルでの表示速度を改善すれば、デスクトップのスコアも自然と向上するケースが多いです。

関連記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする