コアウェブバイタルとは？FID、LCP、CLSの改善方法もあわせて解説

WEBサイトやSEOに関わっている方であれば「コアウェブバイタル」というキーワードを聞いたことがあるのではないでしょうか。

「コアウェブバイタル」は、表示速度に関する指標です。

レスポンスの遅い（表示速度の遅い）サイトは、検索ユーザーからもGoogleからも良好な評価は獲得できません。一方、軽快に操作できるサイトは、ユーザーはもちろんのこと、検索エンジンからも評価されやすくなります。より良いサイト運営を行うためにはこの指標は避けて通れません。

この記事では、コアウェブバイタルの基本、SEOとの関係性や改善方法、チェックツールなどを幅広くご紹介します。

コアウェブバイタル以外のSEOについて興味のある方は「コアウェブバイタル（Core Web Vitals）以外にSEOに関係する要因は？」も併せてご覧ください。

SEOと関連深いコアウェブバイタル（Core Web Vitals）とは？

「コアウェブバイタル（Core Web Vitals）」を理解する前に「ウェブバイタル（Web Vitals）」という指標について簡単に触れておきましょう。

ウェブバイタルとは？

ウェブバイタルはGoogleが設定しているサイトの健全性を示す重要指標のことです。Googleの考える「優れたユーザーエクスペリエンス（UX）」を実現するための要素を意味する指標だと覚えておきましょう。

UXについては「【UI/UX】ユーザーの快適環境を実現するためのポイントを解説！」をご覧ください。

サイト上のユーザー体験を高めるために利用される指標であるため、SEO対策においても重要な意味を持ちます。ウェブバイタル指標の向上により、ユーザー体験を改善し、結果として検索上位に表示させることができるようになります。

コアウェブバイタルとは？

「コアウェブバイタル（Core Web Vitals）」とは、ウェブバイタルの中でも中心となる3つの要素のことです。頭文字をとって「CWV」と記載されることもあります。（以下「コアウェブバイタル」として記載）

その3つの要素は以下の通り。

1. FID（First Input Delay） : 最初の入力をユーザーが実行できるようになるまでの待機時間のこと。初回入力遅延と呼ばれる。
2. LCP（Largest Contentful Paint） : ページの中で最も大きな要素（キービジュアル等）が読み込まれるまでの時間のこと。
3. CLS（Cumulative Layout Shift）:  ページ読み込み中に発生するレイアウトの「ズレ」のこと。

2020年11月10日に発表されたGoogle公式ブログによると、コアウェブバイタルは2021年5月よりランキングの評価指標に組み込まれることが発表され、以降もSEO上、大切な情報が更新され続けています。

Googleの見解をかみ砕いて言うと「リンクをクリックした後、画像等を含む目的のページがスムーズに表示されて、すぐに動作が行えるサイトが良いサイト」ということです。

すでにある程度の表示速度が実現できているサイトは、それを維持するようにしましょう。極端にページ表示速度の遅いサイトは、今後、検索順位変動などで影響を受ける可能性もあるため、対策を行なった方がいいでしょう。

コアウェブバイタルの3つの指標

コアウェブバイタルがSEO上重要な意味を持つことはご理解いただけたのではないでしょうか？ここからは前述した3つの指標を理解しやすいよう、より細かく解説していきます。

LCP：ページの表示にかかる時間は短いか

LCP（Largest Contentful Paint）は、ページの表示速度を計測した指標です。「ユーザーがサイトにアクセスしてから、メインコンテンツが表示されるまでの時間」を表す指標だと覚えておきましょう。

この指標で使用されるのはテキストや画像、動画など、ページ内の大きなコンテンツがブラウザに表示されるまでの時間です。この数値は秒単位で計測され、数値が小さいほど評価が高いとみなされます。

読み込み開始からコンテンツが表示されるまでの時間が2.5秒以内である場合、LCPは優良と考えられます。しかし、この時間が4.0秒以上である場合、不良と見なされてしまうため改善が必要です。

FID：ページ内機能の動作は速いか

FID（First Input Delay）は、初回入力遅延を意味する、ユーザーの操作に対する応答性を計測した指標です。この指標ではユーザーがページ内で最初に行ったクリックやタップなどのアクションが、実際にブラウザで実行されるまでの時間を計測します。

LCPと同様に数値は秒単位で計測され、数値が小さい（応答時間が短い）ほど評価が高くなります。このFIDは100ミリ秒以内とするのが理想と考えられています。

2024年3月以降、FIDに代わって、Interaction to Next Paint（INP）がコアウェブバイタルの一つになります。

FIDもINPも同じく応答性を示す指標ですが、計測対象となる範囲と時間で異なる部分があります。計測範囲としては、FIDは最初のインタラクションのみが対象です。一方、INPはページの読み込みを開始してからユーザーがページを離れるまでの全てのインタラクションが、計測の対象になります。

計測される時間だとFIDは入力遅延時間のみ。対してINPは入力遅延時間、処理時間、表示遅延時間の合計です。

そのため計測範囲、計測される時間の両軸から考えてもINPはFIDを包括していると考えることができます。

CLS：意図しない動作がどれくらい発生したか

CLS（Cumulative Layout Shift）は累積レイアウト変更を意味します。レイアウトの安定性を測る指標として活用されます。

レイアウトの安定性とは簡単に言うと「ページ内の要素が正しく動くかどうか」を指します。

例えば、

• 画像やページのサイズが急に可変する
• 画像やコンテンツがあるべき場所からズレてしまう
• クリックしようとしている場所に急に広告画像が挿入されてしまい予期せず別のページに遷移してしまう

このように、視覚的にユーザーが混乱してしまう状況は「レイアウトの安定性に課題がある」という状態です。そのため、ユーザーとして煩わしく感じるレイアウトのズレを指標としたのがCLSです。

CLSは、ユーザーがページを閲覧していて操作していない時間に、ページ内のコンテンツがどれだけ移動したかを元に計測されます。

コアウェブバイタル（Core Web Vitals）を改善するには？

コアウェブバイタルの数値に改善の余地があった場合、どのような対応を行うべきなのでしょうか？ここからは具体的な施策を交えて解説していきます。

各指標の数値は基本的にPageSpeed InsightsやLighthouseなど、Googleが提供する無料ツールで計測することが可能です。

LCP改善：画像の容量を少なくする

サイトの表示速度を低下させる最も大きな要因の1つは画像ファイルです。

画像サイズの見直し

ファイルサイズが原因で表示速度が低下しているのであれば、シンプルにサイズを見直せば問題ありません。

「とりあえず大きめの画像を用意しておけば良いだろう」とリサイズや圧縮を怠ると、表示速度が非常に重くなってしまいます。

可能な限り編集ツールを用いて画像のリサイズ・最適化を行い、適切な圧縮形式（jpg、png、gif等）で書き出すよう心がけましょう。また、Googleが開発した画像形式WebP（ウェッピー）を利用することも効果的な対策の一つです。

サイトの表示速度改善を行う際に最も取り組みやすいため、まずは画像ファイルの最適化からスタートしてみると良いでしょう。

ブラウザキャッシュの利用

画像ファイル圧縮に次いでサイト表示高速化を期待できる施策は、ブラウザキャッシュの利用です。

ブラウザキャッシュとは、一度表示したページのデータをブラウザ側に保存しておくことで、次回以降同じページを読み込む際、表示を高速化する仕組みのことです。

ちなみにレンタルサーバーを使っている場合は、デフォルトでブラウザキャッシュ設定が「ON」になっていることも多いようです。気になる方は、一度コントロールパネルからキャッシュの設定を確認してみると良いでしょう。

FID改善：不要なコードの削除

Webページを読み込み中にブラウザのメインスレッドがユーザーの操作に応答できない場合、FIDの指標に影響が発生します。画像圧縮の次にHTML・CSS・JavaScriptの圧縮・最適化に取り組みましょう。

画像ファイルほど大きな影響を与えるわけではありませんが、ソースコードを見直すことで、リクエスト数を減らせる上に、コードの見通しも良くなるため、メンテナンス性向上も期待できます。

CLS改善：画像サイズを指定

CLSはレイアウトに関係する指標です。そのため、画像や動画のサイズが指定されていないなど、ソースコードそのものを改善することが大切です。

コンテンツのサイズを指定する、動的コンテンツや広告・埋め込み要素の配置を考慮する、Webフォントの読み込みを最適化するなどが対策として挙げられます。

YouTubeの動画、Google マップの地図、ソーシャルメディアの投稿など「埋め込み要素」が適切に設定されていない場合も、レイアウトが崩れてしまうため、注意が必要です。

コアウェブバイタル（Core Web Vitals）の計測方法

コアウェブバイタルの状態を計測するためにはツールを使用します。サイト改善に役立つツールは数多くありますが、ここでは、代表的な５つのツールを中心にご紹介します。

Google Search Console

左側のメニューで、▼エクスペリエンス＞ウェブに関する主な指標を選択。モバイル、PC別でグラフが表示されます。

それぞれのグラフ右上「レポートを開く」を選択。評価項目と、その詳細を確認できます。

大まかなページ状況を「Search Console」で確認し、具体的な改善方法を後述の「PageSpeed Insights」で確認するなど、ほかのツールと組み合わせることでより効率的に問題点を洗い出せるでしょう。

PageSpeed Insights

PageSpeed Insightsは、Googleの提供するサイト表示速度チェックサービスの定番です。使い方はとても簡単で、チェックしたいサイトのURLを入力するだけですみます。

独自の指標に基づき、モバイルとPCの表示速度をスコアリングしてくれます。

スコアはあくまで目安として受け入れ、Google側から提案されたアドバイスの中で実行可能なものから修正していくような対策を行いましょう。

Yellow Lab Tools

「Yellow Lab Tools（イエローラボツール）」は、 HTML、CSS、JavaScriptといった各種コードの中身について具体的な改善策を提案してくれるチェックツールです。

PageSpeed Insights同様、100点満点で評価してくれます。

興味深いのはそのチェック項目です。例えば、CSSならコードの重複箇所、色の数、不要なベンダープレフィックスの数などかなり細かいところまで表示してくれます。

Test My Site

「Test My Site（テストマイサイト）」は、モバイルサイトの表示速度チェックを得意とするツールです。PageSpeed Insights同様、開発元はGoogleです。

チェックしたい サイトのURLを入力するだけで、簡単にチェックできます。

PageSpeed Insightsと似たような改善提案もしてくれますが、大きな違いはモバイルサイトの具体的な表示速度について「秒数」で教えてくれる点です。

Chrome DevTools 「lighthouse」

最後に紹介するのは、Googleのデベロッパーツール上で使用可能な「lighthouse（ライトハウス）」と呼ばれるチェックツールです。

ページスピードインサイトにアクセスしてURLを入力しなくても、同様の検証結果をデベロッパーツール上で確認できます。

まずは、デベロッパーツールの表示方法から確認しましょう。以下、OSによってショートカットキーが異なります。

• Macの場合 : 任意のページで「command + option + i」
• windowsの場合 : 任意のページで「F12キー」

デベロッパーツールを開いたら、右上のタブから「lighthouse」を選択します。あとは、デスクトップとモバイルどちらを検証するか選択し、「Generate Report」という青いボタンをクリックするだけ。

数十秒ほどで、デベロッパーツール上から表示速度に関する詳細な項目をチェック可能です。

コアウェブバイタルを改善し、サイト運営に役立てよう

今回は、サイトの表示速度やチェックツール、改善方法を中心に解説しました。

細部にこだわって作り上げたUI、コンテンツであっても、表示速度が遅くストレス要因の多いサイトではユーザーが離脱してしまう可能性も。これは非常にもったいない状況です。

昨今、モバイルデバイスの普及に伴い、PCと比較すると処理速度の面で劣るスマートフォンのブラウザからの閲覧も非常に多くなりました。リッチで目を惹く表現以上に、「ストレスなくスピーディーに表示されるかどうか」がウェブサイトにおける「当たり前品質」の1つとなりつつあります。

すぐに全てを改善するというのは中々難しいので、まずはコツコツとできることから始めましょう。ファイルサイズを圧縮したり、リソースの読み込みを最小限に抑えたりする等々、小さな改善を積み重ねていくことがサイト運営においては非常に大きな意味を持ちます。

Webサイト運営やSEO対策などご不明点やお悩みがありましたらぜひ一度ご相談ください。

お問い合わせはこちら