# CDNキャッシュ戦略の設計
 
# 1. 静的アセット（変更時はファイル名が変わる: contenthash）
# /assets/app.a1b2c3.js
location ~* \.(js|css|woff2|png|jpg|webp|avif|svg)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    # immutable: ブラウザが条件付きリクエストも送らない
    # 1年間キャッシュ（ファイル名にハッシュが含まれるため安全）
}
 
# 2. HTML（常に最新チェック）
location ~* \.html$ {
    add_header Cache-Control "public, no-cache";
    # no-cache: 毎回サーバーに検証（ETagで304応答）
    # → HTMLが最新のアセットURLを参照するため必要
}
 
# 3. API レスポンス（短時間キャッシュ + SWR）
location /api/ {
    add_header Cache-Control "public, max-age=10, stale-while-revalidate=60";
    # 10秒間はキャッシュ使用
    # 10-70秒: staleキャッシュを返しつつバックグラウンドで再検証
}
 
# 4. ユーザー固有データ（キャッシュ禁止）
location /api/me {
    add_header Cache-Control "private, no-store";
    # CDNにキャッシュさせない
}

<!-- 接続の事前確立 -->
 
<!-- 1. dns-prefetch: DNSだけ事前解決（軽量） -->
<link rel="dns-prefetch" href="//api.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
 
<!-- 2. preconnect: DNS + TCP + TLS を事前確立（推奨） -->
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- crossorigin: CORS リクエストの場合に必要 -->
 
<!-- 3. preload: リソースを優先ダウンロード -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">
 
<!-- 4. prefetch: 次のページで必要なリソースを事前取得（低優先度） -->
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/data/products.json">
 
<!-- 5. prerender: 次のページを事前レンダリング（Chrome） -->
<link rel="prerender" href="/likely-next-page">
 
<!-- 6. modulepreload: ESモジュールの事前ロード -->
<link rel="modulepreload" href="/modules/app.js">

# Nginx でのHTTP/2設定
server {
    listen 443 ssl http2;
    server_name example.com;
 
    ssl_certificate /etc/ssl/certs/example.com.pem;
    ssl_certificate_key /etc/ssl/private/example.com.key;
 
    # ALPN（Application-Layer Protocol Negotiation）
    ssl_protocols TLSv1.2 TLSv1.3;
 
    # HTTP/2 サーバープッシュ（非推奨だが参考）
    # location / {
    #     http2_push /styles.css;
    #     http2_push /app.js;
    # }
 
    # 103 Early Hints（代替手段）
    location / {
        add_header Link "</styles.css>; rel=preload; as=style" always;
        add_header Link "</app.js>; rel=preload; as=script" always;
    }
}
 
# Nginx でのHTTP/3設定 (nginx-quic)
server {
    listen 443 quic reuseport;
    listen 443 ssl http2;
 
    ssl_protocols TLSv1.3;  # HTTP/3 は TLS 1.3 必須
 
    add_header Alt-Svc 'h3=":443"; ma=86400';
    # Alt-Svc: ブラウザに HTTP/3 対応を通知
}

# Nginx でのBrotli圧縮設定
# ngx_brotli モジュールが必要
 
# 動的圧縮（リクエスト時に圧縮）
brotli on;
brotli_comp_level 6;    # 1-11（6が速度と圧縮率のバランス）
brotli_types
    text/plain
    text/css
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    image/svg+xml;
brotli_min_length 1024;  # 1KB未満は圧縮しない
 
# 静的事前圧縮（ビルド時に .br ファイルを生成）
brotli_static on;
# → app.js.br が存在すれば、動的圧縮せずそのまま返す
# → ビルド時に brotli app.js で生成
 
# gzip フォールバック
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1024;
gzip_static on;

// Vite でのビルド時圧縮設定
// vite.config.ts
import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';
 
export default defineConfig({
  plugins: [
    // Brotli 圧縮
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 1024,     // 1KB以上のファイルを圧縮
    }),
    // gzip フォールバック
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 1024,
    }),
  ],
  build: {
    // ソースマップはプロダクションでは無効化
    sourcemap: false,
    // チャンクサイズ警告の閾値
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        // ベンダーチャンクの分離
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
  },
});

<!-- レスポンシブ画像の完全実装 -->
 
<!-- 1. 基本的なpicture要素 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg"
       alt="商品画像"
       loading="lazy"
       decoding="async"
       width="800"
       height="600">
</picture>
 
<!-- 2. レスポンシブ対応（解像度とビューポート幅） -->
<picture>
  <!-- デスクトップ向け -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1600.avif 1600w, hero-1200.avif 1200w"
    sizes="100vw"
    type="image/avif">
  <source
    media="(min-width: 1024px)"
    srcset="hero-1600.webp 1600w, hero-1200.webp 1200w"
    sizes="100vw"
    type="image/webp">
 
  <!-- モバイル向け -->
  <source
    srcset="hero-800.avif 800w, hero-400.avif 400w"
    sizes="100vw"
    type="image/avif">
  <source
    srcset="hero-800.webp 800w, hero-400.webp 400w"
    sizes="100vw"
    type="image/webp">
 
  <img
    src="hero-800.jpg"
    alt="ヒーローイメージ"
    loading="eager"
    fetchpriority="high"
    width="1600"
    height="900">
</picture>
 
<!-- 3. Next.js Image コンポーネント（自動最適化） -->
<!-- 上記の複雑さをフレームワークが吸収 -->

// Next.js Image コンポーネントの活用
import Image from 'next/image';
 
// 基本使用
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        // 自動的に WebP/AVIF 変換
        // レスポンシブ srcset 生成
        // lazy loading デフォルト
        placeholder="blur"
        blurDataURL={product.blurHash}
      />
    </div>
  );
}
 
// ヒーロー画像（LCP対象）
function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="メインビジュアル"
      fill                   // 親要素を満たす
      sizes="100vw"
      priority               // lazy loading 無効、preload ヒント追加
      quality={85}
      className="object-cover"
    />
  );
}
 
// next.config.js での画像最適化設定
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 365, // 1年
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
        pathname: '/uploads/**',
      },
    ],
  },
};

// コード分割（Code Splitting）
 
// 1. ルートベースの分割（React Router）
import { lazy, Suspense } from 'react';
 
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() => import(
  /* webpackChunkName: "analytics" */
  /* webpackPrefetch: true */
  './pages/Analytics'
));
 
function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}
 
// 2. コンポーネントベースの分割
const HeavyEditor = lazy(() => import('./components/HeavyEditor'));
// → HeavyEditor は必要な時だけロード
 
function EditorPage() {
  const [showEditor, setShowEditor] = useState(false);
  return (
    <div>
      <button onClick={() => setShowEditor(true)}>Open Editor</button>
      {showEditor && (
        <Suspense fallback={<EditorSkeleton />}>
          <HeavyEditor />
        </Suspense>
      )}
    </div>
  );
}
 
// 3. 条件付きインポート
async function processImage(file: File) {
  // sharp は使用時にのみロード
  const { processWithSharp } = await import('./utils/imageProcessor');
  return processWithSharp(file);
}
 
// 4. Tree Shaking の効果的な活用
// 悪い（バンドル全体がインポートされる）
import _ from 'lodash';
_.debounce(fn, 300);
 
// 良い（必要な関数のみ）
import debounce from 'lodash/debounce';
debounce(fn, 300);
 
// 最良（ESModules で Tree Shaking 可能）
import { debounce } from 'lodash-es';
debounce(fn, 300);

/* フォント最適化の実装 */
 
/* 1. font-display: swap でテキストを先に表示 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* FOUT: 無スタイルテキストを先に表示 */
}
 
/* font-display の選択肢:
   auto:     ブラウザ任せ
   block:    3秒間非表示 → フォント表示（FOIT）
   swap:     即フォールバック → フォント切替（FOUT）- 推奨
   fallback: 100ms非表示 → フォールバック → 3秒以内に切替
   optional: 即フォールバック → 十分高速ならフォント使用
*/
 
/* 2. 日本語フォントのサブセット化 */
/* Noto Sans JP: フルセット = 5.7MB → サブセット = 200KB */
@font-face {
  font-family: 'Noto Sans JP';
  /* unicode-range でサブセットを定義 */
  src: url('/fonts/NotoSansJP-Regular-subset.woff2') format('woff2');
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF,
                 U+4E00-9FFF, U+FF00-FFEF;
  font-display: swap;
}
 
/* 3. システムフォントスタック（ゼロコスト） */
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    'Noto Sans JP',
    sans-serif;
}

<!-- フォントのpreload -->
<link rel="preload"
      href="/fonts/inter-v13-latin-regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin>
 
<!-- Google Fonts の最適な読み込み -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet">
 
<!-- Next.js の next/font（最適化済み） -->
<!-- ビルド時にフォントをダウンロードしてセルフホスティング -->

// Next.js next/font の使用
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', '700'],
  display: 'swap',
  variable: '--font-noto-sans-jp',
  preload: false, // 日本語フォントは大きいのでpreloadしない
});
 
export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${notoSansJP.variable}`}>
      <body>{children}</body>
    </html>
  );
}

<!-- 動画の最適化 -->
 
<!-- 1. 遅延読み込み + 適応的品質 -->
<video
  poster="/video-poster.webp"
  preload="none"
  playsinline
  muted
  loop>
  <!-- 低帯域ユーザー向けに解像度を段階的に提供 -->
  <source src="/video-720p.mp4" type="video/mp4"
          media="(max-width: 768px)">
  <source src="/video-1080p.mp4" type="video/mp4">
</video>
 
<!-- 2. Intersection Observer で遅延再生 -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const video = entry.target;
    if (entry.isIntersecting) {
      video.play();
    } else {
      video.pause();
    }
  });
}, { threshold: 0.5 });
 
document.querySelectorAll('video[data-lazy]').forEach(v => observer.observe(v));
</script>

// REST API でのフィールド選択
// GET /api/users?fields=id,name,email
 
// サーバー側実装（Express + Prisma）
app.get('/api/users', async (req, res) => {
  const fields = req.query.fields?.split(',') || [];
 
  const select = fields.length > 0
    ? Object.fromEntries(fields.map(f => [f, true]))
    : undefined; // 未指定なら全フィールド
 
  const users = await prisma.user.findMany({
    select,
    take: 20,
  });
 
  res.json({ data: users });
});
 
// GraphQL でのフィールド選択（自動最適化）
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
      # avatar や profile は不要なので取得しない
    }
  }
`;
 
// tRPC でのフィールド選択
const users = await trpc.user.list.query({
  select: { id: true, name: true, email: true },
});

// バッチリクエスト: 複数APIコールを1リクエストに
 
// クライアント側
const batchRequest = async (requests: BatchItem[]) => {
  const response = await fetch('/api/batch', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ requests }),
  });
  return response.json();
};
 
// 使用例: 3つのAPIを1リクエストに
const results = await batchRequest([
  { method: 'GET', url: '/api/users/1' },
  { method: 'GET', url: '/api/users/1/orders' },
  { method: 'GET', url: '/api/users/1/notifications' },
]);
 
// サーバー側: DataLoader パターン（N+1防止）
import DataLoader from 'dataloader';
 
// ユーザーのバッチ取得
const userLoader = new DataLoader(async (userIds: readonly string[]) => {
  const users = await prisma.user.findMany({
    where: { id: { in: [...userIds] } },
  });
  // IDの順序を保持して返す
  const userMap = new Map(users.map(u => [u.id, u]));
  return userIds.map(id => userMap.get(id) || null);
});
 
// 使用（個別に呼んでもバッチ実行される）
const user1 = await userLoader.load('user-1');
const user2 = await userLoader.load('user-2');
// → 1つのSQLクエリにバッチ化: SELECT * FROM users WHERE id IN ('user-1', 'user-2')

// Cursor-based ページネーション（推奨）
 
// メリット:
// → 一貫した結果（途中のデータ追加/削除に影響されない）
// → 大量データでもパフォーマンス安定（OFFSET不要）
// → 無限スクロールに最適
 
// API 設計
// GET /api/posts?cursor=abc123&limit=20
 
// サーバー側（Prisma）
async function getPosts(cursor?: string, limit = 20) {
  const posts = await prisma.post.findMany({
    take: limit + 1, // 1件多く取得して次ページ有無を判定
    ...(cursor && {
      cursor: { id: cursor },
      skip: 1, // cursorの要素自体はスキップ
    }),
    orderBy: { createdAt: 'desc' },
  });
 
  const hasMore = posts.length > limit;
  const data = hasMore ? posts.slice(0, limit) : posts;
  const nextCursor = hasMore ? data[data.length - 1].id : null;
 
  return {
    data,
    nextCursor,
    hasMore,
  };
}
 
// レスポンス例
{
  "data": [
    { "id": "post-20", "title": "..." },
    { "id": "post-19", "title": "..." }
  ],
  "nextCursor": "post-19",
  "hasMore": true
}
 
// クライアント側（TanStack Query useInfiniteQuery）
function useInfinitePosts() {
  return useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam }) =>
      fetch(`/api/posts?cursor=${pageParam || ''}&limit=20`).then(r => r.json()),
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    initialPageParam: '',
  });
}

// アプリケーションレベルのキャッシュ戦略
 
// 1. TanStack Query のキャッシュ設定
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,    // 5分間はfreshとみなす
      gcTime: 30 * 60 * 1000,      // 30分間メモリに保持
      refetchOnWindowFocus: true,   // フォーカス復帰時に再取得
      refetchOnReconnect: true,     // ネットワーク復帰時に再取得
      retry: 3,                     // 3回リトライ
      retryDelay: (attempt) =>      // エクスポネンシャルバックオフ
        Math.min(1000 * 2 ** attempt, 30000),
    },
  },
});
 
// 2. リソース種類ごとのキャッシュ設定
const userQuery = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 10 * 60 * 1000,       // ユーザー情報: 10分
  gcTime: 60 * 60 * 1000,          // 1時間メモリ保持
});
 
const notificationsQuery = useQuery({
  queryKey: ['notifications'],
  queryFn: fetchNotifications,
  staleTime: 30 * 1000,             // 通知: 30秒（頻繁に更新）
  refetchInterval: 60 * 1000,       // 60秒ごとにポーリング
});
 
// 3. Service Worker キャッシュ（Workbox）
// Cache First: 静的アセット
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30日
      }),
    ],
  })
);
 
// Stale While Revalidate: API
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5分
      }),
    ],
  })
);
 
// Network First: HTML
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst({
    cacheName: 'pages',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
      }),
    ],
  })
);

// JSON の効率的なシリアライゼーション
 
// 1. 不要なフィールドの除外
function serializeUser(user: User) {
  const { password, internalNotes, ...publicData } = user;
  return publicData;
}
 
// 2. superjson: Date, Map, Set などのシリアライゼーション
import superjson from 'superjson';
 
// サーバー
const data = { createdAt: new Date(), tags: new Set(['a', 'b']) };
const serialized = superjson.stringify(data);
 
// クライアント
const parsed = superjson.parse(serialized);
// parsed.createdAt は Date オブジェクト
// parsed.tags は Set オブジェクト
 
// 3. Protocol Buffers（高性能API向け）
// → JSON の 3-10倍高速なシリアライゼーション
// → ペイロードが 50-80% 小さい
// → gRPC, Connect で使用
 
// user.proto
// message User {
//   string id = 1;
//   string name = 2;
//   string email = 3;
//   google.protobuf.Timestamp created_at = 4;
// }
 
// 4. MessagePack（バイナリJSON）
// → JSONと同等のデータ構造をバイナリで表現
// → JSON比 20-30% 小さい
// → パース速度が 2-5倍

// データベース接続プーリング
 
// 1. Prisma の接続プーリング
// prisma/schema.prisma
// datasource db {
//   provider = "postgresql"
//   url      = env("DATABASE_URL")
//   // ?connection_limit=10&pool_timeout=30
// }
 
// 2. PgBouncer の設定
// pgbouncer.ini
// [databases]
// mydb = host=localhost port=5432 dbname=mydb
//
// [pgbouncer]
// pool_mode = transaction        # トランザクション単位で接続を再利用
// max_client_conn = 1000         # 最大クライアント接続
// default_pool_size = 20         # プールサイズ
// min_pool_size = 5              # 最小プールサイズ
// reserve_pool_size = 5          # 予備プール
 
// 3. Redis 接続プーリング（ioredis）
import Redis from 'ioredis';
 
const redis = new Redis({
  host: process.env.REDIS_HOST,
  port: 6379,
  maxRetriesPerRequest: 3,
  enableReadyCheck: true,
  lazyConnect: true,
  // Cluster mode
  // sentinels: [{ host: 'sentinel1', port: 26379 }],
});
 
// 4. HTTP クライアントの接続プーリング
import { Agent } from 'undici';
 
const agent = new Agent({
  connections: 100,         // 最大接続数
  pipelining: 10,          // パイプライニング数
  keepAliveTimeout: 60000, // Keep-Alive タイムアウト
  keepAliveMaxTimeout: 600000,
});
 
const response = await fetch('https://api.example.com/data', {
  dispatcher: agent,
});

// Performance API を使用した計測
 
// 1. Navigation Timing API
function measurePageLoad() {
  const [navigation] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
 
  const metrics = {
    // DNS 解決時間
    dns: navigation.domainLookupEnd - navigation.domainLookupStart,
    // TCP 接続時間
    tcp: navigation.connectEnd - navigation.connectStart,
    // TLS ハンドシェイク時間
    tls: navigation.secureConnectionStart > 0
      ? navigation.connectEnd - navigation.secureConnectionStart
      : 0,
    // TTFB
    ttfb: navigation.responseStart - navigation.requestStart,
    // コンテンツダウンロード時間
    download: navigation.responseEnd - navigation.responseStart,
    // DOMContentLoaded
    domContentLoaded: navigation.domContentLoadedEventEnd - navigation.startTime,
    // Load イベント
    load: navigation.loadEventEnd - navigation.startTime,
    // DOM パース時間
    domParsing: navigation.domInteractive - navigation.responseEnd,
  };
 
  console.table(metrics);
  return metrics;
}
 
// 2. Resource Timing API
function measureResources() {
  const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
 
  // 最も遅いリソース TOP 10
  const slowest = resources
    .sort((a, b) => b.duration - a.duration)
    .slice(0, 10)
    .map(r => ({
      name: r.name.split('/').pop(),
      duration: Math.round(r.duration),
      size: r.transferSize,
      type: r.initiatorType,
      protocol: r.nextHopProtocol,
    }));
 
  console.table(slowest);
 
  // リソースタイプ別の合計
  const byType = resources.reduce((acc, r) => {
    const type = r.initiatorType;
    if (!acc[type]) acc[type] = { count: 0, totalSize: 0, totalDuration: 0 };
    acc[type].count++;
    acc[type].totalSize += r.transferSize;
    acc[type].totalDuration += r.duration;
    return acc;
  }, {} as Record<string, { count: number; totalSize: number; totalDuration: number }>);
 
  console.table(byType);
}
 
// 3. Core Web Vitals の計測（web-vitals ライブラリ）
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';
 
function reportWebVitals() {
  onLCP((metric) => {
    console.log('LCP:', metric.value, 'ms');
    console.log('LCP Element:', metric.entries[0]?.element);
    sendToAnalytics('LCP', metric);
  });
 
  onINP((metric) => {
    console.log('INP:', metric.value, 'ms');
    sendToAnalytics('INP', metric);
  });
 
  onCLS((metric) => {
    console.log('CLS:', metric.value);
    // CLS の各シフトの詳細
    metric.entries.forEach(entry => {
      console.log('Shift:', entry.value, entry.sources);
    });
    sendToAnalytics('CLS', metric);
  });
 
  onFCP((metric) => {
    console.log('FCP:', metric.value, 'ms');
    sendToAnalytics('FCP', metric);
  });
 
  onTTFB((metric) => {
    console.log('TTFB:', metric.value, 'ms');
    sendToAnalytics('TTFB', metric);
  });
}
 
// 4. カスタムパフォーマンスマーク
function measureCustom() {
  // APIコールの計測
  performance.mark('api-start');
 
  fetch('/api/users').then(async (res) => {
    performance.mark('api-end');
    performance.measure('api-call', 'api-start', 'api-end');
 
    const [measure] = performance.getEntriesByName('api-call');
    console.log('API call duration:', measure.duration, 'ms');
  });
}
 
// 5. Long Tasks API（INP改善用）
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 50) {
      console.warn('Long Task detected:', {
        duration: entry.duration,
        startTime: entry.startTime,
        name: entry.name,
      });
    }
  });
});
observer.observe({ type: 'longtask', buffered: true });

// RUM データの収集と送信
 
interface PerformanceData {
  url: string;
  userAgent: string;
  connectionType: string;
  effectiveType: string;
  lcp: number;
  inp: number;
  cls: number;
  fcp: number;
  ttfb: number;
  timestamp: number;
}
 
function collectPerformanceData(): void {
  const connection = (navigator as any).connection;
 
  const data: Partial<PerformanceData> = {
    url: window.location.href,
    userAgent: navigator.userAgent,
    connectionType: connection?.type || 'unknown',
    effectiveType: connection?.effectiveType || 'unknown',
    timestamp: Date.now(),
  };
 
  // web-vitals で各指標を収集
  onLCP(m => { data.lcp = m.value; maybeSend(data); });
  onINP(m => { data.inp = m.value; maybeSend(data); });
  onCLS(m => { data.cls = m.value; maybeSend(data); });
  onFCP(m => { data.fcp = m.value; maybeSend(data); });
  onTTFB(m => { data.ttfb = m.value; maybeSend(data); });
}
 
function maybeSend(data: Partial<PerformanceData>): void {
  // 全指標が揃ったら送信
  if (data.lcp && data.inp !== undefined && data.cls !== undefined) {
    sendBeacon(data);
  }
}
 
function sendBeacon(data: Partial<PerformanceData>): void {
  // sendBeacon: ページ遷移時でも確実に送信
  navigator.sendBeacon('/api/analytics/performance', JSON.stringify(data));
}
 
// RUM データの集約と分析（サーバー側）
// → p75 / p95 / p99 のパーセンタイルで分析
// → ネットワーク種別ごとの比較
// → ページ別の比較
// → リグレッション検出

// Service Worker の登録
// app.ts
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js', {
        scope: '/',
      });
      console.log('SW registered:', registration.scope);
    } catch (error) {
      console.error('SW registration failed:', error);
    }
  });
}
 
// sw.js - Service Worker
const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = [
  '/',
  '/offline.html',
  '/styles.css',
  '/app.js',
  '/icons/icon-192x192.png',
];
 
// インストール: 静的アセットをキャッシュ
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  self.skipWaiting(); // 即座にアクティブ化
});
 
// アクティベート: 古いキャッシュを削除
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
  self.clients.claim(); // 全クライアントを制御
});
 
// フェッチ: キャッシュ戦略の実装
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);
 
  // API リクエスト: Network First
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
    return;
  }
 
  // 静的アセット: Cache First
  if (request.destination === 'image' ||
      request.destination === 'style' ||
      request.destination === 'script') {
    event.respondWith(cacheFirst(request));
    return;
  }
 
  // HTML: Network First with Offline Fallback
  if (request.mode === 'navigate') {
    event.respondWith(
      networkFirst(request).catch(() => caches.match('/offline.html'))
    );
    return;
  }
});
 
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const response = await fetch(request);
  const cache = await caches.open(CACHE_NAME);
  cache.put(request, response.clone());
  return response;
}
 
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    return caches.match(request);
  }
}

// Workbox: Google の Service Worker ライブラリ
 
// next.config.js (next-pwa)
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/api\.example\.com\/.*/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'api-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 60 * 60, // 1時間
        },
      },
    },
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|avif)$/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'image-cache',
        expiration: {
          maxEntries: 100,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30日
        },
      },
    },
    {
      urlPattern: /\.(?:js|css)$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'static-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60, // 1日
        },
      },
    },
  ],
});
 
module.exports = withPWA({
  // Next.js config
});

// Cloudflare Workers
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
 
    // A/Bテスト
    if (url.pathname === '/') {
      const bucket = request.headers.get('cf-connecting-ip')?.charCodeAt(0) % 2;
      const variant = bucket === 0 ? 'control' : 'experiment';
      const response = await fetch(`${url.origin}/variants/${variant}`);
      return new Response(response.body, {
        headers: {
          ...Object.fromEntries(response.headers),
          'X-Variant': variant,
        },
      });
    }
 
    // 地域別コンテンツ
    if (url.pathname === '/pricing') {
      const country = request.cf?.country || 'US';
      const currency = getCurrency(country);
      // KV Store からキャッシュされた料金を取得
      const pricing = await env.PRICING_KV.get(`pricing:${currency}`, 'json');
      return Response.json(pricing);
    }
 
    return fetch(request);
  },
};
 
// Vercel Edge Functions
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // 地域ベースのリダイレクト
  const country = request.geo?.country || 'US';
 
  if (country === 'JP' && !request.nextUrl.pathname.startsWith('/ja')) {
    return NextResponse.redirect(new URL('/ja' + request.nextUrl.pathname, request.url));
  }
 
  // レート制限
  const ip = request.ip || 'unknown';
  // Edge KV でレート制限を実装
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

// エッジデータベース
 
// 1. Cloudflare D1（エッジSQLite）
export default {
  async fetch(request: Request, env: Env) {
    const { results } = await env.DB
      .prepare('SELECT * FROM products WHERE category = ?')
      .bind('electronics')
      .all();
 
    return Response.json(results);
  },
};
 
// 2. Vercel KV（エッジRedis）
import { kv } from '@vercel/kv';
 
export async function GET(request: Request) {
  // セッション取得
  const session = await kv.get(`session:${sessionId}`);
 
  // レート制限
  const requests = await kv.incr(`ratelimit:${ip}`);
  if (requests === 1) {
    await kv.expire(`ratelimit:${ip}`, 60);
  }
  if (requests > 100) {
    return new Response('Too Many Requests', { status: 429 });
  }
 
  return Response.json({ data: session });
}
 
// 3. PlanetScale / Neon（エッジ対応DB）
import { neon } from '@neondatabase/serverless';
 
export async function GET(request: Request) {
  const sql = neon(process.env.DATABASE_URL!);
  const products = await sql`
    SELECT id, name, price FROM products
    WHERE category = 'electronics'
    ORDER BY created_at DESC
    LIMIT 20
  `;
  return Response.json(products);
}

// エクスポネンシャルバックオフ付きリトライ
async function fetchWithRetry(
  url: string,
  options: RequestInit = {},
  maxRetries = 3,
  baseDelay = 1000,
): Promise<Response> {
  let lastError: Error;
 
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, {
        ...options,
        signal: AbortSignal.timeout(10000), // 10秒タイムアウト
      });
 
      // 5xx エラーはリトライ対象
      if (response.status >= 500 && attempt < maxRetries) {
        throw new Error(`Server error: ${response.status}`);
      }
 
      // 429 Too Many Requests: Retry-After ヘッダーを参照
      if (response.status === 429) {
        const retryAfter = parseInt(response.headers.get('Retry-After') || '60');
        await sleep(retryAfter * 1000);
        continue;
      }
 
      return response;
    } catch (error) {
      lastError = error as Error;
 
      if (attempt < maxRetries) {
        // エクスポネンシャルバックオフ + ジッター
        const delay = baseDelay * Math.pow(2, attempt);
        const jitter = delay * 0.1 * Math.random();
        console.warn(`Retry ${attempt + 1}/${maxRetries} after ${delay + jitter}ms`);
        await sleep(delay + jitter);
      }
    }
  }
 
  throw lastError!;
}
 
function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
// サーキットブレーカーパターン
class CircuitBreaker {
  private failures = 0;
  private lastFailure: number = 0;
  private state: 'closed' | 'open' | 'half-open' = 'closed';
 
  constructor(
    private threshold = 5,          // 失敗回数の閾値
    private resetTimeout = 30000,   // リセットまでの時間（ms）
  ) {}
 
  async execute<T>(fn: () => Promise<T>): Promise<T> {
    if (this.state === 'open') {
      if (Date.now() - this.lastFailure > this.resetTimeout) {
        this.state = 'half-open';
      } else {
        throw new Error('Circuit is open');
      }
    }
 
    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }
 
  private onSuccess(): void {
    this.failures = 0;
    this.state = 'closed';
  }
 
  private onFailure(): void {
    this.failures++;
    this.lastFailure = Date.now();
    if (this.failures >= this.threshold) {
      this.state = 'open';
    }
  }
}
 
// 使用例
const apiBreaker = new CircuitBreaker(5, 30000);
 
async function fetchUserData(userId: string) {
  return apiBreaker.execute(() =>
    fetchWithRetry(`/api/users/${userId}`)
  );
}

// ネットワーク状態の検出と適応
 
// 1. Online/Offline 検出
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
 
  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
 
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
 
  return isOnline;
}
 
// 2. Network Information API
function useNetworkQuality() {
  const [quality, setQuality] = useState<'fast' | 'slow' | 'offline'>('fast');
 
  useEffect(() => {
    const connection = (navigator as any).connection;
    if (!connection) return;
 
    const updateQuality = () => {
      if (!navigator.onLine) {
        setQuality('offline');
        return;
      }
 
      const effectiveType = connection.effectiveType;
      // effectiveType: 'slow-2g', '2g', '3g', '4g'
      if (effectiveType === '4g' && connection.downlink > 5) {
        setQuality('fast');
      } else {
        setQuality('slow');
      }
    };
 
    connection.addEventListener('change', updateQuality);
    updateQuality();
 
    return () => connection.removeEventListener('change', updateQuality);
  }, []);
 
  return quality;
}
 
// 3. 適応的コンテンツ配信
function ProductImage({ product }: { product: Product }) {
  const quality = useNetworkQuality();
 
  return (
    <Image
      src={product.imageUrl}
      alt={product.name}
      quality={quality === 'fast' ? 85 : 50}  // 低速時は品質を下げる
      placeholder={quality === 'fast' ? 'blur' : 'empty'}
      loading={quality === 'fast' ? 'eager' : 'lazy'}
    />
  );
}
 
// 4. Save-Data ヘッダーの検出
// ユーザーがデータセーバーを有効にしている場合
function useSaveData() {
  const connection = (navigator as any).connection;
  return connection?.saveData === true;
}
 
// サーバー側での Save-Data 対応
// Save-Data: on ヘッダーを検出
// → 低品質画像を返す
// → 自動再生動画を無効化
// → 不要なアセットの読み込みをスキップ

# Lighthouse CI の例
npm install -g @lhci/cli
 
# lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['https://staging.example.com'],
      numberOfRuns: 5,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.9}],
        'first-contentful-paint': ['error', {maxNumericValue: 1800}],
        'largest-contentful-paint': ['error', {maxNumericValue: 2500}],
        'cumulative-layout-shift': ['error', {maxNumericValue: 0.1}],
      },
    },
  },
};
 
# CI で実行
lhci autorun

# ============================================
# TCP ウィンドウサイズの最適化
# ============================================
# TCP 受信バッファのサイズ（min, default, max）
net.ipv4.tcp_rmem = 4096 87380 67108864      # 最大 64MB
# TCP 送信バッファのサイズ（min, default, max）
net.ipv4.tcp_wmem = 4096 65536 67108864      # 最大 64MB
# ソケットバッファの最大サイズ
net.core.rmem_max = 67108864
net.core.wmem_max = 67108864
 
# ============================================
# TCP BBR 輻輳制御アルゴリズム（推奨）
# ============================================
net.core.default_qdisc = fq
net.ipv4.tcp_congestion_control = bbr
# BBR は Google が開発した最新の輻輳制御アルゴリズム
# 従来の CUBIC より高速・安定（特に高遅延・パケットロス環境）
 
# ============================================
# TCP Fast Open（3 ウェイハンドシェイクの短縮）
# ============================================
net.ipv4.tcp_fastopen = 3
# 3 = クライアントとサーバー両方で有効化
# 初回接続時に SYN に HTTP リクエストを含める → 1 RTT 削減
 
# ============================================
# TIME_WAIT 対策
# ============================================
net.ipv4.tcp_tw_reuse = 1
# TIME_WAIT 状態のソケットを新しい接続で再利用
# 注意: NAT 環境では慎重に使用（パケット混乱の可能性）
 
net.ipv4.ip_local_port_range = 1024 65535
# エフェメラルポートの範囲を拡大（デフォルト 32768-60999）
# TIME_WAIT 蓄積によるポート枯渇を緩和
 
# ============================================
# Keep-Alive 設定
# ============================================
net.ipv4.tcp_keepalive_time = 600      # 600 秒（10 分）後に Keep-Alive 開始
net.ipv4.tcp_keepalive_intvl = 60      # 60 秒間隔で Keep-Alive プローブ送信
net.ipv4.tcp_keepalive_probes = 3      # 3 回失敗で接続切断
 
# ============================================
# 接続数の上限
# ============================================
net.core.somaxconn = 65535             # listen() のバックログキューサイズ
net.core.netdev_max_backlog = 5000     # ネットワークデバイスのバックログ
 
# ============================================
# その他の最適化
# ============================================
net.ipv4.tcp_slow_start_after_idle = 0
# アイドル後のスロースタートを無効化（Keep-Alive 接続の高速化）
 
net.ipv4.tcp_mtu_probing = 1
# Path MTU Discovery の有効化（最適な MTU を自動検出）

# 設定を即座に反映
$ sudo sysctl -p
 
# 設定の確認
$ sysctl net.ipv4.tcp_congestion_control
net.ipv4.tcp_congestion_control = bbr
 
# 現在の TCP 統計
$ ss -s
Total: 342
TCP:   120 (estab 45, closed 20, orphaned 3, timewait 15)

# BBR 有効化前後での帯域幅計測
$ iperf3 -c target.example.com -t 30
 
# 結果例:
# CUBIC:  850 Mbps  （従来の輻輳制御）
# BBR:   1,100 Mbps  （30% 向上）

# Nginx 1.25.0 以降で HTTP/3 サポート
server {
    listen 443 ssl;
    listen 443 quic reuseport;  # HTTP/3 (QUIC) のリスニング
 
    ssl_certificate     /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;
 
    # HTTP/3 を Alt-Svc ヘッダーでアドバタイズ
    add_header Alt-Svc 'h3=":443"; ma=86400';
 
    # QUIC 用のパラメータ
    quic_retry on;
    ssl_early_data on;
 
    location / {
        # 通常の設定
    }
}

# curl で HTTP/3 接続テスト（curl 7.66 以降）
$ curl --http3 -I https://example.com
 
# レスポンスヘッダーに Alt-Svc があるか確認
Alt-Svc: h3=":443"; ma=86400
 
# Chrome DevTools の Protocol 列で "h3" を確認
# または chrome://net-internals/#http3 で QUIC セッション確認

# Nginx での Brotli + Gzip 併用設定
# Brotli（モジュール別途インストール必要）
brotli on;
brotli_comp_level 6;          # 動的圧縮は 4-6 推奨（速度と圧縮率のバランス）
brotli_static on;             # 事前圧縮ファイル(.br)を優先配信
brotli_types text/plain text/css application/javascript application/json
             image/svg+xml application/xml;
 
# Gzip（Brotli非対応クライアント用フォールバック）
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css application/javascript application/json;

// vite.config.js
import viteCompression from 'vite-plugin-compression';
 
export default {
  plugins: [
    viteCompression({ algorithm: 'brotliCompress', ext: '.br', threshold: 1024 }),
    viteCompression({ algorithm: 'gzip', ext: '.gz', threshold: 1024 }),
  ]
};
// → dist/assets/app.a1b2c3.js     (元ファイル)
// → dist/assets/app.a1b2c3.js.br  (Brotli 事前圧縮)
// → dist/assets/app.a1b2c3.js.gz  (Gzip 事前圧縮)

<head>
  <!-- preconnect: サードパーティへの早期接続（1ページ2-4個まで） -->
  <link rel="preconnect" href="https://api.example.com">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>
 
  <!-- dns-prefetch: preconnectの軽量版（多数のドメインがある場合） -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
 
  <!-- preload: 現在ページの重要リソース（1ページ3-5個まで） -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/api/critical-data" as="fetch" crossorigin>
  <link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">
 
  <!-- prefetch: 次ページのリソース（アイドル時に取得） -->
  <link rel="prefetch" href="/next-page/bundle.js">
</head>