Core Web Vitalsって結局なに？Webサイトが遅いと言われた時の対処法

ブラウザを擬人化して、JavaScriptやPHPやPythonやイメージファイルやCSSなどを背負って重そうに歩いている

「あなたのサイト、重すぎます」

そんな辛辣な一言を受けた時、多くのWeb開発者が頭を抱えるのがCore Web Vitals（コアウェブバイタル）の改善です。Googleが2021年に導入したこの指標、実は単なる技術的な数値ではなく、「ユーザーが本当に快適だと感じるサイト」を作るための道標なんです。

Core Web Vitalsとは何者か

Core Web Vitalsは、Webページの「使いやすさ」を客観的に測る3つの重要指標です。SEOランキングにも直接影響するため、もはや無視できない存在となりました。

1. LCP（Largest Contentful Paint）

「ページの主役がいつ登場するか」

ユーザーがページを開いてから、最も大きなコンテンツ（画像、動画、テキストブロック）が表示されるまでの時間を測ります。

目標値: 2.5秒以内
体感: 「あ、このページちゃんと読み込まれてる」と感じるまでの時間
改善のカギ: 画像最適化、サーバー応答速度、不要なスクリプト削除

2. INP（Interaction to Next Paint）

「クリックしたら即座に反応してくれるか」

2024年3月にFID（First Input Delay）から置き換わった新指標。ユーザーがクリックやタップをしてから、画面が次の状態に更新されるまでの時間です。

目標値: 200ms以内
体感: ボタンを押した瞬間の「反応の良さ」
改善のカギ: JavaScript最適化、メインスレッドの負荷軽減

3. CLS（Cumulative Layout Shift）

「読んでる最中にレイアウトがズレない」

ページ読み込み中に、コンテンツが予期せずガクガク動く現象の度合いを数値化したもの。

目標値: 0.1以下
体感: 「文章読んでたのに広告が出てきてタップ位置ずれた」のイライラ度
改善のカギ: 画像・広告のサイズ事前指定、フォント読み込み最適化

実践的な改善戦略

まずは現状把握から

使うツール

Google PageSpeed Insights: 一番手軽、URLを入れるだけ
Chrome DevTools: 開発者向け詳細分析
Search Console: Googleの視点でのサイト評価

LCP改善の実践テクニック

画像最適化チェックリスト

WebP/AVIF形式への変換
適切なサイズリサイズ（表示サイズに合わせる）
遅延読み込み（lazy loading）の実装
重要な画像の事前読み込み（preload）

サーバーサイド改善

CDN導入で配信速度アップ
キャッシュ戦略の見直し
データベースクエリ最適化

INP改善の核心

JavaScript最適化の鉄則

不要なライブラリの削除
コード分割（code splitting）
Web Workersの活用で重い処理を分離

具体例: 検索機能での改善

javascript

// ❌ 重い処理をメインスレッドで実行
function heavySearch(query) {
  // 重い検索処理...
}

// ✅ Web Workerで処理を分離
const worker = new Worker('search-worker.js');
worker.postMessage({query});

CLS撲滅作戦

レイアウトシフトの主犯格

サイズ不明の画像
動的に挿入される広告
Webフォントの読み込み遅延

対策の実例

css

/* 画像のサイズを事前に確保 */
.article-image {
  width: 100%;
  height: 300px; /* 高さを指定 */
  object-fit: cover;
}

/* 広告スペースを事前確保 */
.ad-space {
  min-height: 250px;
  background: #f5f5f5;
}