コアウェブバイタル（Core Web Vitals）とは、Googleが定義するWebページのユーザー体験指標です。LCP・INP・CLSの3つの指標の意味と、具体的な改善方法を解説します。
コアウェブバイタルとは
コアウェブバイタル（Core Web Vitals）とは、Googleが定義するWebページのユーザー体験を測定する3つの指標のことです。LCP（Largest Contentful Paint）、INP（Interaction to Next Paint）、CLS（Cumulative Layout Shift）の3つで構成され、Google検索のランキング要因の一つとして使用されています。
2021年からGoogleはコアウェブバイタルを検索ランキングの要因に組み込んでいます。つまり、表示速度や操作性が悪いサイトは、検索順位で不利になる可能性があります。特にモバイル環境では、表示速度がユーザーの離脱率に直結するため、コアウェブバイタルの改善は重要です。
3つの指標を理解する
1. LCP（Largest Contentful Paint）
LCPは、ページのメインコンテンツ（最大の画像やテキストブロック）が表示されるまでの時間を測定する指標です。『ページが読み込まれた』とユーザーが感じるタイミングを表します。目標値は2.5秒以内です。
LCPを改善するには、画像の最適化（WebP形式の使用、適切なサイズ指定）、サーバー応答時間の短縮、レンダリングをブロックするリソースの削減が効果的です。特にヒーロー画像など大きなビジュアル要素の読み込み速度が重要です。
2. INP（Interaction to Next Paint）
INPは、ユーザーの操作（クリック、タップ、キー入力）に対するページの応答性を測定する指標です。以前のFID（First Input Delay）に代わり2024年から正式に採用されました。目標値は200ミリ秒以内です。
INPを改善するには、JavaScriptの実行時間を短縮することが重要です。不要なJavaScriptの削除、コードスプリッティングによる遅延読み込み、メインスレッドをブロックする重い処理の最適化などが効果的です。
3. CLS（Cumulative Layout Shift）
CLSは、ページ読み込み中にレイアウトが予期せずズレる現象（レイアウトシフト）の程度を測定する指標です。例えば、読もうとしたテキストが突然下にずれたり、ボタンを押そうとした瞬間に別の要素が表示されたりする現象です。目標値は0.1以下です。
CLSを改善するには、画像や動画にwidthとheight属性を必ず指定する、Webフォントの読み込み時にレイアウトが崩れないようにfont-display: swapを使用する、広告や埋め込みコンテンツのスペースを事前に確保することが重要です。
コアウェブバイタルの測定方法
- Google PageSpeed Insights：URLを入力するだけで、コアウェブバイタルのスコアと改善提案を確認できる無料ツール
- Google Search Console：『ウェブに関する主な指標』レポートで、サイト全体のコアウェブバイタルの状況を確認
- Chrome DevTools：Lighthouseタブでローカル環境での測定が可能。開発中の確認に便利
ZESTAのパフォーマンス最適化
株式会社ZESTAでは、全プランでコアウェブバイタルの最適化を実施しています。画像の自動最適化、レイアウトシフトの防止、JavaScriptの最適化など、技術的な対策を標準で実施。Google PageSpeed Insightsでの高スコアを目指したサイト制作を行います。
コアウェブバイタルの改善は、SEOとユーザー体験の両方に効果的です。ZESTAでは全プランでパフォーマンス最適化を実施。表示速度の改善をお考えの方は、まずは無料相談からどうぞ。
