Core Web Vitals
Googleが提唱する、ユーザー体験を測定する重要な指標です。
3つの主要指標
LCP (Largest Contentful Paint)
- 目標: 2.5秒以内
- 測定内容: 最大のコンテンツが表示されるまでの時間
- 改善方法: 画像最適化、CDN使用、クリティカルCSS
FID (First Input Delay)
- 目標: 100ms以内
- 測定内容: 最初のインタラクションまでの遅延
- 改善方法: JavaScript分割、Web Worker活用
CLS (Cumulative Layout Shift)
- 目標: 0.1以下
- 測定内容: レイアウトのずれの累積
- 改善方法: 画像サイズ指定、フォント最適化
測定ツール
// Web Vitals Library
import {getLCP, getFID, getCLS} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);最適化戦略
- リソースヒント: preload, prefetch, preconnect
- 画像最適化: WebP, AVIF, lazy loading
- コード分割: Dynamic imports, Route-based splitting
関連ノート
- streaming-ssr - ストリーミングSSRによるパフォーマンス改善
- cdn-optimization - CDN最適化によるLCP改善