ウェブサイトを開発する際、ウェブパフォーマンスがユーザーエクスペリエンス（UX）にとってどれほど重要かは誰もが知っています。
パフォーマンスとは単に「ページの読み込みが速いこと」を意味するわけではありません。
同じウェブサイトであっても、ユーザーの環境（インターネット速度、デバイスの性能など）によって読み込み速度は異なります。
また、ページの表示が速くても、次のような問題が発生する可能性があります。
- ボタンをクリックしても反応が遅い
- レイアウトが突然変わり、ユーザーに不快な体験を与える
このように、単純な速度測定だけでなく、ユーザーが実際に感じるパフォーマンス（UX）を評価することが重要です。
このため、GoogleはCore Web Vitalsというパフォーマンス指標を提供し、
これを簡単に測定できるようにするためにweb-vitalsライブラリを提供しています。
パフォーマンスがUXとSEOに与える影響
Googleによると、
- ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加
- 1秒から6秒に増加すると、離脱率が106%増加
ページの読み込みが遅いと、ユーザーが離れてしまう可能性が非常に高くなります。
さらに、Googleはウェブパフォーマンスが検索順位（SEO）にも影響を与えると発表しています。
ウェブパフォーマンスをどのように測定し、改善すればよいのでしょうか？
Googleが提唱する Web Vitals（ウェブパフォーマンス測定指標） を見てみましょう。
Web Vitalsとは？
web-vitals ライブラリは、ウェブページのパフォーマンスを測定する指標（Core Web Vitals）を簡単に収集できるようにするツールです。
- ウェブサイトのUXを定量的に測定できる
- ウェブサイトの速度、応答性、安定性を評価する主要な指標を提供
- Googleの検索ランキング（SEO）最適化にも重要な役割を果たす
| 指標 | 意味 | 成功基準 |
|---|---|---|
| LCP | メインコンテンツ（最も大きな要素）が読み込まれる時間 | 2.5秒以内 |
| FID | 初回のユーザー入力（クリック、キーボード操作）に対する応答速度 | 100ms以下 |
| CLS | レイアウトの突然の変化の程度（視覚的安定性） | 0.1以下 |
| TTFB | サーバーが最初の応答を送信するまでの時間 | 800ms以下 |
LCP(Largest Contentful Paint)
ページ内で最も大きなコンテンツ（画像、テキストなど）が読み込まれる時間を測定する指標です。
📌 LCPを改善する方法
- 画像の最適化（WebP形式の使用、next/image の活用）
- CDN（Content Delivery Network）の利用（コンテンツ配信の高速化）
- サーバーの応答速度を改善（TTFBを短縮）
✅ 目標: 2.5秒以内にLCPを完了させること！
https://web.dev/articles/lcp?hl=ja
FID(First Input Delay)
ユーザーがボタンをクリックした際に、ブラウザが応答するまでの時間を測定する指標です。
📌 FIDを改善する方法
- 不要なJavaScriptの実行を減らす（レンダリングブロックを最小化）
- Web Workerを活用してメインスレッドの負荷を軽減（バックグラウンド処理を分散）
✅ ✅ 目標: 100ms以内に抑えること！
https://web.dev/articles/fid?hl=ja
CLS(Cumulative Layout Shift)
ページ内のレイアウトが突然変化する度合いを測定する指標です。
📌CLSを改善する方法
- 画像サイズを明示する（width、height 属性を指定）
- ウェブフォントの読み込みを最適化（font-display: swap を適用）
✅ 目標: 0.1以下に抑えること！
https://web.dev/articles/cls?hl=ja
TTFB(Time to First Byte)
ユーザーがリクエストを送信してから、サーバーが最初のバイトを返すまでの時間を測定する指標です。
📌 TTFBを改善する方法
- サーバーの応答を最適化（Fastify、Golangを活用して高速化）
- APIの応答速度を向上（Gzip圧縮、Redisキャッシュを導入）
✅ 目標: 800ms以下に抑えること！
📌 Web Vitalsデータを直接測定
Web Vitalsの各指標は、実際のユーザー環境でのパフォーマンスを数値化します。
以下のデータは、特定のページで測定された例です。
✅ value: 測定された指標の値
➡ 249.7ms → この時間後にイベントが発生したことを示す
✅ FCP (First Contentful Paint)
➡ 249.7ms → 最初のコンテンツが画面に表示されるまでの時間
✅ TTFB (Time to First Byte)
➡ 6.7ms → サーバーが最初のバイトを返すまでの時間
✅ delta: 直前の値との変化量（更新可能）
➡ 初期測定値の場合、delta は value と同じ
📌 FCP (First Contentful Paint) = 249.7ms (0.25秒)
📌 TTFB (Time to First Byte) = 6.7ms (0.0067秒)
測定データをグラフで可視化する
npm install web-vitals recharts
/src
├── /components
│ ├── WebVitalsDashboard.js
│
├── /utils
│ ├── WebVitals.js
│
├── App.js
├── index.js
import { getLCP, getFID, getCLS, getTTFB } from "web-vitals"; // react
import { onLCP, onFID, onCLS, onTTFB } from 'web-vitals'; // next
export function getWebVitals(callback) {
getLCP(callback);
getFID(callback);
getCLS(callback);
getTTFB(callback);
}
import React, { useEffect, useState } from 'react';
import { getWebVitals } from '../utils/WebVitals';
import {
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
CartesianGrid,
} from 'recharts';
export default function WebVitalsDashboard() {
const [data, setData] = useState([]);
useEffect(() => {
getWebVitals((metric) => {
setData((prevData) => [
...prevData,
{
name: metric.name,
value: metric.value,
time: new Date().toLocaleTimeString(),
},
]);
});
}, []);
return (
<div>
<h2>📊 Web Vitals Dashboard</h2>
<LineChart width={600} height={300} data={data}>
<XAxis dataKey="time" />
<YAxis />
<Tooltip
formatter={(value, name, props) => [
`${props.payload.name}: ${value}ms`,
'測定値',
]}
/>
<CartesianGrid stroke="#ccc" />
<Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>
</div>
);
}
Web Vitalsの活用
- リアルタイムモニタリング
- 自動アラートシステムの構築
- TTFBが800ms以上、LCPが4秒以上の場合、Slack/Emailで自動通知！
- Slack、Discord、Emailに対応
- ユーザー別のパフォーマンス分析 & 最適化
- どの地域、ブラウザ、ネットワーク環境で遅くなるかを分析可能
- 日本、韓国、アメリカ、ヨーロッパの平均LCPを比較し、グローバル最適化
- PC vs モバイルのパフォーマンス差を分析し、モバイル最適化を適用
- SEOおよびA/Bテストの活用
- AIによるパフォーマンス予測
- AIモデルを活用し、将来のパフォーマンス低下を予測し事前に最適化を適用
- 例えば、特定の時間帯（例：ランチタイム）にトラフィックが増加する場合、キャッシュを事前に設定
Discussion