Core Web Vitals

// カスタムCLS監視スクリプト
function observeCLS() {
  let clsValue = 0;
  const observer = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (!entry.hadRecentInput) {
        clsValue += entry.value;
        console.log('CLS:', clsValue);
        
        // Analytics に送信
        gtag('event', 'cumulative_layout_shift', {
          value: Math.round(clsValue * 1000),
          metric_value: clsValue
        });
      }
    }
  });
  
  observer.observe({ entryTypes: ['layout-shift'] });
}

// ページロード時にCLS監視を開始
if ('PerformanceObserver' in window) {
  observeCLS();
}

// リアルタイムWeb Vitals監視システム
class WebVitalsMonitor {
  constructor() {
    this.metrics = {};
    this.setupObservers();
  }

  setupObservers() {
    // LCP 測定
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.lcp = lastEntry.startTime;
      this.sendMetric('LCP', lastEntry.startTime);
    }).observe({ entryTypes: ['largest-contentful-paint'] });

    // FID 測定
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        this.metrics.fid = entry.processingStart - entry.startTime;
        this.sendMetric('FID', this.metrics.fid);
      });
    }).observe({ entryTypes: ['first-input'] });

    // CLS 測定
    let clsValue = 0;
    new PerformanceObserver((entryList) => {
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
          this.metrics.cls = clsValue;
          this.sendMetric('CLS', clsValue);
        }
      });
    }).observe({ entryTypes: ['layout-shift'] });
  }

  sendMetric(name, value) {
    // アナリティクスサービスに送信
    gtag('event', 'web_vitals', {
      metric_name: name,
      metric_value: Math.round(value),
      page_url: window.location.href
    });

    // カスタム監視エンドポイントに送信
    fetch('/api/metrics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        metric: name,
        value: value,
        url: window.location.href,
        timestamp: Date.now(),
        userAgent: navigator.userAgent
      })
    });
  }
}

// 監視開始
const monitor = new WebVitalsMonitor();

// Service Worker キャッシュ戦略
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/css/critical.css',
  '/js/critical.js',
  '/images/hero.webp'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // キャッシュがあれば返す、なければネットワークから取得
        return response || fetch(event.request);
      }
    )
  );
});

// 包括的な監視システム
class CoreWebVitalsMonitor {
  constructor(config) {
    this.config = config;
    this.metrics = new Map();
    this.alerts = [];
    this.setupRealtimeMonitoring();
    this.setupPeriodicAudits();
  }

  setupRealtimeMonitoring() {
    // リアルタイム RUM データ収集
    const observer = new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        this.recordMetric(entry.entryType, entry);
        this.checkThresholds(entry.entryType, entry.value);
      });
    });

    observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
  }

  setupPeriodicAudits() {
    // 定期的な Lighthouse 監査
    setInterval(async () => {
      const auditResults = await this.runLighthouseAudit();
      this.compareWithBaseline(auditResults);
      this.updateTrends(auditResults);
    }, this.config.auditInterval);
  }

  checkThresholds(metricType, value) {
    const threshold = this.config.thresholds[metricType];
    if (value > threshold) {
      this.triggerAlert(metricType, value, threshold);
    }
  }

  triggerAlert(metric, value, threshold) {
    const alert = {
      timestamp: Date.now(),
      metric,
      value,
      threshold,
      severity: this.calculateSeverity(value, threshold)
    };

    this.alerts.push(alert);
    this.sendNotification(alert);
  }

  async sendNotification(alert) {
    // Slack/Email/PagerDuty等への通知
    await fetch('/api/alerts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(alert)
    });
  }
}

// 監視システム初期化
const monitor = new CoreWebVitalsMonitor({
  auditInterval: 1800000, // 30分ごと
  thresholds: {
    'largest-contentful-paint': 2500,
    'first-input': 100,
    'layout-shift': 0.1
  }
});

# GitHub Actions でのCore Web Vitals チェック
name: Performance Check
on:
  pull_request:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build site
        run: npm run build
        
      - name: Serve site
        run: npm run serve &
        
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.9.x
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          
      - name: Check Core Web Vitals
        run: |
          node scripts/check-cwv-thresholds.js
          
  # パフォーマンス予算チェック
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Check bundle size
        uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

// ダッシュボード用データ可視化
class WebVitalsDashboard {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.charts = {};
    this.setupCharts();
    this.startRealtimeUpdates();
  }

  setupCharts() {
    // LCP トレンドチャート
    this.charts.lcp = new Chart(this.container.querySelector('#lcp-chart'), {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: 'LCP (ms)',
          data: [],
          borderColor: 'rgb(59, 130, 246)',
          backgroundColor: 'rgba(59, 130, 246, 0.1)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: 4000,
            title: {
              display: true,
              text: 'Time (ms)'
            }
          }
        },
        plugins: {
          annotation: {
            annotations: {
              goodThreshold: {
                type: 'line',
                yMin: 2500,
                yMax: 2500,
                borderColor: 'green',
                borderWidth: 2,
                label: {
                  content: 'Good (≤2.5s)',
                  enabled: true
                }
              }
            }
          }
        }
      }
    });
  }

  startRealtimeUpdates() {
    // WebSocket またはポーリングでリアルタイム更新
    setInterval(async () => {
      const metrics = await this.fetchLatestMetrics();
      this.updateCharts(metrics);
      this.updateSummaryCards(metrics);
    }, 30000); // 30秒ごと
  }

  async fetchLatestMetrics() {
    const response = await fetch('/api/metrics/latest');
    return response.json();
  }

  updateCharts(metrics) {
    // チャートデータの更新
    Object.keys(this.charts).forEach(metric => {
      if (metrics[metric]) {
        this.charts[metric].data.labels.push(new Date().toLocaleTimeString());
        this.charts[metric].data.datasets[0].data.push(metrics[metric]);
        
        // 最新50ポイントのみ保持
        if (this.charts[metric].data.labels.length > 50) {
          this.charts[metric].data.labels.shift();
          this.charts[metric].data.datasets[0].data.shift();
        }
        
        this.charts[metric].update();
      }
    });
  }
}

// ダッシュボード初期化
const dashboard = new WebVitalsDashboard('cwv-dashboard');