Core Web Vitals対策｜LCP・INP・CLS改善の実践ガイド

<!-- Critical Resource Hints -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- Hero画像のpreload -->
<link rel="preload" as="image" href="/hero-image.webp">

<!-- 最適化された画像タグ -->
<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"
       loading="eager"
       decoding="async">
</picture>

<!-- Critical CSS inline -->
<style>
  /* Above-the-fold styles */
  .hero { display: flex; min-height: 100vh; }
</style>

<!-- Non-critical CSS preload -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Async JavaScript -->
<script src="/js/app.js" async></script>

// 悪い例：メインスレッドをブロックする重い処理
function heavyComputation() {
  for (let i = 0; i < 1000000; i++) {
    // 重い計算処理
  }
}
document.addEventListener('click', heavyComputation);

// 良い例：処理を分割してメインスレッドを解放
function heavyComputationOptimized() {
  return new Promise(resolve => {
    function chunk(start) {
      const end = Math.min(start + 1000, 1000000);
      for (let i = start; i < end; i++) {
        // 処理の一部
      }

      if (end < 1000000) {
        setTimeout(() => chunk(end), 0);
      } else {
        resolve();
      }
    }
    chunk(0);
  });
}

document.addEventListener('click', async () => {
  await heavyComputationOptimized();
});

// 動的インポートの例
document.addEventListener('click', async (e) => {
  if (e.target.classList.contains('chart-button')) {
    const { ChartLibrary } = await import('./chart-library.js');
    new ChartLibrary().render();
  }
});

// Webpack設定例（webpack.config.js）
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

// メインスレッド (main.js)
const worker = new Worker('worker.js');

document.addEventListener('click', () => {
  worker.postMessage({ data: largeDataSet });
});

worker.onmessage = (e) => {
  // 結果を受信してUIを更新
  updateUI(e.data.result);
};

// Web Worker (worker.js)
self.onmessage = function(e) {
  const result = processLargeDataSet(e.data.data);
  self.postMessage({ result });
};

<!-- 悪い例：サイズ指定なし -->
<img src="image.jpg" alt="Sample Image">

<!-- 良い例：width/height指定 -->
<img src="image.jpg"
     alt="Sample Image"
     width="800"
     height="600">

<!-- さらに良い例：aspect-ratioでレスポンシブ対応 -->
<img src="image.jpg"
     alt="Sample Image"
     style="aspect-ratio: 4/3; width: 100%; height: auto;">

<!-- CSS aspect-ratio property -->
<style>
.responsive-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
</style>

/* 広告スペースの事前確保 */
.ad-container {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.ad-container::before {
  content: "広告読み込み中...";
  color: #999;
}

/* 動的コンテンツのプレースホルダー */
.content-placeholder {
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

<!-- フォントの事前読み込み -->
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>

<style>
/* font-display: swap でFOUTを最小化 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
}

/* フォールバックフォントとのサイズ調整 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}
</style>

/* 悪い例：layout propertiesの変更 */
.bad-animation {
  transition: height 0.3s ease;
}
.bad-animation:hover {
  height: 200px; /* レイアウト移動を引き起こす */
}

/* 良い例：transform/opacityの使用 */
.good-animation {
  height: 100px;
  transform: scaleY(1);
  transition: transform 0.3s ease;
}
.good-animation:hover {
  transform: scaleY(2); /* レイアウト移動なし */
}

/* さらに良い例：will-changeでパフォーマンス最適化 */
.optimized-animation {
  will-change: transform;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.optimized-animation:hover {
  transform: translateY(-10px);
}

// カスタム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();
}

# CLI での Lighthouse 実行
npm install -g lighthouse
lighthouse https://example.com --output=html

# CI/CD での自動実行
lighthouse https://example.com --output=json --quiet

// PageSpeed Insights API 使用例
const API_KEY = 'YOUR_API_KEY';
const url = 'https://example.com';

fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&key=${API_KEY}&category=performance`)
  .then(response => response.json())
  .then(data => {
    const metrics = data.lighthouseResult.audits;
    console.log('LCP:', metrics['largest-contentful-paint'].displayValue);
    console.log('FID:', metrics['max-potential-fid'].displayValue);
    console.log('CLS:', metrics['cumulative-layout-shift'].displayValue);
  });

// リアルタイム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();

<!-- Critical Resource Hints の活用 -->
<head>
  <!-- DNS預解析 -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//cdn.example.com">

  <!-- 重要リソースのpreload -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/css/critical.css" as="style">
  <link rel="preload" href="/js/critical.js" as="script">

  <!-- 次ページのprefetch -->
  <link rel="prefetch" href="/next-page.html">

  <!-- 重要画像のpreload -->
  <link rel="preload" href="/hero-image.webp" as="image">
</head>

/* Critical CSS（Above the fold） */
.header, .hero, .main-nav {
  /* 即座に表示される要素のスタイル */
}

/* 非クリティカルCSS読み込み */
<link rel="preload" href="/css/below-fold.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

/* CSS Containment でレンダリング範囲を制限 */
.component {
  contain: layout style paint;
}

.isolated-widget {
  contain: strict;
}

/* Intersection Observer でlazy loading */
.lazy-element {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazy-element.loaded {
  opacity: 1;
}

// バンドル分割とlazy loading
const ComponentA = lazy(() => import('./ComponentA'));
const ComponentB = lazy(() => import('./ComponentB'));

// 非同期処理の最適化
function optimizeAsyncWork() {
  return new Promise(resolve => {
    function processChunk(startIndex) {
      const endIndex = Math.min(startIndex + 100, totalItems);

      for (let i = startIndex; i < endIndex; i++) {
        // 処理実行
      }

      if (endIndex < totalItems) {
        // メインスレッドを解放して次のチャンクを処理
        setTimeout(() => processChunk(endIndex), 0);
      } else {
        resolve();
      }
    }
    processChunk(0);
  });
}

// Intersection Observer の効率的な使用
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
}, {
  rootMargin: '50px 0px',
  threshold: 0.1
});

// 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);
      }
    )
  );
});

// ネットワーク状況に応じた最適化
function getNetworkQuality() {
  if ('connection' in navigator) {
    const connection = navigator.connection;
    return {
      effectiveType: connection.effectiveType,
      downlink: connection.downlink,
      rtt: connection.rtt,
      saveData: connection.saveData
    };
  }
  return null;
}

// 品質に応じたリソース配信
function optimizeForConnection() {
  const network = getNetworkQuality();

  if (!network) return;

  if (network.saveData || network.effectiveType === 'slow-2g') {
    // データセーバーモード
    document.body.classList.add('data-saver');
    disableNonEssentialFeatures();
  } else if (network.effectiveType === '3g') {
    // 中品質モード
    loadMediumQualityImages();
  } else {
    // 高品質モード
    loadHighQualityImages();
  }
}

// レスポンシブ画像の動的調整
function setupAdaptiveImages() {
  const images = document.querySelectorAll('img[data-responsive]');
  const network = getNetworkQuality();

  images.forEach(img => {
    let quality = 'high';
    if (network?.effectiveType === '2g' || network?.effectiveType === 'slow-2g') {
      quality = 'low';
    } else if (network?.effectiveType === '3g') {
      quality = 'medium';
    }

    img.src = img.dataset[`src${quality.charAt(0).toUpperCase() + quality.slice(1)}`];
  });
}

/* タッチフレンドリーなインターフェース */
.touch-target {
  min-height: 44px; /* iOS推奨最小サイズ */
  min-width: 44px;
  margin: 8px; /* タップ誤差を考慮 */
}

/* タッチ応答性の向上 */
.button {
  touch-action: manipulation; /* ダブルタップズーム無効化 */
  user-select: none; /* テキスト選択防止 */
}

/* スムーズスクロール */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* タッチイベント最適化 */
.interactive-element {
  will-change: transform; /* GPU acceleration */
  transform: translateZ(0); /* 合成レイヤー作成 */
}

// プログレッシブ画像読み込み
class ProgressiveImageLoader {
  constructor(imageElement) {
    this.img = imageElement;
    this.lowQualitySrc = this.img.dataset.lowres;
    this.highQualitySrc = this.img.dataset.highres;
    this.loadProgressive();
  }

  loadProgressive() {
    // 1. 低画質版を即座に表示
    this.img.src = this.lowQualitySrc;
    this.img.style.filter = 'blur(5px)';

    // 2. 高画質版をバックグラウンドで読み込み
    const highQualityImg = new Image();
    highQualityImg.onload = () => {
      this.img.src = this.highQualitySrc;
      this.img.style.filter = 'blur(0)';
      this.img.style.transition = 'filter 0.3s ease';
    };
    highQualityImg.src = this.highQualitySrc;
  }
}

// Intersection Observer と組み合わせ
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      new ProgressiveImageLoader(entry.target);
      imageObserver.unobserve(entry.target);
    }
  });
}, {
  rootMargin: '50px',
  threshold: 0.1
});

document.querySelectorAll('img[data-progressive]').forEach(img => {
  imageObserver.observe(img);
});

// 包括的な監視システム
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');