コアウェブバイタルとは?3つの指標(LCP/FID/CLS)の意味と改善方法

はじめに
この記事では、コアウェブバイタルの基本から指標の改善方法までご紹介します。
コアウェブバイタル(Core Web Vitals)とは
「ウェブバイタル」とは
「コアウェブバイタル」について理解するには、まずその前段として「ウェブバイタル」とは何かを理解する必要があります。
ウェブバイタル(Web Vitals)とは、ユーザーにウェブサイトを通じて良い体験をしてもらうこと、すなわちユーザーエクスペリエンス(UX)を改善するための概念です。バイタルとは[重要・本質]という意味で、ウェブバイタルはコンテンツの品質を向上させるための指標やアドバイスなどの情報を含みます。ウェブバイタルの指標は、たとえばサーバーの応答時間や、サイトにユーザーが最初に操作するまでの待機時間など、多岐にわたります。
コアウェブバイタルはUX改善に重要な指標
そのウェブバイタルの中心となるものが、コアウェブバイタルです。コアウェブバイタルはUX改善を目的として、Googleが定めた重要な指標です。コアウェブバイタルはGoogle検索順位の決定要因であるため、サイト運営者は常に指標を確認し、改善を行っていく必要があります。
ただしコアウェブバイタルは「低いと検索順位が落ちる」という性質のものではありません。Google検索の順位にはコンテンツの内容が重要視され、内容が充実しているものが上位となります。コンテンツが同じような内容の場合には、コアウェブバイタルが優れているものが上位に表示されるという仕組みになっているのです。
コアウェブバイタルの3つの指標

コアウェブバイタルの主な指標であるLCP、FID、CLSをご紹介しましょう。
LCPとは
LCP(Largest Contentful Paint/最大コンテンツの描画)は、ページの表示速度を計測した指標です。
指標に使われるのはテキストや画像、動画などページ内の大きなコンテンツがブラウザに表示されるまでの時間です。数値は秒単位であらわされ、数値が小さいほど評価が高いものとなります。読み込み開始からコンテンツが表示されるまで2.5秒以内である場合、LCPは優良と見なされます。
FIDとは
FID(First Input Delay/初回入力遅延)は、ユーザーの操作に対する応答性を計測した指標です。
指標には、ユーザーがページ内で最初に行ったクリックやタップなどのアクションが、実際にブラウザで実行されるまでの時間が使われます。LCPと同様に数値は秒単位であらわされ、数値が小さい=応答時間が短いほど評価が高くなる仕組みです。優れたUXのためには、FIDを100ミリ秒以内とするのが理想です。
CLSとは
CLS(Cumulative Layout Shift/累積レイアウト変更)は、レイアウトの安定性を測る指標です。
レイアウトの安定性とは簡単に言うと、「ページ内の要素が動くかどうか」を指します。たとえば画像やページのサイズが急に動く、クリック・タップしようとしている場所に急に広告画像が入ってきて予期せず別のページに飛ぶ、というような動作は「レイアウトの安定性が良くない」ということになります。このようにユーザーとして煩わしく感じるレイアウトのずれを、指標にあらわしたのがCLSです。
CLSは、ユーザーがページを閲覧していて操作していない時間に、ページ内のコンテンツがどれだけ移動したかを元に計測されます。
コアウェブバイタルを確認できるツール
・PageSpeed Insights(ページスピードインサイト):URLを入力すると、コアウェブバイタルとその他の指標、問題点などを指摘してくれるツールです。
・Google Search Console(グーグルサーチコンソール):メニュー内の「ウェブに関する主な指標レポート」にて、各指標を確認できます。
・Lighthouse(ライトハウス):Google Chromeの拡張機能で、開発者向けの評価ツールです。
その他、Web Vitals、Chrome UX Reportなどがあります。これらのツールで指標の状況をチェックしたら、数値が低い要素の改善に動きます。
LCP:低下の要因と改善方法
LCP低下の要因
LCPの低下の要因として、画像の読み込み速度が遅いことが挙げられます。コンテンツ内で大きなサイズとなるのは画像であることから、画像の読み込み速度を上げるとLCPの改善が期待できます。
LCPの改善方法
・画像サイズを適切にする
ユーザーの画面に表示されるサイズよりも大きい画像の場合、LCPは低下します。画像サイズを適切にするには、ピクセル数を合わせる、CMSを使っているのであれば適切な画像サイズになる設定を行う、といった方法があります。
・適切な画像フォーマットを選ぶ
PNGの画像形式は、画像の軽量化には適していません。風景などJPEGの方が良い画像の場合は、JPEGを選ぶと容量が軽くなります。またWebPやAVIFなどの画像形式を用いると、PNGやJPEGよりも圧縮率が高くなります。
・テキストファイル(HML、CSS、JavaScript)圧縮の有効化
サーバー側でgzip圧縮した状態でブラウザに転送すれば通信量を減らすことができ、ダウンロード時間の減少を図ることができます。現在あるブラウザはすべてgzip圧縮に対応しているため、ブラウザ側で問題なく閲覧できます。
・JavaScriptやCSSのレンダリング速度を改善する
Webページの描画に必要な時間を、レンダリング速度といいます。レンダリングに時間がかかると、その間ブラウザにはなにも表示されません。それを防ぐためには不要なコード、スペースやコメントの削除、JavaScriptの非同期化を行うといった方法があります。
・サーバーの応答速度を改善する
サーバーを入れ替えたり、レンタルサーバーの契約を見直すなどして現在のサーバーより応答速度が速くなれば改善が見込めます。
また、CDN(コンテンツ配信ネットワーク)を導入すれば、キャッシュされているコンテンツを配信するため、応答速度が改善します。
![]() | 参考コラム:CDNとは?CDNの基本からメリット・デメリット、業者選定のポイントを解説 |
FID:低下の要因と改善方法
FID低下の要因
FIDの低下にはJavaScriptが大きく関係しているため、JavaScriptの最適化を図ることがスコア改善につながります。
FIDの改善方法
・JavaScript自体の改善
JavaScriptを最小化すれば、根本的に通信量を減らせます。JavaScriptのコードの中で、使用していない処理、またスペースや行など余計な部分を取り除けば、コードの量が少なくなります。
・ウェブワーカーを使う
ウェブワーカーは、バックグラウンドでJavaScriptを実行するための手段です。特にJavaScriptに大量の処理がある場合には、バックグラウンドで実行すると処理速度の向上が期待できます。
CLS:低下の要因と改善方法
CLS低下の要因
CLSの低下要因は、画像などのコンテンツが「固定されていない」ことにあります。したがって画像や動画などのサイズの固定や読み込み順の見直しが改善策となります。
CLSの改善方法
・画像のサイズを指定する
画像の場合はwidth(横幅)とheight(高さ)を指定します。もしくはCSSでアスペクト比を指定したBOXを用いて、コンテンツの領域をあらかじめ確保するという方法もあります。
・広告や埋め込み要素の場合は十分な領域を確保する
広告や埋め込み要素、動的なコンテンツ、その他埋め込み要素の場合は、あらかじめ十分な領域を確保しておくことがレイアウトのずれ防止に有効です。具体的には、div要素にplaceholder属性を設定する、iframe要素に widthおよびheightを追加するといった方法があります。
・ウェブフォントの読み込みを改善
ウェブフォントは、ウェブページの読み込みと同時にインターネット上にあるフォントデータをダウンロードするため読み込みに時間がかかり、なおかつダウンロード完了時に画面も動きます。これを防ぐにはウェブフォントが必要なファイルを優先的にダウンロードさせる、自前のサイトにウェブフォントを用意しておく、もしくは使わないという方法が有効です。
無料シミュレータで効果測定レポートをご提供

アクセリアの「PageSpeed Insightsシミュレータ」では、SEOに適した設定を施したアクセリアのCDNサービス[Solution CDN]経由の通信と、現在公開されているサイトの通信を比較してレポートすることが可能です。レポートには数値とグラフが併記され、改善の余地がどの程度あるのか分かりやすい点が特徴です。CDNを導入していてなおかつコアウェブバイタルを改善したい場合に活用を検討してみてください。
▶「PageSpeed Insightsシミュレータ」のサービス詳細はこちらから
PageSpeed Insightsシミュレータ
まとめ
サービスにご興味をお持ちの方は
お気軽にお問い合わせください。
Webからお問い合わせ
お問い合わせお電話からお問い合わせ
平日09:30 〜 18:00
Free Service