はじめに
ウェブサイトのパフォーマンスは、ユーザー体験とビジネス成果に直接影響します。しかし、「パフォーマンス」という言葉は抽象的で、何を測定すべきかが分かりにくいものです。2025年現在、Googleは、「Core Web Vitals」という重要な指標群を導入しました。本記事では、Web担当者が知るべきCore Web Vitalsの基礎から実践的な改善方法まで、初心者にもわかりやすく解説します。ぜひ学んでいきましょう。
Core Web Vitalsとは
Core Web Vitalsとは、Googleが定義したウェブページの品質を測定するための3つの重要な指標のことです。これらはページの読み込み速度、インタラクティブ性、視覚的安定性を評価します。具体的には以下の3つの指標で構成されています：
- Largest Contentful Paint (LCP) - 読み込み性能
- Interaction to Next Paint (INP) - インタラクティブ性
- Cumulative Layout Shift (CLS) - 視覚的安定性
これらの指標は、ユーザー体験の質を数値化し、改善すべき点を特定するのに役立ちます。Googleは各指標について「良好」、「改善が必要」、「不良」という3段階の評価基準を設けています。
Core Web Vitalsの重要性
なぜCore Web Vitalsが重要なのでしょうか？主に3つの理由があります：
- ユーザー体験の向上: 速く、応答性が高く、安定したウェブサイトは、ユーザーの満足度を高めます。
- 検索エンジン最適化(SEO): Googleは検索ランキングの要素としてCore Web Vitalsを利用しています。良好なスコアを持つサイトは、検索結果で優位に立てる可能性があります。
- ビジネス成績の向上: 優れたユーザー体験は、コンバージョン率、ページ滞在時間、リピーター率などのビジネス指標の向上につながります。
各指標の詳細解説
Largest Contentful Paint (LCP)
LCPは、ページの主要コンテンツがどれだけ早く表示されるかを測定します。具体的には、ビューポート内で最も大きな要素（画像やテキストブロックなど）が表示されるまでの時間を計測します。
目標値: 良好なLCP値は2.5秒以下です。
例: ニュースサイトのトップ画像や、ECサイトの商品画像などがLCPの対象となることが多いです。ユーザーがページを開いてから、これらの重要な要素が表示されるまでの時間が短いほど、ユーザー体験は向上します。
Interaction to Next Paint (INP)
INPは、ユーザーの操作（クリックやタップなど）に対して、ページがどれだけ迅速に応答するかを測定します。これは以前のFirst Input Delay (FID)に代わる指標として導入されました。
目標値: 良好なINP値は200ミリ秒未満です。
例: ユーザーがナビゲーションメニューをクリックしてから実際にメニューが開くまでの時間や、フォームの送信ボタンを押してから反応があるまでの時間などが含まれます。応答が速いほど、サイトは「軽快」と感じられます。
Cumulative Layout Shift (CLS)
CLSは、ページ読み込み中または読み込み後に、予期せぬレイアウト変化がどれだけ発生するかを測定します。コンテンツが突然移動すると、ユーザーが間違ったボタンをクリックしてしまうなど、不便な体験につながります。
目標値: 良好なCLS値は0.1未満です。
例: ページ読み込み中に広告が挿入されてテキストが下にずれる、または画像が後から読み込まれてボタンの位置が変わるといった現象です。こうしたシフトが少ないほど、ページは安定して使いやすいと感じられます。
PageSpeed InsightsとSearch Consoleで測定する方法
PageSpeed Insightsの使い方
- PageSpeed Insightsにアクセスします。
- 分析したいウェブページのURLを入力して「分析」ボタンをクリックします。
- モバイルとデスクトップの両方のデータが表示されます。
- 「実際のユーザーがどのように使用しているかを確認する」セクションでCore Web Vitalsのスコアを確認できます。
- 「パフォーマンスの問題を診断する」セクションで具体的な改善策を確認できます。
Search Consoleの使い方
- Search Consoleにログインします。
- 左側のメニューから「WEBに関する主な指標」レポートを選択します。
- モバイルとデスクトップのデータが別々に表示されます。
- 問題のあるURLをクリックすると、どの指標に問題があるかを確認できます。
- グループごとに問題点と影響を受けているページを確認できます。
各指標の低下原因と改善方法
LCPを改善する方法
主な低下原因:
- サーバー応答時間の遅延
- レンダリングをブロックするリソース（CSS、JavaScript）
- 大きな画像ファイル
- ウェブフォントの読み込み遅延
改善方法:
- サーバー応答時間の最適化:
- サーバーのアップグレードやCDN（コンテンツ配信ネットワーク）の導入
- データベースクエリの最適化
- キャッシュの活用
- リソースの最適化:
- 重要ではないJavaScriptの遅延読み込み
- クリティカルCSSの最適化（重要なCSSのインライン化）
- 不要なライブラリの削除
- 画像の最適化:
- 適切な画像形式の使用（WebP、AVIF）
- 画像の圧縮
- 遅延読み込みの実装（ただしLCP対象の画像は除く）
- 画像サイズの最適化（width/height属性の指定）
- プリロードの活用:
- 特定の要素を優先して読み込む設定
<link rel="preload" href="/path/to/hero-image.webp" as="image" fetchpriority="high">INPを改善する方法
主な低下原因:
- 長時間実行されるJavaScript
- 複雑なDOM操作
- イベントリスナーの過剰な使用
- メインスレッドの過負荷
改善方法:
- 長時間タスクの分割:
- 大きなJavaScriptタスクを小さなタスクに分割
- setTimeout、requestIdleCallbackの活用
- Web Workersの使用（バックグラウンド処理向け）
- イベントコールバックの最適化:
- デバウンスやスロットリングの実装
- 複雑な処理を遅延実行
- 効率的なDOMアクセスパターンの採用
- サードパーティスクリプトの管理:
- 必要最小限のサードパーティスクリプトに絞る
- スクリプトの遅延読み込みの実装
- Resource Hintsの活用（dns-prefetch、preconnect）
CLSを改善する方法
主な低下原因:
- サイズ指定のない画像
- 寸法のない広告や埋め込み要素
- 動的に挿入されるコンテンツ
- ウェブフォントの読み込み
改善方法:
- 画像とメディアへのサイズ指定:
<img src="image.jpg" width="640" height="360" alt="説明">
- 広告のためのスペース確保:
- 広告用のコンテナに固定サイズを設定
- スタイルでmin-heightを指定
- コンテンツの動的追加に注意:
- 新しいコンテンツを追加する際は、画面下部など影響の少ない場所に追加
- バナーやポップアップには固定位置を使用
- 「もっと見る」ボタンなど、ユーザーアクションに基づいた追加
- フォントの最適化:
- font-display: optionalやswapの使用
- フォントのプリロード
- システムフォントの活用
具体的な実装例
LCPの改善例（重要画像のプリロード）
<!-- HEAD内に追加 -->
<link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">
<!-- HTML内で正しく寸法を指定 -->
<img src="/images/hero.webp" width="1200" height="600" alt="メインビジュアル">
INPの改善例（イベントハンドラの最適化）
// 改善前：繰り返し実行される高負荷処理
button.addEventListener('click', () => {
const results = performHeavyCalculation();
updateUI(results);
});
// 改善後：処理を分割して実行
button.addEventListener('click', () => {
// UIの即時更新
showLoadingIndicator();
// 処理を次のフレームに遅延
setTimeout(() => {
const results = performHeavyCalculation();
updateUI(results);
hideLoadingIndicator();
}, 0);
});
CLSの改善例（画像のアスペクト比保持）
/* 画像コンテナのスタイル */
.image-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
まとめ
Core Web Vitalsは、ユーザー体験の質を測定し改善するための重要な指標です。各指標の改善はバラバラに行うものではなく、総合的なウェブサイトのパフォーマンス向上を目指すべきです。
最も効果的な改善アプローチ:
- 現状を把握する: PageSpeed InsightsやSearch Consoleで現在の状態を分析します。
- 優先順位をつける: 最も問題のある指標から改善に取り組みます。
- 段階的に実装する: すべての改善を一度に行おうとせず、影響の大きなものから順に実装します。
- 継続的にモニタリングする: 改善後も指標が悪化していないか定期的に確認します。
- ユーザー体験を常に最優先する: 技術的な改善だけでなく、実際のユーザーにとって使いやすいウェブサイトを目指します。
Webマーケティングの専門知識がなくても、これらの基本的な原則を理解し適用することで、ウェブサイトのパフォーマンスとユーザー体験は大幅に向上します。Core Web Vitalsの改善は、検索エンジン最適化だけでなく、コンバージョン率の向上やブランド価値の強化にもつながる重要な投資です。ぜひ改善していきましょう。