Webブラウザでアクセスしたとき、閲覧したいページが表示されるまでの時間が利用者の印象に与える影響は大きなものです。どれだけ美しいページでも、長時間待たされると表示される前に離脱してしまうかもしれません。ECサイトであれば、それが売上にも影響します。
そこで、GoogleはWebサイトの評価指標として「Core Web Vitals（コアウェブバイタル）」を提唱しています。この指標の改善がSEO（検索エンジン最適化）の対策としても重要であるため、Webサイトの運営者・開発者にとっては知っておきたい知識なのです。
Core Web Vitals とは
Core Web Vitals はWebページの「読み込み体験」「インタラクティブ性」「視覚の安定性」を重要視するもので、具体的には次の3つの指標が使われます。
1) Largest Contentful Paint（LCP）
コンテンツが表示されるまでの時間が長くなると、重いページだと感じて離脱しやすくなるため、パソコンやスマホの画面に収まる部分だけでも速やかに表示したいものです。
そこで、Webページのメインコンテンツ（ページ内にある最大のテキストブロックや画像など）が表示されるまでの時間を測る指標としてLCPがあります。
この指標が2.5秒以内であれば「良好」、2.5秒から4秒であれば「改善が必要」、4秒以上だと「遅い」と判定されます。
2) Interaction to Next Paint（INP）
メニューを押したのにそのメニューが開くまでに時間がかかる、ボタンを押したのに何も変化がないといったように、反応が遅いと閲覧者はストレスが溜まります。
そこで、開いたWebページ内で何らかの操作をしたときに、その応答時間を総合的に評価する指標としてINPがあります。
この指標が200ミリ秒以内であれば「良好」、200ミリ秒から500ミリ秒であれば「改善が必要」、500ミリ秒以上だと「遅い」と判定されます。
3) Cumulative Layout Shift（CLS）
Webページの読み込み中に、画像があとから表示されたことでボタンの位置がズレると、誤ってタップしてしまう可能性があります。
そこで、Webページの表示中に発生する、予期しないレイアウトのズレの度合いを測る指標としてCLSがあります。
この指標が0.1未満であれば「良好」、0.1から0.25であれば「改善が必要」、0.25以上だと問題があると判定されます。
これら3つの指標が揃って「良好」と判定されるWebページは、利用者が快適に閲覧できると言えます。これらの指標は開発環境で測定するだけでなく、実際の利用者の環境で測定しなければなりません。
指標の測定方法2つ
Core Web Vitalsを測定するとき、さまざまな方法が用意されています。一番手軽なのは、「PageSpeed Insights」を使う方法です。まずは以下のWebサイトにアクセスします。
- https://pagespeed.web.dev/ （Google for Developers）
そして、このURLの入力欄に調査したいWebページのURLを入力し、「分析」ボタンを押します。すると、「携帯電話（スマートフォン）」と「デスクトップ」のそれぞれについて、次のように結果が表示されます。
このようにパフォーマンスやユーザー補助、SEOなどの概要が表示されるだけでなく、スクロールしていくと上記で解説したLCPやCLSなどの指標を確認できます。
もう1つの方法が、Webブラウザの「Google Chrome（以下、Chrome）」を使う方法です。Chromeには、「デベロッパーツール（DevTools）」が標準で用意されており、Chromeのアドレスバーの右側にある「…」ボタンをクリックし、「その他のツール」→「デベロッパーツール」でアクセスできます。キーボードのショートカットキーで「Ctrl + Shift + I」もしくは「Command + Option + I」でも構いません。
ここで「パフォーマンス」のタブを開くと、次のようにLCPやINP、CLSの指標が表示されます。
さらに、「Lighthouse」というタブを開いて、「Lighthouseレポートの生成」から分析する方法もあります。これを使うと、上記の「PageSpeed Insights」と同様の結果が得られます。
測定後の対応方法
単に上記の指標の値で測定するだけで終わっては意味がありません。問題があることがわかれば、それを改善する必要があります。
たとえば、画像が大きすぎてLCPの値がよくない場合は、画像のフォーマットを変更する方法が考えられます。以前にも紹介したような、WebPやAVIFなどに変換する方法もあります。
＊参考 WebP（ウェッピー）とは？次世代画像ファイル形式を解説
また、imgタグの「srcset」という属性を用いて、画面サイズに応じて最適な大きさの画像を表示するように、複数のサイズの画像を用意する方法もあります。
さらに、ヘッダー内のlinkタグの「rel」属性に「preload」という値を設定して画像を指定することで、画像を事前ダウンロードさせる方法もありますし、遅延読み込み（lazy-loading）を使う方法もあります。
また、画像の配置などでCLSの値がよくない場合は、画像に幅や高さを指定する、もしくはCSSでaspect-ratioを指定するなどの方法があります。また、JavaScriptなどで動的に挿入する場合は、プレースホルダ（空き領域）を用意しておく方法もあります。
さらに、JavaScriptのプログラムが大規模でINPがよくない場合は、不要なライブラリの削除やコードの分割、遅延読み込みによって初期のロード時間を短縮する方法があります。
もしサーバーの応答が遅い場合には、CDNの使用やレスポンスヘッダの最適化、サーバーサイドレンダリングの使用などが考えられます。
さいごに
Core Web Vitals は単なる数値ではなく、スムーズに閲覧できるようにWebサイトを構成するための指標です。最初はどのように対応すればいいのか難しく感じるかもしれませんが、最近は生成AIが便利です。上記のPageSpeed Insightsの結果をもとに、ChatGPTなどに質問すると、改善する手法をいくつか挙げてくれます。
そして、生成AIを使ってHTMLを自動的に修正することもできるようになってきました。より速く、使いやすいサイトを作るため、このような指標をうまく活用してください。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』（翔泳社）、最新刊の『ITエンジニアのフリーランス独立戦略』（インプレス）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年9月時点のものです。
