Webサイトの「速さ」は、ユーザー体験だけでなく検索順位にも影響します。Google が提唱する Core Web Vitals は、その速さと快適さを定量化するための3つの指標です。本記事では、各指標の意味と具体的な改善策を実務目線で解説します。
3つの指標
| 指標 | 測るもの | 良好の目安 |
|---|---|---|
| LCP Largest Contentful Paint | 最大要素の表示完了までの時間（読み込みの速さ） | 2.5秒以内 |
| INP Interaction to Next Paint | 操作に対する画面反応の速さ（応答性） | 200ms以内 |
| CLS Cumulative Layout Shift | 表示中のレイアウトのズレ量（視覚的安定性） | 0.1以下 |
LCP（読み込みの速さ）を改善する
LCP の対象は多くの場合、ファーストビューの大きな画像やヒーローテキストです。改善の定番は次の通りです。
- 画像の最適化：WebP / AVIF など軽量フォーマットを使い、適切なサイズで配信する。
- 重要リソースの先読み：
<link rel="preload">やpreconnectで初動を早める。 - 遅延読み込み：ファーストビュー外の画像に
loading="lazy"を付与する。 - CDN とキャッシュ：配信距離を縮め、再訪問を高速化する。
INP（応答性）を改善する
クリックや入力に対する反応が遅いと、ユーザーは「固まった」と感じます。主因は重いJavaScriptがメインスレッドを占有することです。
- JavaScriptの分割：コード分割（code splitting）で初期読み込みを軽くする。
- 長いタスクの分割：重い処理を細かく区切り、操作に割り込む余地を作る。
- 不要な処理の削減：使っていないライブラリやサードパーティスクリプトを見直す。
CLS（視覚的安定性）を改善する
読み込み中にボタンや画像が突然動くと、誤タップやストレスの原因になります。
- 画像・動画にサイズを明示：
width/height属性で表示領域を予約する。 - 広告・埋め込み枠を確保：後から挿入される要素のスペースをあらかじめ取る。
- Webフォントの工夫：
font-display: swapなどで文字のちらつきを抑える。
計測ツール
改善は「計測」から始まります。代表的なツールを使い分けましょう。
- PageSpeed Insights：URLを入れるだけでスコアと改善提案を確認できる。
- Lighthouse（Chrome DevTools内蔵）：開発中のローカル環境で詳細に診断。
- Search Console：実ユーザーのデータ（フィールドデータ）で全体傾向を把握。
まとめ
Core Web Vitals は、LCP（速さ）・INP（応答性）・CLS（安定性）という3つの観点でユーザー体験を数値化します。いずれも「まず計測し、ボトルネックを特定してから手を打つ」のが鉄則です。体感品質の改善は、離脱率の低下や検索評価の向上にもつながります。
サイトやシステムのパフォーマンス改善でお困りの際は、お問い合わせよりお気軽にご相談ください。
よくある質問（FAQ）
Core Web Vitals の3つの指標と良好の目安は何ですか？
LCP（最大要素の表示完了までの時間、読み込みの速さ）は2.5秒以内、INP（操作に対する画面反応の速さ、応答性）は200ms以内、CLS（表示中のレイアウトのズレ量、視覚的安定性）は0.1以下が良好の目安です。
FID は INP に置き換わったのですか？
はい。応答性の指標は2024年に従来の FID（First Input Delay）から INP（Interaction to Next Paint）へ置き換えられました。INP は最初の操作だけでなく、ページ滞在中のすべての操作の反応速度を評価します。
Core Web Vitals の計測にはどんなツールを使えばよいですか？
URLを入れるだけでスコアと改善提案が見られる PageSpeed Insights、Chrome DevTools 内蔵で開発中のローカル環境を詳細に診断できる Lighthouse、実ユーザーのフィールドデータで全体傾向を把握できる Search Console を使い分けます。最終評価は実ユーザーのデータを重視し、ラボデータは改善作業中の素早いフィードバックに使うのが効率的です。