フロントエンド性能指標：LCP/FID/CLS と Core Web Vitals 実践ガイド

性能优化（更新: 2026年5月14日）

Core Web Vitals：Google の性能基準

2020 年 Google は Core Web Vitals を検索ランキングのシグナルとして導入しました。

指標 意味 良好 要改善 不良
LCP Largest Contentful Paint ≤2.5s ≤4s >4s
INP Interaction to Next Paint ≤200ms ≤500ms >500ms
CLS Cumulative Layout Shift ≤0.1 ≤0.25 >0.25

2024 年 3 月、INP が FID に代わり新しいインタラクティブ性指標になりました。

LCP：最大コンテンツの描画

LCP とは

LCP はページ上の最大の可視コンテンツ要素が描画されるまでの時間です。典型的には：

  • 画像（<img>）
  • 背景画像（CSS background-image）
  • テキストブロック（<p>、<h1>）
  • <video> のポスター

LCP の 4 段階

TTFB → リソース読み込み遅延 → リソース読み込み時間 → 要素描画遅延
  ↑          ↑              ↑              ↑
サーバー      <link rel="preload">    CDN 距離     クリティカル CSS/フォント
応答時間    優先度/プリロード          /圧縮       レンダリングブロック

最適化の方針

1. TTFB の最適化

ToolsKu の TTFB: ~50ms（CDN が静的 HTML を直接返す）
SSR サイトの例: 200–500ms（サーバーで毎回レンダリング）

静的エクスポート + CDN は自然に TTFB を下げます。

2. 重要リソースのプリロード

<link rel="preload" href="/fonts/geist-sans.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/i18n/toolClients/zh-CN.json" as="fetch" crossorigin />

ToolsKu は layout.tsx でツールクライアント JSON をプリロードしています。

3. フォント最適化

// next.config.ts - Google Fonts CDN ではなく npm パッケージのフォント
// 注意：一部地域では fonts.googleapis.com が ECONNRESET になりやすい
import { GeistSans } from 'geist/font/sans';

4. 画像最適化

ツールサイトでは LCP は多くの場合ヒーローテキストです。ブログの画像には：

<img
  src="photo.webp"
  loading="eager"     <!-- LCP 画像は lazy にしない -->
  fetchpriority="high"
  decoding="async"
/>

INP：インタラクションから次の描画まで

FID から INP へ

FID は最初の入力遅延のみ。INP はすべてのインタラクションの全周期を測ります。

ユーザーのクリック/キー入力
     ↓
入力イベント開始
     ↓
イベントハンドラ（JS）
     ↓
スタイル/レイアウト
     ↓
ペイント
     ↓
INP = 入力開始からペイント完了まで

よくある INP の問題

メインスレッドの長いタスク

// 悪い例：同期の重い処理でメインスレッドをブロック
function processData(data) {
  const result = heavyComputation(data); // ~500ms ブロック
  updateUI(result);
}

// 良い例：チャンク分割または Worker
async function processData(data) {
  const result = await processInWorker(data);
  updateUI(result);
}

React の再レンダリング

// 悪い例：フィルタで全リスト再レンダリング
setFilter(keyword); // 1000 カードが全部再描画

// 良い例：仮想化 + useMemo
const filtered = useMemo(
  () => tools.filter(t => t.name.includes(keyword)),
  [tools, keyword]
);

ToolsKu の INP 最適化

  1. ビルド時検索インデックス：tools-search/zh-CN.json を生成し、全ツール走査を回避
  2. Worker で WASM：FFmpeg.wasm をメインスレッド外で実行
  3. React.lazy：ツールページをオンデマンド読み込み、メインバンドルを縮小

CLS：累積レイアウトシフト

CLS の計算

CLS = Σ (影響率 × 移動距離率)

影響率：シフトした要素がビューポートに占める割合
移動距離率：移動距離がビューポートサイズに対する割合

よくある CLS の原因

原因 例 対策
寸法なし画像 <img src="..."> width/height または aspect-ratio
遅延注入 広告・おすすめ スペース確保（min-height）
Web フォント FOIT 非表示→表示の切り替え font-display: swap + メトリック調整
非同期 UI 検索・モーダルの遅延表示 min-height で予約

ToolsKu の CLS 対策

/* ナビの高さ固定で読み込み時のジャンプ防止 */
nav[data-tools-nav] {
  /* JS 計測後に CSS 変数で高さ設定 */
}

/* フッター高さ固定 */
:root {
  --site-footer-h: 33px;
}
body {
  padding-bottom: var(--site-footer-h);
}

計測ツール

ラボデータ

ツール 用途
Lighthouse CI 自動監査
Chrome DevTools Performance フレーム単位の分析
WebPageTest 複数地域・デバイス

フィールドデータ

ツール 用途
Chrome UX Report (CrUX) Google の実ユーザーデータ
web-vitals ライブラリ 自前 RUM
Google Search Console Core Web Vitals レポート

web-vitals で収集

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => {
  gtag('event', 'web_vital', {
    name: 'LCP',
    value: metric.value,
    rating: metric.rating,
  });
});

onINP((metric) => { /* ... */ });
onCLS((metric) => { /* ... */ });

ToolsKu の性能データ

Lighthouse（4 倍スローダウンシミュレーション、デスクトップ）：

指標 値 評価
Performance 95 🟢
LCP 1.2s 🟢 Good
INP 80ms 🟢 Good
CLS 0.02 🟢 Good
TTFB 50ms 🟢 Good
FCP 0.8s 🟢 Good
TTI 1.5s 🟢 Good

性能の源泉

  1. 純静的 HTML：CDN 直配信で TTFB 最小
  2. クライアント描画待ちなし：Server Components で事前レンダリング
  3. WASM の遅延読み込み：動画ツール以外では 30MB の FFmpeg を読まない
  4. フォントのローカル配信：Google Fonts CDN の遅延・失敗を回避
  5. 重要アセットのプリロード：検索インデックス、ツール JSON

最適化チェックリスト

LCP

  • LCP 要素を特定（DevTools → LCP マーカー）
  • LCP 画像・フォントをプリロード
  • CDN デプロイで TTFB を下げる
  • クリティカル CSS をインライン化
  • LCP リソースに fetchpriority="high"

INP

  • 長いタスクを特定（DevTools → Long Tasks）
  • 計算を Web Worker へ
  • 非緊急処理に requestIdleCallback
  • React: useMemo / useCallback / 仮想化

CLS

  • 画像に width + height または aspect-ratio
  • フォントに font-display: swap + size-adjust
  • 動的コンテンツ用にスペース確保
  • document.body.appendChild によるレイアウトシフトを避ける

まとめ

Core Web Vitals は SEO だけでなく、ユーザー体験の客観指標です。ToolsKu は静的エクスポート + CDN + プリロード + Worker オフロード + ローカルフォントで、LCP < 1.5s、INP < 100ms、CLS < 0.05 を実現しています。

OGプレビューツール でシェア表示を、HTTPヘッダー分析 でキャッシュ設定を確認することをおすすめします。

ブラウザローカルツールを無料で試す →

#性能#Core Web Vitals#LCP#INP#CLS