はじめに
フロントエンドのパフォーマンス測定について調べてみると、情報が断片的で「何をどう測定すればいいのか」が分かりにくいと感じませんか？
本記事では、Googleが重視するフロントエンドパフォーマンスの3つの指標「Core Web Vitals」について、概要→測定方法→改善例の順で分かりやすく解説します。
Core Web Vitalsとは？Googleが重視する3つの指標
Googleが2020年に発表した「Core Web Vitals」は、ユーザー体験を測定する3つの重要な指標です。
1. LCP（Largest Contentful Paint）- 読み込み速度
何を測定？
ページの主要コンテンツ（大きな画像やテキスト）が表示されるまでの時間
良好な値
- 良好：2.5秒以下
- 要改善：2.5秒〜4.0秒
- 不良：4.0秒超
主な影響要因
- サーバーの応答時間
- 画像サイズ・形式
- CSS・JavaScriptの読み込み
2. INP（Interaction to Next Paint）- 応答性
何を測定？
ユーザーがクリックやタップした時の応答速度
良好な値
- 良好：200ミリ秒以下
- 要改善：200ミリ秒〜500ミリ秒
- 不良：500ミリ秒超
主な影響要因
- JavaScriptの処理時間
- メインスレッドの占有状況
- DOM操作の複雑さ
3. CLS（Cumulative Layout Shift）- 視覚的安定性
何を測定？
ページ読み込み中の予期しないレイアウト変化
良好な値
- 良好：0.1以下
- 要改善：0.1〜0.25
- 不良：0.25超
主な影響要因
- サイズ未指定の画像
- 動的に挿入される広告
- Webフォントの読み込み
Chromeでの測定方法
1. Chrome DevToolsで詳細分析
基本的な使い方
- F12でDevToolsを開く
- 「Performance」タブをクリック
- 記録ボタン（●）を押してページをリロード
- 結果を確認
何が分かる？
- 各指標の詳細な内訳
- 問題の原因特定
- 改善すべき優先順位
2. PageSpeed Insightsで全体評価
使い方
- PageSpeed Insightsにアクセス
- URLを入力して分析実行
何が分かる？
- 実際のユーザーデータ（フィールドデータ）
- 改善提案
- モバイル・デスクトップ別の評価
3. Web Vitals Chrome拡張機能でリアルタイム監視
使い方
- Chrome Web Storeから「Web Vitals」拡張機能をインストール
- ページを開くだけで自動測定
何が分かる？
- リアルタイムの指標値
- 色分けによる状態表示（良好/要改善/不良）
実際の改善例
LCPの改善例
画像最適化
<!-- 改善前 -->
<img src="large-image.jpg" alt="画像">
<!-- 改善後 -->
<img src="optimized-image.webp"
width="800" height="600"
fetchpriority="high"
alt="画像">
重要リソースのプリロード
<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">
<link rel="preload" as="font" href="main-font.woff2" crossorigin>
INPの改善例
長いタスクの分割
// 改善前：重い処理でブロック
function processData(data) {
data.forEach(item => heavyProcess(item));
}
// 改善後：処理を分割
async function processData(data) {
for (let i = 0; i < data.length; i++) {
heavyProcess(data[i]);
// 50個ごとにメインスレッドを解放
if (i % 50 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
デバウンス処理
// 検索入力の最適化
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);
Web Workerで重い処理をバックグラウンド実行
// メインスレッド側
const worker = new Worker('calculation-worker.js');
function processLargeData(data) {
// 重い処理をWeb Workerに移譲
worker.postMessage({ type: 'PROCESS', data });
}
worker.onmessage = (event) => {
const { result } = event.data;
// UI更新はメインスレッドで実行
updateUI(result);
};
// calculation-worker.js
self.onmessage = (event) => {
const { type, data } = event.data;
if (type === 'PROCESS') {
// 重い計算処理をバックグラウンドで実行
const result = data.map(item => performHeavyCalculation(item));
self.postMessage({ result });
}
};
CLSの改善例
画像サイズの事前指定
/* 改善前 */
img {
width: 100%;
}
/* 改善後 */
img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
フォント読み込み最適化
@font-face {
font-family: 'MainFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* フォールバック表示 */
}
効果的な測定・改善のワークフロー
1. 現状把握
- PageSpeed Insightsで全体評価
- 最も問題のある指標を特定
2. 詳細分析
- Chrome DevToolsで原因を特定
- 改善すべき優先順位を決定
3. 改善実装
- 効果の高い改善から着手
- 一つずつ改善して効果を確認
4. 継続監視
- Web Vitals拡張機能で日常監視
- 定期的にPageSpeed Insightsで評価
まとめ
Core Web Vitalsの3つの指標を理解し、適切な測定方法と改善手法を実践することで、ユーザー体験を大幅に向上させることができます。
重要なポイント
- LCP（読み込み速度）：画像最適化とプリロードが効果的
- INP（応答性）：JavaScriptの処理分割とデバウンス処理
- CLS（視覚的安定性）：要素サイズの事前指定
パフォーマンス改善は継続的な取り組みです。まずは測定から始めて、一つずつ改善していきましょう。
参考文献
Core Web Vitals report - Search Console Help
Chrome DevTools Performance Overview