// Performance Timeline の基本操作
// 全てのエントリを取得
const allEntries = performance.getEntries();
 
// 種別でフィルタリング
const navEntries = performance.getEntriesByType('navigation');
const resEntries = performance.getEntriesByType('resource');
const markEntries = performance.getEntriesByType('mark');
const measureEntries = performance.getEntriesByType('measure');
 
// 名前で検索
const specificEntry = performance.getEntriesByName('my-custom-mark');
 
// タイムオリジンの確認
console.log('Time origin:', performance.timeOrigin);
// => Unix エポックからの経過ミリ秒（高精度タイムスタンプ）
 
// 現在の高精度タイムスタンプ
console.log('Now:', performance.now());
// => timeOrigin からの経過ミリ秒

// ページ読み込みの各段階を体系的に計測する関数
function collectNavigationMetrics() {
  const entry = performance.getEntriesByType('navigation')[0];
 
  if (!entry) {
    console.warn('Navigation Timing エントリが取得できません');
    return null;
  }
 
  const metrics = {
    // ========== ネットワーク段階 ==========
    // リダイレクト処理時間（HTTP 301/302 など）
    redirect: {
      duration: entry.redirectEnd - entry.redirectStart,
      count: entry.redirectCount,
      note: 'リダイレクトが多いと初期表示が遅延する',
    },
 
    // DNS 解決時間
    dns: {
      duration: entry.domainLookupEnd - entry.domainLookupStart,
      note: 'DNS プリフェッチで短縮可能',
    },
 
    // TCP 接続確立時間
    tcp: {
      duration: entry.connectEnd - entry.connectStart,
      note: 'HTTP/2 の多重化で接続再利用が可能',
    },
 
    // TLS ハンドシェイク時間
    tls: {
      duration: entry.secureConnectionStart > 0
        ? entry.connectEnd - entry.secureConnectionStart
        : 0,
      isSecure: entry.secureConnectionStart > 0,
      note: 'TLS 1.3 で 1-RTT に短縮可能',
    },
 
    // ========== サーバー応答段階 ==========
    // TTFB（Time to First Byte）
    ttfb: {
      duration: entry.responseStart - entry.requestStart,
      threshold: 800, // ms - 推奨上限
      note: 'サーバー処理時間を含む重要指標',
    },
 
    // コンテンツダウンロード時間
    download: {
      duration: entry.responseEnd - entry.responseStart,
      transferSize: entry.transferSize,
      encodedBodySize: entry.encodedBodySize,
      decodedBodySize: entry.decodedBodySize,
      compressionRatio: entry.encodedBodySize > 0
        ? (1 - entry.encodedBodySize / entry.decodedBodySize).toFixed(2)
        : 'N/A',
    },
 
    // ========== レンダリング段階 ==========
    // DOM 処理時間
    domProcessing: {
      duration: entry.domContentLoadedEventEnd - entry.responseEnd,
      interactive: entry.domInteractive - entry.startTime,
      contentLoaded: entry.domContentLoadedEventEnd - entry.startTime,
    },
 
    // 全体の読み込み完了時間
    total: {
      loadComplete: entry.loadEventEnd - entry.startTime,
      domContentLoaded: entry.domContentLoadedEventEnd - entry.startTime,
    },
 
    // ========== メタ情報 ==========
    meta: {
      type: entry.type,          // 'navigate', 'reload', 'back_forward', 'prerender'
      protocol: entry.nextHopProtocol, // 'h2', 'h3', 'http/1.1'
      redirectCount: entry.redirectCount,
    },
  };
 
  return metrics;
}
 
// 使用例: ページ読み込み完了後に実行
window.addEventListener('load', () => {
  // loadEventEnd が記録されるのを待つ
  setTimeout(() => {
    const metrics = collectNavigationMetrics();
    if (metrics) {
      console.table({
        'リダイレクト': `${metrics.redirect.duration.toFixed(0)}ms (${metrics.redirect.count}回)`,
        'DNS 解決': `${metrics.dns.duration.toFixed(0)}ms`,
        'TCP 接続': `${metrics.tcp.duration.toFixed(0)}ms`,
        'TLS ハンドシェイク': `${metrics.tls.duration.toFixed(0)}ms`,
        'TTFB': `${metrics.ttfb.duration.toFixed(0)}ms`,
        'ダウンロード': `${metrics.download.duration.toFixed(0)}ms`,
        'DOM 処理': `${metrics.domProcessing.duration.toFixed(0)}ms`,
        '全体': `${metrics.total.loadComplete.toFixed(0)}ms`,
        'プロトコル': metrics.meta.protocol,
        'ナビゲーション種別': metrics.meta.type,
      });
    }
  }, 0);
});

// ナビゲーション種別ごとにメトリクスを分類して送信
function categorizeByNavigationType(metrics) {
  const entry = performance.getEntriesByType('navigation')[0];
  const navType = entry?.type || 'unknown';
 
  return {
    navigationType: navType,
    metrics,
    // 戻る/進む操作では bfcache の効果を確認
    bfcacheUsed: navType === 'back_forward' && metrics.total.loadComplete < 50,
    // プリレンダリング済みならほぼ即時表示
    prerendered: navType === 'prerender',
  };
}

// 個別リソースの読み込み時間を詳細に計測する
function analyzeResources() {
  const resources = performance.getEntriesByType('resource');
 
  // リソースごとの詳細分析
  const analysis = resources.map(entry => ({
    // 基本情報
    url: entry.name,
    type: entry.initiatorType,
    // script, css, img, link, fetch, xmlhttprequest, beacon, video, audio
 
    // タイミング詳細
    timing: {
      redirect: entry.redirectEnd - entry.redirectStart,
      dns: entry.domainLookupEnd - entry.domainLookupStart,
      tcp: entry.connectEnd - entry.connectStart,
      tls: entry.secureConnectionStart > 0
        ? entry.connectEnd - entry.secureConnectionStart : 0,
      ttfb: entry.responseStart - entry.requestStart,
      download: entry.responseEnd - entry.responseStart,
      total: entry.duration,
    },
 
    // サイズ情報
    size: {
      transferSize: entry.transferSize,
      encodedBodySize: entry.encodedBodySize,
      decodedBodySize: entry.decodedBodySize,
    },
 
    // キャッシュ判定
    cache: {
      fromCache: entry.transferSize === 0 && entry.decodedBodySize > 0,
      fromServiceWorker: entry.workerStart > 0,
      // 304 Not Modified の検出
      conditionalRequest: entry.transferSize > 0
        && entry.transferSize < entry.encodedBodySize,
    },
 
    // HTTP/2 Server Push の検出
    serverPush: entry.transferSize > 0
      && entry.requestStart === entry.responseStart,
 
    // レンダリングブロッキング判定
    renderBlocking: entry.renderBlockingStatus || 'unknown',
  }));
 
  return analysis;
}
 
// 遅いリソースの検出と報告
function detectSlowResources(thresholdMs = 1000) {
  const resources = performance.getEntriesByType('resource');
 
  const slowResources = resources
    .filter(r => r.duration > thresholdMs)
    .sort((a, b) => b.duration - a.duration)
    .map(r => ({
      url: new URL(r.name).pathname,  // パスのみ表示
      duration: `${r.duration.toFixed(0)}ms`,
      type: r.initiatorType,
      size: `${(r.transferSize / 1024).toFixed(1)}KB`,
      bottleneck: identifyBottleneck(r),
    }));
 
  return slowResources;
}
 
// ボトルネックの自動判定
function identifyBottleneck(entry) {
  const timing = {
    dns: entry.domainLookupEnd - entry.domainLookupStart,
    tcp: entry.connectEnd - entry.connectStart,
    ttfb: entry.responseStart - entry.requestStart,
    download: entry.responseEnd - entry.responseStart,
  };
 
  const max = Object.entries(timing)
    .reduce((a, b) => a[1] > b[1] ? a : b);
 
  return { phase: max[0], duration: `${max[1].toFixed(0)}ms` };
}

// リソースタイプ別に集計してパフォーマンスの全体像を把握する
function createResourceDashboard() {
  const resources = performance.getEntriesByType('resource');
 
  const dashboard = {};
 
  resources.forEach(r => {
    const type = r.initiatorType || 'other';
 
    if (!dashboard[type]) {
      dashboard[type] = {
        count: 0,
        totalSize: 0,
        totalDuration: 0,
        maxDuration: 0,
        cachedCount: 0,
        entries: [],
      };
    }
 
    const group = dashboard[type];
    group.count++;
    group.totalSize += r.transferSize;
    group.totalDuration += r.duration;
    group.maxDuration = Math.max(group.maxDuration, r.duration);
 
    if (r.transferSize === 0 && r.decodedBodySize > 0) {
      group.cachedCount++;
    }
 
    group.entries.push(r);
  });
 
  // 集計結果のフォーマット
  const summary = Object.entries(dashboard).map(([type, data]) => ({
    type,
    count: data.count,
    totalSize: `${(data.totalSize / 1024).toFixed(1)}KB`,
    avgDuration: `${(data.totalDuration / data.count).toFixed(0)}ms`,
    maxDuration: `${data.maxDuration.toFixed(0)}ms`,
    cacheHitRate: `${((data.cachedCount / data.count) * 100).toFixed(0)}%`,
  }));
 
  console.table(summary);
  return summary;
}

// Timing-Allow-Origin の確認と影響の検出
function checkTimingAccess() {
  const resources = performance.getEntriesByType('resource');
  const crossOrigin = resources.filter(r => {
    try {
      return new URL(r.name).origin !== location.origin;
    } catch {
      return false;
    }
  });
 
  const restricted = crossOrigin.filter(r =>
    r.requestStart === 0 && r.responseStart === 0
  );
 
  console.log(`クロスオリジンリソース: ${crossOrigin.length}件`);
  console.log(`タイミング制限あり: ${restricted.length}件`);
  console.log('制限リソース一覧:');
  restricted.forEach(r => {
    console.log(`  - ${new URL(r.name).hostname}${new URL(r.name).pathname}`);
  });
}

// ==================================================
// User Timing API の基本操作と応用パターン
// ==================================================
 
// (1) 基本的な mark と measure
performance.mark('app-init-start');
 
// アプリケーション初期化処理
initializeApp();
loadConfiguration();
setupEventHandlers();
 
performance.mark('app-init-end');
 
// 2つの mark 間の時間を計測
performance.measure('app-initialization', 'app-init-start', 'app-init-end');
 
const initMeasure = performance.getEntriesByName('app-initialization')[0];
console.log(`アプリ初期化: ${initMeasure.duration.toFixed(2)}ms`);
 
 
// (2) mark にメタデータを付与（Performance API Level 3）
performance.mark('data-fetch-complete', {
  detail: {
    endpoint: '/api/users',
    recordCount: 150,
    cacheHit: false,
  },
});
 
// メタデータの取得
const fetchMark = performance.getEntriesByName('data-fetch-complete')[0];
console.log('取得件数:', fetchMark.detail.recordCount);
 
 
// (3) measure にもメタデータを付与可能
performance.measure('api-call', {
  start: 'api-call-start',
  end: 'api-call-end',
  detail: {
    url: '/api/products',
    method: 'GET',
    status: 200,
  },
});
 
 
// (4) navigationStart からの経過時間を計測
performance.measure('time-to-interactive', {
  start: 0,  // navigationStart を起点とする
  end: performance.now(),
});
 
 
// (5) エントリのクリーンアップ
performance.clearMarks('app-init-start');
performance.clearMarks('app-init-end');
performance.clearMeasures('app-initialization');
 
// 全エントリのクリア
performance.clearMarks();     // 全 mark を削除
performance.clearMeasures();  // 全 measure を削除

// ==================================================
// パターン1: 非同期処理の計測ラッパー
// ==================================================
async function measureAsync(name, asyncFn) {
  const markStart = `${name}-start`;
  const markEnd = `${name}-end`;
 
  performance.mark(markStart);
 
  try {
    const result = await asyncFn();
 
    performance.mark(markEnd);
    performance.measure(name, markStart, markEnd);
 
    const entry = performance.getEntriesByName(name).pop();
    console.log(`[Perf] ${name}: ${entry.duration.toFixed(1)}ms`);
 
    return result;
  } catch (error) {
    performance.mark(markEnd);
    performance.measure(`${name}-failed`, markStart, markEnd);
 
    const entry = performance.getEntriesByName(`${name}-failed`).pop();
    console.error(`[Perf] ${name} FAILED: ${entry.duration.toFixed(1)}ms`);
 
    throw error;
  }
}
 
// 使用例
const users = await measureAsync('fetch-users', () =>
  fetch('/api/users').then(r => r.json())
);
 
 
// ==================================================
// パターン2: React コンポーネントのライフサイクル計測
// ==================================================
function usePerformanceMark(componentName) {
  const markPrefix = `component-${componentName}`;
 
  useEffect(() => {
    performance.mark(`${markPrefix}-mount`);
 
    return () => {
      performance.mark(`${markPrefix}-unmount`);
      performance.measure(
        `${markPrefix}-lifetime`,
        `${markPrefix}-mount`,
        `${markPrefix}-unmount`
      );
 
      const entry = performance.getEntriesByName(
        `${markPrefix}-lifetime`
      ).pop();
      console.log(
        `${componentName} lifetime: ${entry.duration.toFixed(0)}ms`
      );
    };
  }, []);
}
 
// 使用例
function ProductList() {
  usePerformanceMark('ProductList');
 
  return (
    <ul>
      {products.map(p => <ProductItem key={p.id} product={p} />)}
    </ul>
  );
}
 
 
// ==================================================
// パターン3: ルーティング遷移の計測
// ==================================================
class RoutePerformanceTracker {
  constructor() {
    this.currentRoute = null;
    this.transitionCount = 0;
  }
 
  startTransition(fromRoute, toRoute) {
    this.transitionCount++;
    const id = `route-transition-${this.transitionCount}`;
 
    performance.mark(`${id}-start`, {
      detail: { from: fromRoute, to: toRoute },
    });
 
    this.currentRoute = { id, from: fromRoute, to: toRoute };
  }
 
  endTransition() {
    if (!this.currentRoute) return;
 
    const { id } = this.currentRoute;
 
    performance.mark(`${id}-end`);
    performance.measure(id, `${id}-start`, `${id}-end`);
 
    const entry = performance.getEntriesByName(id).pop();
    console.log(
      `Route ${this.currentRoute.from} -> ${this.currentRoute.to}: ` +
      `${entry.duration.toFixed(0)}ms`
    );
 
    this.currentRoute = null;
    return entry;
  }
}

// ==================================================
// PerformanceObserver の基本操作
// ==================================================
 
// (1) 特定の entryType を監視
const resourceObserver = new PerformanceObserver((list, observer) => {
  const entries = list.getEntries();
 
  entries.forEach(entry => {
    console.log(`[Resource] ${entry.name}: ${entry.duration.toFixed(0)}ms`);
  });
});
 
// observe の開始
resourceObserver.observe({
  type: 'resource',
  buffered: true,  // 過去のエントリも含める
});
 
 
// (2) 複数の entryType を同時に監視
const multiObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    switch (entry.entryType) {
      case 'resource':
        handleResourceEntry(entry);
        break;
      case 'mark':
        handleMarkEntry(entry);
        break;
      case 'measure':
        handleMeasureEntry(entry);
        break;
    }
  }
});
 
// entryTypes（複数形）で配列を渡す
multiObserver.observe({
  entryTypes: ['resource', 'mark', 'measure'],
});
 
 
// (3) 監視の停止
resourceObserver.disconnect();
 
 
// (4) 監視可能な entryType の一覧を取得
const supportedTypes = PerformanceObserver.supportedEntryTypes;
console.log('サポートされている entryType:', supportedTypes);
// 典型的な出力:
// ['element', 'event', 'first-input', 'largest-contentful-paint',
//  'layout-shift', 'longtask', 'mark', 'measure', 'navigation',
//  'paint', 'resource', 'visibility-state']

// buffered オプションの効果
//
// スクリプト実行時点: T = 3000ms
// ページ読み込み開始: T = 0ms
//
// buffered: false の場合:
//   T=0 ~ T=3000 に発生したエントリは取得できない
//
// buffered: true の場合:
//   T=0 ~ T=3000 に発生したエントリも含めて取得可能
 
// 典型的な使い方（遅延読み込みスクリプトで安全に使用）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 過去のエントリも含めて処理される
    processEntry(entry);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Long Tasks の監視と分析
const longTasks = [];
 
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    longTasks.push({
      startTime: entry.startTime,
      duration: entry.duration,
      // attribution で原因のスクリプトを特定
      attribution: entry.attribution?.map(attr => ({
        name: attr.name,
        containerType: attr.containerType,
        containerSrc: attr.containerSrc,
        containerId: attr.containerId,
        containerName: attr.containerName,
      })),
    });
 
    if (entry.duration > 100) {
      console.warn(
        `[Long Task] ${entry.duration.toFixed(0)}ms at ` +
        `T+${entry.startTime.toFixed(0)}ms`
      );
    }
  }
}).observe({ type: 'longtask', buffered: true });
 
// 一定間隔でサマリーを出力
setInterval(() => {
  if (longTasks.length === 0) return;
 
  const total = longTasks.reduce((sum, t) => sum + t.duration, 0);
  const avg = total / longTasks.length;
  const max = Math.max(...longTasks.map(t => t.duration));
 
  console.log(`Long Tasks サマリー:
    件数: ${longTasks.length}
    合計: ${total.toFixed(0)}ms
    平均: ${avg.toFixed(0)}ms
    最大: ${max.toFixed(0)}ms
  `);
}, 10000);

// ==================================================
// web-vitals ライブラリを使った包括的な計測
// ==================================================
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';
 
// (1) 基本的な使い方
onLCP((metric) => {
  console.log('LCP:', metric.value, 'ms');
  console.log('  評価:', metric.rating);       // 'good' | 'needs-improvement' | 'poor'
  console.log('  要素:', metric.entries);       // LCP の対象要素
  console.log('  delta:', metric.delta, 'ms');  // 前回からの変化量
  console.log('  ID:', metric.id);              // 一意な識別子
  console.log('  navigationType:', metric.navigationType);
  sendToAnalytics({ name: 'LCP', ...metric });
});
 
onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
  console.log('  評価:', metric.rating);
  // INP の entries には最も遅かったインタラクションが含まれる
  const worstEntry = metric.entries[0];
  if (worstEntry) {
    console.log('  イベント種別:', worstEntry.name);
    console.log('  処理時間:', worstEntry.processingEnd - worstEntry.processingStart, 'ms');
    console.log('  入力遅延:', worstEntry.processingStart - worstEntry.startTime, 'ms');
    console.log('  描画遅延:', worstEntry.startTime + worstEntry.duration - worstEntry.processingEnd, 'ms');
  }
  sendToAnalytics({ name: 'INP', ...metric });
});
 
onCLS((metric) => {
  console.log('CLS:', metric.value);
  console.log('  評価:', metric.rating);
  // CLS の entries にはレイアウトシフトの詳細が含まれる
  metric.entries.forEach(entry => {
    console.log('  シフト値:', entry.value);
    console.log('  最近の入力:', entry.hadRecentInput);
    // シフトした要素の特定
    entry.sources?.forEach(source => {
      console.log('  要素:', source.node);
      console.log('  移動前:', source.previousRect);
      console.log('  移動後:', source.currentRect);
    });
  });
  sendToAnalytics({ name: 'CLS', ...metric });
});
 
// (2) 補助指標の計測
onFCP((metric) => {
  console.log('FCP:', metric.value, 'ms');
  sendToAnalytics({ name: 'FCP', ...metric });
});
 
onTTFB((metric) => {
  console.log('TTFB:', metric.value, 'ms');
  sendToAnalytics({ name: 'TTFB', ...metric });
});
 
// (3) 分析データの送信関数
function sendToAnalytics(data) {
  const payload = JSON.stringify({
    name: data.name,
    value: data.value,
    rating: data.rating,
    delta: data.delta,
    id: data.id,
    navigationType: data.navigationType,
    url: location.href,
    timestamp: Date.now(),
    // デバイス情報
    connection: navigator.connection?.effectiveType,
    deviceMemory: navigator.deviceMemory,
    hardwareConcurrency: navigator.hardwareConcurrency,
  });
 
  // Beacon API で確実に送信
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/web-vitals', payload);
  } else {
    fetch('/api/web-vitals', {
      method: 'POST',
      body: payload,
      keepalive: true,
    });
  }
}

// ==================================================
// PerformanceObserver による手動計測
// ==================================================
 
// --- LCP の手動計測 ---
// LCP は複数回報告される（最後の値が最終的な LCP）
let lcpValue = 0;
let lcpElement = null;
 
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
 
  lcpValue = lastEntry.startTime;
  lcpElement = lastEntry.element;  // LCP の対象 DOM 要素
 
  console.log('LCP 候補:', {
    value: lcpValue.toFixed(0) + 'ms',
    element: lcpElement?.tagName,
    url: lastEntry.url,           // 画像の場合の URL
    size: lastEntry.size,         // 要素の面積（ピクセル）
    loadTime: lastEntry.loadTime, // リソースの読み込み完了時刻
    renderTime: lastEntry.renderTime, // レンダリング時刻
  });
}).observe({ type: 'largest-contentful-paint', buffered: true });
 
 
// --- CLS の手動計測 ---
// CLS は Session Window 方式で計算する
let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];
let previousSessionEnd = 0;
 
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // ユーザー入力に起因するシフトは除外
    if (entry.hadRecentInput) continue;
 
    // Session Window のルール:
    // - 1秒以上のギャップがあれば新しいセッション
    // - セッションの長さは最大5秒
    if (
      sessionEntries.length > 0 &&
      (entry.startTime - previousSessionEnd > 1000 ||
       entry.startTime - sessionEntries[0].startTime > 5000)
    ) {
      // 新しいセッションの開始
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = [...sessionEntries];
      }
      sessionValue = 0;
      sessionEntries = [];
    }
 
    sessionValue += entry.value;
    sessionEntries.push(entry);
    previousSessionEnd = entry.startTime + entry.duration;
  }
 
  // 現在のセッションが最大の場合も更新
  if (sessionValue > clsValue) {
    clsValue = sessionValue;
    clsEntries = [...sessionEntries];
  }
 
  console.log('CLS:', clsValue.toFixed(4));
}).observe({ type: 'layout-shift', buffered: true });
 
 
// --- INP の手動計測 ---
// INP は全インタラクションの中で最も遅い応答を基準とする
// （98パーセンタイル値を使用）
const interactions = [];
 
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // interactionId を持つエントリのみがインタラクション
    if (!entry.interactionId) continue;
 
    const existing = interactions.find(
      i => i.interactionId === entry.interactionId
    );
 
    if (existing) {
      // 同一インタラクションの複数イベントは最大値を採用
      existing.duration = Math.max(existing.duration, entry.duration);
    } else {
      interactions.push({
        interactionId: entry.interactionId,
        duration: entry.duration,
        name: entry.name,
        startTime: entry.startTime,
        processingStart: entry.processingStart,
        processingEnd: entry.processingEnd,
        target: entry.target,
      });
    }
  }
 
  // INP の計算（98パーセンタイル）
  if (interactions.length > 0) {
    const sorted = [...interactions].sort(
      (a, b) => b.duration - a.duration
    );
    // 50件以上のインタラクションがある場合は98パーセンタイル
    const index = Math.min(
      sorted.length - 1,
      Math.floor(sorted.length / 50)
    );
    const inp = sorted[index].duration;
    console.log('INP:', inp, 'ms');
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

// INP の各フェーズを分解して分析する
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.interactionId) continue;
 
    const inputDelay = entry.processingStart - entry.startTime;
    const processingTime = entry.processingEnd - entry.processingStart;
    const presentationDelay = entry.startTime + entry.duration
      - entry.processingEnd;
 
    if (entry.duration > 200) {
      console.warn(`[INP 警告] ${entry.name} on ${entry.target?.tagName}`, {
        total: `${entry.duration}ms`,
        inputDelay: `${inputDelay.toFixed(0)}ms`,
        processingTime: `${processingTime.toFixed(0)}ms`,
        presentationDelay: `${presentationDelay.toFixed(0)}ms`,
        bottleneck: inputDelay > processingTime
          ? (inputDelay > presentationDelay ? 'Input Delay' : 'Presentation')
          : (processingTime > presentationDelay ? 'Processing' : 'Presentation'),
      });
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

// lighthouserc.js - Lighthouse CI 設定ファイル
module.exports = {
  ci: {
    collect: {
      // 計測対象の URL 一覧
      url: [
        'http://localhost:3000/',
        'http://localhost:3000/products',
        'http://localhost:3000/checkout',
      ],
      // 計測回数（中央値を採用するため奇数が推奨）
      numberOfRuns: 5,
      // Chrome の起動オプション
      settings: {
        chromeFlags: '--no-sandbox --headless',
        // スロットリング設定（モバイル 4G 相当）
        throttling: {
          cpuSlowdownMultiplier: 4,
          downloadThroughputKbps: 1600,
          uploadThroughputKbps: 750,
          rttMs: 150,
        },
        // フォームファクター
        formFactor: 'mobile',
        screenEmulation: {
          mobile: true,
          width: 412,
          height: 823,
          deviceScaleFactor: 1.75,
        },
      },
    },
    assert: {
      // パフォーマンスバジェット
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        // 個別メトリクスの閾値
        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['error', { maxNumericValue: 200 }],
        'speed-index': ['warn', { maxNumericValue: 3400 }],
        // リソースサイズの制限
        'resource-summary:script:size': [
          'error', { maxNumericValue: 300 * 1024 },  // 300KB
        ],
        'resource-summary:total:size': [
          'warn', { maxNumericValue: 1500 * 1024 },   // 1.5MB
        ],
      },
    },
    upload: {
      // Lighthouse CI Server にアップロード
      target: 'lhci',
      serverBaseUrl: 'https://lhci.example.com',
      token: process.env.LHCI_TOKEN,
    },
  },
};

# .github/workflows/lighthouse.yml
name: Lighthouse CI
 
on:
  pull_request:
    branches: [main]
 
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Install dependencies
        run: npm ci
 
      - name: Build application
        run: npm run build
 
      - name: Start server
        run: npm run preview &
        env:
          PORT: 3000
 
      - name: Wait for server
        run: npx wait-on http://localhost:3000 --timeout 30000
 
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
      - name: Upload Lighthouse results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: lighthouse-results
          path: .lighthouseci/

// Node.js で Lighthouse をプログラマティックに実行する
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';
 
async function runLighthouse(url, options = {}) {
  // Chrome を起動
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless', '--no-sandbox'],
  });
 
  const defaultOptions = {
    logLevel: 'info',
    output: 'json',
    port: chrome.port,
    onlyCategories: ['performance'],
    // カスタムスロットリング設定
    throttling: {
      cpuSlowdownMultiplier: 4,
      downloadThroughputKbps: 1600,
      uploadThroughputKbps: 750,
      rttMs: 150,
    },
  };
 
  const mergedOptions = { ...defaultOptions, ...options };
 
  try {
    const result = await lighthouse(url, mergedOptions);
 
    // スコアと各メトリクスの取得
    const { lhr } = result;
    const perfScore = lhr.categories.performance.score * 100;
 
    const metrics = {
      score: perfScore,
      fcp: lhr.audits['first-contentful-paint'].numericValue,
      lcp: lhr.audits['largest-contentful-paint'].numericValue,
      tbt: lhr.audits['total-blocking-time'].numericValue,
      cls: lhr.audits['cumulative-layout-shift'].numericValue,
      si: lhr.audits['speed-index'].numericValue,
      tti: lhr.audits['interactive'].numericValue,
    };
 
    console.log(`Performance Score: ${perfScore}/100`);
    console.table(metrics);
 
    // 改善提案の取得
    const opportunities = Object.values(lhr.audits)
      .filter(audit => audit.details?.type === 'opportunity')
      .filter(audit => audit.details?.overallSavingsMs > 0)
      .sort((a, b) =>
        b.details.overallSavingsMs - a.details.overallSavingsMs
      )
      .map(audit => ({
        title: audit.title,
        savings: `${audit.details.overallSavingsMs.toFixed(0)}ms`,
        description: audit.description,
      }));
 
    console.log('改善提案:');
    opportunities.forEach((opp, i) => {
      console.log(`  ${i + 1}. ${opp.title} (${opp.savings} 削減可能)`);
    });
 
    return { metrics, opportunities, fullReport: lhr };
  } finally {
    await chrome.kill();
  }
}
 
// 使用例
const result = await runLighthouse('https://example.com');

// ==================================================
// パフォーマンスデータ送信の実装パターン
// ==================================================
 
class PerformanceReporter {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.buffer = [];
    this.flushInterval = 10000; // 10秒ごとにバッファをフラッシュ
    this.maxBufferSize = 50;    // バッファの最大件数
 
    this._setupAutoFlush();
    this._setupUnloadHandler();
  }
 
  // メトリクスをバッファに追加
  record(metric) {
    this.buffer.push({
      ...metric,
      timestamp: Date.now(),
      url: location.href,
      userAgent: navigator.userAgent,
      connection: navigator.connection?.effectiveType || 'unknown',
      deviceMemory: navigator.deviceMemory || 'unknown',
    });
 
    // バッファが上限に達したら即時フラッシュ
    if (this.buffer.length >= this.maxBufferSize) {
      this.flush();
    }
  }
 
  // バッファの内容を送信
  flush() {
    if (this.buffer.length === 0) return;
 
    const payload = JSON.stringify(this.buffer);
    this.buffer = [];
 
    // Beacon API を優先使用
    if (navigator.sendBeacon) {
      const blob = new Blob([payload], { type: 'application/json' });
      const success = navigator.sendBeacon(this.endpoint, blob);
 
      if (!success) {
        // Beacon API が失敗した場合のフォールバック
        this._fetchFallback(payload);
      }
      return;
    }
 
    this._fetchFallback(payload);
  }
 
  _fetchFallback(payload) {
    fetch(this.endpoint, {
      method: 'POST',
      body: payload,
      headers: { 'Content-Type': 'application/json' },
      keepalive: true,  // ページ離脱後も送信を継続
    }).catch(err => {
      console.warn('パフォーマンスデータの送信に失敗:', err);
    });
  }
 
  _setupAutoFlush() {
    setInterval(() => this.flush(), this.flushInterval);
  }
 
  _setupUnloadHandler() {
    // visibilitychange は unload/beforeunload より確実
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.flush();
      }
    });
  }
}
 
// 使用例
const reporter = new PerformanceReporter('/api/performance');
 
// web-vitals と統合
import { onLCP, onINP, onCLS } from 'web-vitals';
 
onLCP(metric => reporter.record({ name: 'LCP', value: metric.value, rating: metric.rating }));
onINP(metric => reporter.record({ name: 'INP', value: metric.value, rating: metric.rating }));
onCLS(metric => reporter.record({ name: 'CLS', value: metric.value, rating: metric.rating }));

// ==================================================
// RUM データ収集の包括的な実装
// ==================================================
class RUMCollector {
  constructor(config) {
    this.config = {
      endpoint: config.endpoint,
      sampleRate: config.sampleRate || 1.0,  // 1.0 = 100%
      appVersion: config.appVersion || 'unknown',
      environment: config.environment || 'production',
    };
 
    // サンプリング判定
    this.shouldCollect = Math.random() < this.config.sampleRate;
 
    if (this.shouldCollect) {
      this._initCollectors();
    }
  }
 
  _initCollectors() {
    this._collectNavigationTiming();
    this._collectWebVitals();
    this._collectResourceTiming();
    this._collectErrors();
    this._collectLongTasks();
  }
 
  _collectNavigationTiming() {
    // ページ読み込み完了後に計測
    window.addEventListener('load', () => {
      setTimeout(() => {
        const nav = performance.getEntriesByType('navigation')[0];
        if (!nav) return;
 
        this._send('navigation', {
          dns: nav.domainLookupEnd - nav.domainLookupStart,
          tcp: nav.connectEnd - nav.connectStart,
          ttfb: nav.responseStart - nav.requestStart,
          download: nav.responseEnd - nav.responseStart,
          domProcessing: nav.domContentLoadedEventEnd - nav.responseEnd,
          loadComplete: nav.loadEventEnd - nav.startTime,
          transferSize: nav.transferSize,
          protocol: nav.nextHopProtocol,
          type: nav.type,
        });
      }, 0);
    });
  }
 
  _collectWebVitals() {
    // 動的インポートで web-vitals を読み込み
    import('web-vitals').then(({ onLCP, onINP, onCLS, onFCP, onTTFB }) => {
      onLCP(m => this._send('vital', { name: 'LCP', value: m.value, rating: m.rating }));
      onINP(m => this._send('vital', { name: 'INP', value: m.value, rating: m.rating }));
      onCLS(m => this._send('vital', { name: 'CLS', value: m.value, rating: m.rating }));
      onFCP(m => this._send('vital', { name: 'FCP', value: m.value, rating: m.rating }));
      onTTFB(m => this._send('vital', { name: 'TTFB', value: m.value, rating: m.rating }));
    });
  }
 
  _collectResourceTiming() {
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        // 遅いリソースのみ報告（閾値: 2秒）
        if (entry.duration > 2000) {
          this._send('slow-resource', {
            url: entry.name,
            type: entry.initiatorType,
            duration: entry.duration,
            size: entry.transferSize,
            cached: entry.transferSize === 0 && entry.decodedBodySize > 0,
          });
        }
      }
    }).observe({ type: 'resource', buffered: true });
  }
 
  _collectErrors() {
    window.addEventListener('error', (event) => {
      this._send('error', {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        type: 'uncaught',
      });
    });
 
    window.addEventListener('unhandledrejection', (event) => {
      this._send('error', {
        message: event.reason?.message || String(event.reason),
        type: 'unhandled-rejection',
      });
    });
  }
 
  _collectLongTasks() {
    if (!PerformanceObserver.supportedEntryTypes.includes('longtask')) {
      return;
    }
 
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.duration > 100) {
          this._send('long-task', {
            duration: entry.duration,
            startTime: entry.startTime,
          });
        }
      }
    }).observe({ type: 'longtask' });
  }
 
  _send(type, data) {
    const payload = {
      type,
      data,
      context: {
        url: location.href,
        referrer: document.referrer,
        appVersion: this.config.appVersion,
        environment: this.config.environment,
        timestamp: Date.now(),
        sessionId: this._getSessionId(),
        viewport: {
          width: window.innerWidth,
          height: window.innerHeight,
        },
        connection: {
          effectiveType: navigator.connection?.effectiveType,
          downlink: navigator.connection?.downlink,
          rtt: navigator.connection?.rtt,
          saveData: navigator.connection?.saveData,
        },
      },
    };
 
    const body = JSON.stringify(payload);
 
    if (navigator.sendBeacon) {
      navigator.sendBeacon(this.config.endpoint, body);
    } else {
      fetch(this.config.endpoint, {
        method: 'POST',
        body,
        keepalive: true,
      }).catch(() => {});
    }
  }
 
  _getSessionId() {
    let sessionId = sessionStorage.getItem('rum-session-id');
    if (!sessionId) {
      sessionId = crypto.randomUUID();
      sessionStorage.setItem('rum-session-id', sessionId);
    }
    return sessionId;
  }
}
 
// 初期化
const rum = new RUMCollector({
  endpoint: '/api/rum',
  sampleRate: 0.1,  // 10% のユーザーからデータ収集
  appVersion: '2.3.1',
  environment: 'production',
});

// package.json に size-limit の設定を追加
// package.json (抜粋)
{
  "size-limit": [
    {
      "name": "メインバンドル",
      "path": "dist/assets/index-*.js",
      "limit": "150 kB",
      "gzip": true
    },
    {
      "name": "CSS",
      "path": "dist/assets/index-*.css",
      "limit": "30 kB",
      "gzip": true
    },
    {
      "name": "ベンダーバンドル",
      "path": "dist/assets/vendor-*.js",
      "limit": "200 kB",
      "gzip": true
    },
    {
      "name": "初期読み込み合計",
      "path": [
        "dist/assets/index-*.js",
        "dist/assets/index-*.css",
        "dist/assets/vendor-*.js"
      ],
      "limit": "350 kB",
      "gzip": true
    }
  ],
  "scripts": {
    "size": "size-limit",
    "size:check": "size-limit --json"
  }
}

// ==================================================
// パフォーマンスバジェットの定義と検証
// ==================================================
 
const PERFORMANCE_BUDGETS = {
  // Core Web Vitals バジェット
  vitals: {
    LCP: { good: 2500, poor: 4000, unit: 'ms' },
    INP: { good: 200, poor: 500, unit: 'ms' },
    CLS: { good: 0.1, poor: 0.25, unit: '' },
    FCP: { good: 1800, poor: 3000, unit: 'ms' },
    TTFB: { good: 800, poor: 1800, unit: 'ms' },
  },
 
  // リソースバジェット
  resources: {
    totalTransferSize: 1500 * 1024,   // 1.5MB
    totalRequests: 80,
    scriptSize: 300 * 1024,           // 300KB
    imageSize: 500 * 1024,            // 500KB
    fontSize: 100 * 1024,             // 100KB
    thirdPartySize: 200 * 1024,       // 200KB
  },
 
  // タイミングバジェット
  timing: {
    domContentLoaded: 3000,  // ms
    loadComplete: 5000,      // ms
    domInteractive: 2000,    // ms
  },
};
 
function checkBudgets(collectedData) {
  const violations = [];
 
  // Core Web Vitals のチェック
  for (const [name, budget] of Object.entries(PERFORMANCE_BUDGETS.vitals)) {
    const value = collectedData.vitals?.[name];
    if (value === undefined) continue;
 
    if (value > budget.poor) {
      violations.push({
        severity: 'error',
        metric: name,
        value: `${value}${budget.unit}`,
        budget: `${budget.poor}${budget.unit}`,
        message: `${name} が不良閾値（${budget.poor}${budget.unit}）を超過`,
      });
    } else if (value > budget.good) {
      violations.push({
        severity: 'warning',
        metric: name,
        value: `${value}${budget.unit}`,
        budget: `${budget.good}${budget.unit}`,
        message: `${name} が良好閾値（${budget.good}${budget.unit}）を超過`,
      });
    }
  }
 
  // リソースバジェットのチェック
  const resources = performance.getEntriesByType('resource');
  const totalSize = resources.reduce((sum, r) => sum + r.transferSize, 0);
  const totalRequests = resources.length;
 
  if (totalSize > PERFORMANCE_BUDGETS.resources.totalTransferSize) {
    violations.push({
      severity: 'error',
      metric: 'Total Transfer Size',
      value: `${(totalSize / 1024).toFixed(0)}KB`,
      budget: `${(PERFORMANCE_BUDGETS.resources.totalTransferSize / 1024).toFixed(0)}KB`,
      message: '合計転送サイズがバジェットを超過',
    });
  }
 
  if (totalRequests > PERFORMANCE_BUDGETS.resources.totalRequests) {
    violations.push({
      severity: 'warning',
      metric: 'Total Requests',
      value: totalRequests,
      budget: PERFORMANCE_BUDGETS.resources.totalRequests,
      message: 'リクエスト数がバジェットを超過',
    });
  }
 
  return violations;
}