Webパフォーマンス最適化完全ガイド2025：Core Web Vitals、ローディング戦略、レンダリングパターン総まとめ

パフォーマンスとビジネス指標:
├── ロード3秒超過 → 53%離脱 (Google)
├── 100ms遅延 → 売上1%減少 (Amazon)
├── 500ms遅延 → トラフィック20%減少 (Google)
├── 1秒改善 → コンバージョン率7%向上 (Walmart)
└── 2秒改善 → バウンス率50%減少 (COOK)

パフォーマンスバジェット例:
├── 初期ロードJS: 200KB以下 (gzip)
├── 初期ロードCSS: 50KB以下 (gzip)
├── 全ページサイズ: 1.5MB以下
├── LCP: 2.5秒以内
├── INP: 200ms以内
├── CLS: 0.1以下
├── Time to First Byte: 600ms以内
└── リクエスト数: 50個以下

LCP対象要素:
├── img要素
├── video要素（ポスター画像）
├── CSS background-imageを持つ要素
├── テキストノードを含むブロックレベル要素
└── svg内のimage要素

<!-- 1. ヒーロー画像のプリロード -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- 2. LCP画像にfetchpriority設定 -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" loading="eager" />

<!-- 3. サーバー応答時間の最適化 -->
<!-- TTFB目標: 200ms以内 -->

/* 4. フォントローディング最適化 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

INP最適化戦略:
1. 長いタスクの分割
   - 50ms以上のタスクをより小さな単位に分割
   - requestIdleCallback、scheduler.yield()活用

2. メインスレッドの解放
   - Web Workerに重い計算を移動
   - 不要な同期JSの除去

3. イベントハンドラーの最適化
   - debounce / throttle適用
   - passiveイベントリスナー使用

// 長いタスク分割の例
async function processLargeList(items: Item[]) {
  const CHUNK_SIZE = 50;

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);

    // ブラウザにレンダリングの機会を提供
    await scheduler.yield();
  }
}

// scheduler.yieldポリフィル
if (!('scheduler' in globalThis)) {
  (globalThis as any).scheduler = {
    yield: () => new Promise(resolve => setTimeout(resolve, 0))
  };
}

<!-- CLS防止: 画像にサイズを明示 -->
<img src="/photo.webp" width="800" height="600" alt="Photo" />

<!-- CLS防止: 動的コンテンツにmin-heightを設定 -->
<div style="min-height: 250px;">
  <!-- 広告や動的コンテンツ -->
</div>

/* CLS防止: フォントローディング時のレイアウトシフト最小化 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional; /* またはswap */
  size-adjust: 100.5%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

画像フォーマット比較（同品質基準）:
├── JPEG: 100KB (基準)
├── WebP: 70KB (-30%)
├── AVIF: 50KB (-50%)
└── JXL (JPEG XL): 55KB (-45%)

ブラウザサポート (2025):
├── WebP: 97%+ (IE非対応)
├── AVIF: 92%+ (Safari 16.4+)
└── JXL: Chromeで削除、Safari/Firefoxサポート

<!-- picture要素でフォーマットフォールバック -->
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

<!-- srcsetとsizesでレスポンシブ画像 -->
<img
  srcset="
    /hero-400w.webp 400w,
    /hero-800w.webp 800w,
    /hero-1200w.webp 1200w,
    /hero-1600w.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/hero-800w.webp"
  alt="Hero image"
  width="1200"
  height="600"
  loading="lazy"
  decoding="async"
/>

<!-- ネイティブlazy loading -->
<img src="/photo.webp" loading="lazy" decoding="async" alt="Photo" />

// ブラープレースホルダーの実装
function BlurImage({ src, alt, width, height, blurDataURL }: ImageProps) {
  return (
    <div style={{ position: 'relative', width, height }}>
      {/* ブラープレースホルダー */}
      <img
        src={blurDataURL}
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          filter: 'blur(20px)',
          transform: 'scale(1.1)',
        }}
      />
      {/* 実際の画像 */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        onLoad={(e) => {
          e.currentTarget.style.opacity = '1';
        }}
        style={{ position: 'relative', opacity: 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
}

// React lazy + Suspense（ルートベース分割）
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// 条件付き動的import
async function handleExport() {
  // xlsxライブラリを必要な時だけロード
  const XLSX = await import('xlsx');
  const workbook = XLSX.utils.book_new();
  // ...
}

// 悪い例: ライブラリ全体をimport
import _ from 'lodash';
_.debounce(fn, 300);

// 良い例: 必要な関数のみimport
import debounce from 'lodash/debounce';
debounce(fn, 300);

// さらに良い例: ネイティブまたは軽量な代替を使用
// lodash.debounce: 1.4KB vs lodash: 72KB

// webpack-bundle-analyzerでバンドル分析
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Next.js config
});

// webpack splitChunks設定
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

<!-- 通常: パース をブロック -->
<script src="app.js"></script>

<!-- async: 非同期ダウンロード、即時実行（パースブロック可能） -->
<script src="analytics.js" async></script>

<!-- defer: 非同期ダウンロード、DOMパース後に実行（順序保証） -->
<script src="app.js" defer></script>

<!-- module: deferと同じ動作 -->
<script type="module" src="app.js"></script>

スクリプトローディングタイムライン:
通常:   [HTMLパース...] [ダウンロード] [実行] [HTMLパース...]
async:  [HTMLパース......ダウンロード......] [実行] [HTMLパース...]
defer:  [HTMLパース......ダウンロード.............] [実行]

<!-- Critical CSSをインライン化 -->
<head>
  <style>
    /* ファーストビューに必要な最小限のCSSのみインライン */
    body { margin: 0; font-family: system-ui; }
    .header { height: 60px; background: #fff; }
    .hero { height: 400px; display: flex; align-items: center; }
  </style>

  <!-- 残りのCSSは非同期ロード -->
  <link rel="preload" href="/styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles.css" /></noscript>
</head>

/* containでレンダリング範囲を制限 */
.card {
  contain: layout style paint;
  /* またはcontent-visibilityでオフスクリーン要素を最適化 */
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* will-changeでGPUアクセラレーションヒント */
.animated-element {
  will-change: transform;
  /* 注意: 乱用するとメモリ浪費 */
}

// PurgeCSS設定 (postcss.config.js)
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.{js,jsx,ts,tsx}',
        './public/index.html'
      ],
      defaultExtractor: content =>
        content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['html', 'body', /^data-/]
    })
  ]
};

/* swap: 代替フォント → Webフォント（FOUT発生、テキスト即時表示） */
@font-face {
  font-family: 'MyFont';
  font-display: swap;
  src: url('/fonts/myfont.woff2') format('woff2');
}

/* optional: 速ければWebフォント、遅ければ代替フォント維持（CLS最小） */
@font-face {
  font-family: 'MyFont';
  font-display: optional;
  src: url('/fonts/myfont.woff2') format('woff2');
}

<!-- コアフォントのプリロード -->
<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

/* 従来: 各ウェイト別に別ファイル（400, 500, 600, 700 = 4ファイル） */
/* Variable Font: 1ファイルで全ウェイト */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* 使用 */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }

# pyftsubsetで日本語フォントサブセット生成
# pip install fonttools brotli
pyftsubset NotoSansJP-Regular.otf \
  --text-file=japanese-chars.txt \
  --output-file=NotoSansJP-subset.woff2 \
  --flavor=woff2

# 結果: 4.5MB → 500KB（常用漢字+ひらがな+カタカナ基準）

CSRフロー:
Browser        Server
  │─ HTML要求 ────→│
  │←─ 空のHTML ────│
  │─ JS要求 ──────→│
  │←─ JSバンドル ──│
  │ [パース/実行]    │
  │─ API要求 ─────→│
  │←─ データ ──────│
  │ [レンダリング]   │
  ▼ 画面表示        ▼

SSRフロー:
Browser        Server
  │─ HTML要求 ────→│
  │               │ [データフェッチ]
  │               │ [HTMLレンダリング]
  │←─ 完成HTML ───│
  │ [画面表示]      │
  │─ JS要求 ──────→│
  │←─ JSバンドル ──│
  │ [Hydration]     │
  ▼ インタラクティブ ▼

// Next.js App Router Streaming SSR
import { Suspense } from 'react';

async function SlowComponent() {
  const data = await fetchSlowData(); // 3秒かかる
  return <div>{/* データレンダリング */}</div>;
}

export default function Page() {
  return (
    <div>
      {/* 即時レンダリング */}
      <Header />
      <Hero />

      {/* ストリーミング: 準備できたら段階的に送信 */}
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>

      {/* 即時レンダリング */}
      <Footer />
    </div>
  );
}

// Next.js ISR
// app/products/[id]/page.tsx
export const revalidate = 3600; // 1時間ごとに再生成

async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

// 静的パス生成
export async function generateStaticParams() {
  const products = await getTopProducts(100);
  return products.map(p => ({ id: p.id }));
}

HTTPキャッシュ戦略:
├── 静的アセット（JS/CSS/画像）
│   Cache-Control: public, max-age=31536000, immutable
│   （ファイル名にハッシュ含む: app.abc123.js）
│
├── HTML
│   Cache-Control: public, max-age=0, must-revalidate
│   （常にサーバー確認）
│
├── APIレスポンス
│   Cache-Control: private, max-age=60, stale-while-revalidate=300
│   （60秒キャッシュ、5分間stale許容）
│
└── ユーザー固有データ
    Cache-Control: private, no-cache
    （毎回サーバー検証）

stale-while-revalidateの動作:
リクエスト1: [キャッシュミス] → サーバー → レスポンス + キャッシュ保存
リクエスト2: [キャッシュヒット, fresh] → 即時レスポンス
リクエスト3: [キャッシュヒット, stale] → 即時レスポンス(stale) + バックグラウンド更新
リクエスト4: [キャッシュヒット, fresh] → 即時レスポンス(更新済みデータ)

// SWRライブラリ（React）
import useSWR from 'swr';

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    refreshInterval: 30000, // 30秒ごとに更新
  });

  if (isLoading) return <Skeleton />;
  if (error) return <Error />;
  return <UserCard user={data} />;
}

// Service Workerキャッシング戦略
// sw.js
const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
  '/offline.html'
];

// インストール: 静的アセットをプリキャッシュ
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache =>
      cache.addAll(STATIC_ASSETS)
    )
  );
});

// フェッチ: Cache First + Network Fallback
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;

      return fetch(event.request).then(response => {
        const clone = response.clone();
        caches.open(CACHE_NAME).then(cache =>
          cache.put(event.request, clone)
        );
        return response;
      }).catch(() => {
        return caches.match('/offline.html');
      });
    })
  );
});

CDNキャッシュ階層:
ユーザー → [ブラウザキャッシュ] → [CDN Edge] → [CDN Origin Shield] → [サーバー]

CDNヘッダー例:
静的アセット:
  Cache-Control: public, max-age=31536000, immutable
  CDN-Cache-Control: public, max-age=31536000

動的コンテンツ:
  Cache-Control: public, max-age=0, must-revalidate
  CDN-Cache-Control: public, max-age=60, stale-while-revalidate=300
  Surrogate-Control: max-age=3600

<!-- DNS Prefetch: 外部ドメインのDNSを先行解決 -->
<link rel="dns-prefetch" href="//api.example.com" />
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- Preconnect: DNS + TCP + TLSを先行接続 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Prefetch: 次ページのリソースを先行ロード -->
<link rel="prefetch" href="/next-page.js" />

<!-- Preload: 現ページの重要リソースを優先ロード -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />

<!-- fetchpriorityでリソース優先順位を指定 -->
<!-- ヒーロー画像: 高優先度 -->
<img src="/hero.webp" fetchpriority="high" />

<!-- オフスクリーン画像: 低優先度 -->
<img src="/below-fold.webp" fetchpriority="low" loading="lazy" />

<!-- 重要スクリプト: 高優先度 -->
<script src="/critical.js" fetchpriority="high"></script>

HTTP/1.1 vs HTTP/2 vs HTTP/3:
┌──────────────┬──────────────┬──────────────┬──────────────┐
│  機能         │  HTTP/1.1    │  HTTP/2      │  HTTP/3      │
├──────────────┼──────────────┼──────────────┼──────────────┤
│ 多重化        │ 不可         │ 対応          │ 対応          │
│ ヘッダー圧縮  │ なし         │ HPACK        │ QPACK        │
│ サーバープッシュ│ なし        │ 対応          │ 廃止          │
│ HOLブロッキング│ TCPレベル    │ TCPレベル     │ 解決(QUIC)   │
│ 転送プロトコル │ TCP         │ TCP          │ QUIC(UDP)    │
│ 接続確立      │ TCP+TLS      │ TCP+TLS      │ 0-RTT可能    │
└──────────────┴──────────────┴──────────────┴──────────────┘

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: './lighthouserc.json'
          uploadArtifacts: true

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["warn", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

// Web Vitalsの測定と報告
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });

  // Beacon APIで非同期送信
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

パフォーマンスモニタリングツール:
├── 合成モニタリング（Lab Data）
│   ├── Lighthouse CI（自動化）
│   ├── WebPageTest（詳細分析）
│   └── PageSpeed Insights（Google）
│
├── 実ユーザーモニタリング（Field Data）
│   ├── Chrome UX Report（CrUX）
│   ├── web-vitalsライブラリ
│   └── 商用: Datadog RUM、New Relic
│
└── バンドル分析
    ├── webpack-bundle-analyzer
    ├── source-map-explorer
    └── bundlephobia.com

// Server Component（デフォルト - JSバンドルに含まれない）
// app/products/page.tsx
async function ProductsPage() {
  // サーバーで直接データフェッチ（APIルート不要）
  const products = await db.product.findMany();

  return (
    <div>
      <h1>Products</h1>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

// Client Component（インタラクションが必要な部分のみ）
// components/AddToCart.tsx
'use client';

import { useState } from 'react';

export function AddToCart({ productId }: { productId: string }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Add to Cart ({count})
    </button>
  );
}

import Image from 'next/image';

// 自動WebP/AVIF変換、レスポンシブ、lazy loading
function HeroSection() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority  // LCP画像にはpriority設定
      sizes="(max-width: 768px) 100vw, 1200px"
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// リモート画像
function Avatar({ user }: { user: User }) {
  return (
    <Image
      src={user.avatarUrl}
      alt={user.name}
      width={48}
      height={48}
      loading="lazy"
    />
  );
}

// next/fontで自動最適化（セルフホスティング、CLS除去）
import { Inter, Noto_Sans_JP } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  display: 'swap',
  variable: '--font-noto-sans-jp',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={`${inter.variable} ${notoSansJP.variable}`}>
      <body>{children}</body>
    </html>
  );
}

// app/blog/[slug]/page.tsx

// 静的生成 + ISR（60秒）
export const revalidate = 60;

// または完全に静的
export const dynamic = 'force-static';

// または常に動的
export const dynamic = 'force-dynamic';

// ランタイム選択
export const runtime = 'edge'; // Edge Runtime（速いTTFB）
// export const runtime = 'nodejs'; // Node.jsランタイム（デフォルト）