New Relic Browser監視入門 第9.2章 - Core Web Vitals詳細分析と最適化実践 ​

// 改善前の状況
const beforeOptimization = {
  lcp: "4.2秒",        // 商品画像の読み込み遅延
  fid: "245ms",        // 「カートに追加」ボタンの反応遅延
  cls: "0.28",         // レビューセクションの動的読み込みによるシフト
  conversionRate: "2.1%",
  bounceRate: "68%",
  averageSessionTime: "1.8分"
};

// 最適化実装後の結果
const afterOptimization = {
  lcp: "1.8秒",        // 75%改善（画像最適化・Critical CSS）
  fid: "65ms",         // 73%改善（JavaScript最適化・Web Workers）
  cls: "0.05",         // 82%改善（レイアウト予約・スケルトンスクリーン）
  conversionRate: "3.2%", // 52%向上
  bounceRate: "51%",      // 25%改善
  averageSessionTime: "2.6分" // 44%増加
};

// ビジネス価値の計算
const businessImpact = {
  monthlyRevenue: "従来: $85,000 → 改善後: $129,000 (52%増加)",
  customerExperience: "NPS向上: 32 → 48点 (50%改善)",
  seoRanking: "主要キーワード平均順位: 15位 → 8位",
  developmentROI: "投資: $45,000 → 年間追加売上: $528,000 (ROI: 1,173%)"
};

// LCP要素の動的検出とNew Relicへの送信
class LCPOptimizer {
  constructor() {
    this.lcpElements = [];
    this.observer = new PerformanceObserver(this.handleLCPEntries.bind(this));
    this.observer.observe({ type: 'largest-contentful-paint', buffered: true });
  }

  handleLCPEntries(entries) {
    // 最新のLCP要素を取得
    const lastEntry = entries.getEntries().pop();
    if (!lastEntry) return;

    const lcpData = {
      // 基本的なLCP情報
      startTime: lastEntry.startTime,
      renderTime: lastEntry.renderTime || lastEntry.loadTime,
      size: lastEntry.size,
      
      // LCP要素の詳細分析
      element: {
        tagName: lastEntry.element?.tagName || 'unknown',
        id: lastEntry.element?.id || '',
        className: lastEntry.element?.className || '',
        src: lastEntry.element?.src || '',
        dimensions: {
          width: lastEntry.element?.clientWidth || 0,
          height: lastEntry.element?.clientHeight || 0
        }
      },
      
      // パフォーマンス分析用の追加データ
      url: lastEntry.url || window.location.href,
      resourceType: this.determineResourceType(lastEntry.element),
      isAboveFold: this.isElementAboveFold(lastEntry.element),
      loadingStrategy: this.getLoadingStrategy(lastEntry.element)
    };

    // New Relicへの詳細データ送信
    if (typeof newrelic !== 'undefined') {
      newrelic.addPageAction('LCPMeasurement', {
        lcpTime: lcpData.startTime,
        lcpElement: lcpData.element.tagName,
        lcpSize: lcpData.size,
        elementId: lcpData.element.id,
        resourceType: lcpData.resourceType,
        isOptimized: lcpData.startTime < 2500, // 2.5秒目標値
        pageType: this.getPageType(),
        deviceType: this.getDeviceType(),
        networkType: this.getNetworkType()
      });
    }

    // 問題のあるLCP要素の自動特定
    if (lcpData.startTime > 2500) {
      this.identifyLCPIssues(lcpData);
    }
  }

  // LCP問題の自動分析
  identifyLCPIssues(lcpData) {
    const issues = [];
    
    // 画像最適化の問題検出
    if (lcpData.resourceType === 'image') {
      if (!lcpData.element.loading === 'lazy' && lcpData.isAboveFold) {
        issues.push({
          type: 'unnecessary_lazy_loading',
          severity: 'high',
          recommendation: 'Remove lazy loading from above-the-fold LCP image'
        });
      }
      
      if (lcpData.element.width > 800 && !lcpData.element.srcset) {
        issues.push({
          type: 'missing_responsive_images',
          severity: 'high', 
          recommendation: 'Implement responsive images with srcset'
        });
      }
    }

    // CSS配信の問題検出
    if (lcpData.startTime > 1500 && !this.hasCriticalCSS()) {
      issues.push({
        type: 'missing_critical_css',
        severity: 'medium',
        recommendation: 'Implement critical CSS for above-the-fold content'
      });
    }

    // New Relicに問題レポートを送信
    if (typeof newrelic !== 'undefined' && issues.length > 0) {
      newrelic.addPageAction('LCPIssuesDetected', {
        issueCount: issues.length,
        issues: JSON.stringify(issues),
        lcpTime: lcpData.startTime,
        urgency: issues.some(i => i.severity === 'high') ? 'high' : 'medium'
      });
    }
  }

  // リソースタイプの判定
  determineResourceType(element) {
    if (!element) return 'unknown';
    
    const tagName = element.tagName.toLowerCase();
    if (tagName === 'img') return 'image';
    if (tagName === 'video') return 'video';
    if (tagName === 'svg') return 'svg';
    if (element.style && element.style.backgroundImage) return 'background-image';
    return 'text-block';
  }

  // Above-the-fold判定
  isElementAboveFold(element) {
    if (!element) return false;
    const rect = element.getBoundingClientRect();
    return rect.top < window.innerHeight;
  }
}

// LCP最適化システムの初期化
document.addEventListener('DOMContentLoaded', () => {
  new LCPOptimizer();
});

// 画像配信の自動最適化システム
class ImageOptimizationManager {
  constructor() {
    this.deviceCapabilities = this.detectDeviceCapabilities();
    this.networkCondition = this.detectNetworkCondition();
    this.setupImageObserver();
  }

  // デバイス性能の自動検出
  detectDeviceCapabilities() {
    const capabilities = {
      // CPU性能の推定（JavaScriptベンチマーク）
      cpuScore: this.measureCPUPerformance(),
      
      // メモリ情報（利用可能な場合）
      deviceMemory: navigator.deviceMemory || 4,
      
      // GPU加速対応
      hardwareAcceleration: this.detectGPUAcceleration(),
      
      // 画面解像度とデバイスピクセル比
      screenInfo: {
        width: window.screen.width,
        height: window.screen.height,
        devicePixelRatio: window.devicePixelRatio || 1
      }
    };
    
    return capabilities;
  }

  // ネットワーク状況の動的検出
  detectNetworkCondition() {
    const connection = navigator.connection || 
                     navigator.mozConnection || 
                     navigator.webkitConnection;
    
    if (connection) {
      return {
        effectiveType: connection.effectiveType, // '4g', '3g', '2g', 'slow-2g'
        downlink: connection.downlink,           // Mbps
        rtt: connection.rtt,                     // ms
        saveData: connection.saveData || false   // データセーバーモード
      };
    }
    
    // フォールバック：接続速度の動的測定
    return this.measureNetworkSpeed();
  }

  // 画像配信の動的最適化
  optimizeImageDelivery(imageElement) {
    const optimizationStrategy = this.calculateOptimizationStrategy();
    
    // 1. 画像形式の最適選択
    const optimalFormat = this.selectOptimalImageFormat();
    
    // 2. 画像サイズの動的調整
    const optimalDimensions = this.calculateOptimalDimensions(imageElement);
    
    // 3. 配信タイミングの最適化
    const loadingStrategy = this.determineLoadingStrategy(imageElement);
    
    // 最適化された画像URLの生成
    const optimizedImageUrl = this.buildOptimizedImageUrl({
      originalSrc: imageElement.dataset.originalSrc,
      format: optimalFormat,
      width: optimalDimensions.width,
      height: optimalDimensions.height,
      quality: optimizationStrategy.quality,
      progressive: optimizationStrategy.progressive
    });
    
    // New Relic に最適化情報を送信
    if (typeof newrelic !== 'undefined') {
      newrelic.addPageAction('ImageOptimizationApplied', {
        imageId: imageElement.id || 'unknown',
        originalFormat: this.getImageFormat(imageElement.dataset.originalSrc),
        optimizedFormat: optimalFormat,
        qualityReduction: optimizationStrategy.quality < 90,
        sizeReduction: this.calculateSizeReduction(imageElement, optimalDimensions),
        networkType: this.networkCondition.effectiveType,
        deviceScore: this.deviceCapabilities.cpuScore
      });
    }
    
    return optimizedImageUrl;
  }

  // 最適化戦略の算出
  calculateOptimizationStrategy() {
    const strategy = {
      quality: 90,        // デフォルト品質
      progressive: true,   // プログレッシブJPEG
      lazyLoad: true      // 遅延読み込み
    };

    // ネットワーク状況に基づく調整
    if (this.networkCondition.effectiveType === '2g' || 
        this.networkCondition.effectiveType === 'slow-2g') {
      strategy.quality = 60;
      strategy.progressive = true;
    } else if (this.networkCondition.effectiveType === '3g') {
      strategy.quality = 75;
    }

    // データセーバーモード対応
    if (this.networkCondition.saveData) {
      strategy.quality = Math.min(strategy.quality, 50);
    }

    // デバイス性能に基づく調整
    if (this.deviceCapabilities.deviceMemory < 2) {
      strategy.quality = Math.min(strategy.quality, 70);
    }

    return strategy;
  }
}

// 画像最適化システムの初期化とLCP監視連携
document.addEventListener('DOMContentLoaded', () => {
  const imageOptimizer = new ImageOptimizationManager();
  
  // LCP画像の特別処理
  const lcpImages = document.querySelectorAll('img[data-lcp="true"]');
  lcpImages.forEach(img => {
    // LCP画像は最高優先度で処理
    img.loading = 'eager';
    img.fetchPriority = 'high';
    
    // 最適化された画像URLを適用
    const optimizedUrl = imageOptimizer.optimizeImageDelivery(img);
    img.src = optimizedUrl;
  });
});

// 高度なJavaScriptタスク最適化システム
class FIDOptimizationManager {
  constructor() {
    this.taskQueue = [];
    this.isProcessing = false;
    this.workerPool = [];
    this.setupPerformanceMonitoring();
    this.initializeWorkerPool();
  }

  // Web Worker プールの初期化
  initializeWorkerPool() {
    const numWorkers = Math.min(navigator.hardwareConcurrency || 4, 4);
    
    for (let i = 0; i < numWorkers; i++) {
      const worker = new Worker('/js/performance-worker.js');
      worker.onmessage = (event) => this.handleWorkerResult(event);
      this.workerPool.push({
        worker: worker,
        busy: false,
        id: i
      });
    }
  }

  // 重い処理のタスク分割実装
  processHeavyTask(taskData, callback) {
    const CHUNK_SIZE = 1000; // 1ミリ秒ごとにタスクを分割
    const chunks = this.splitIntoChunks(taskData, CHUNK_SIZE);
    let processedChunks = [];
    let currentChunkIndex = 0;

    const processNextChunk = () => {
      if (currentChunkIndex >= chunks.length) {
        // すべてのチャンクの処理完了
        const finalResult = this.combineChunkResults(processedChunks);
        callback(finalResult);
        return;
      }

      const startTime = performance.now();
      
      // 現在のチャンクを処理
      const chunkResult = this.processChunk(chunks[currentChunkIndex]);
      processedChunks.push(chunkResult);
      currentChunkIndex++;

      const processingTime = performance.now() - startTime;
      
      // New Relic に処理時間を報告
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('TaskChunkProcessed', {
          chunkIndex: currentChunkIndex - 1,
          processingTime: processingTime,
          remainingChunks: chunks.length - currentChunkIndex,
          taskType: taskData.type || 'unknown'
        });
      }

      // メインスレッドブロッキングの回避
      if (processingTime > 5) { // 5ms以上かかった場合は次フレームに延期
        setTimeout(processNextChunk, 0);
      } else {
        requestIdleCallback(processNextChunk, { timeout: 50 });
      }
    };

    processNextChunk();
  }

  // 長時間実行タスクの Web Worker への委譲
  delegateToWorker(taskData) {
    return new Promise((resolve, reject) => {
      const availableWorker = this.findAvailableWorker();
      
      if (!availableWorker) {
        // Workerが利用できない場合は軽量タスクとして処理
        this.processLightweightTask(taskData).then(resolve).catch(reject);
        return;
      }

      availableWorker.busy = true;
      const taskId = this.generateTaskId();
      
      // タスクの実行時間監視
      const startTime = performance.now();
      
      availableWorker.worker.postMessage({
        id: taskId,
        type: 'process_heavy_task',
        data: taskData
      });

      // 結果待機の設定
      this.pendingTasks = this.pendingTasks || new Map();
      this.pendingTasks.set(taskId, {
        resolve,
        reject,
        startTime,
        workerId: availableWorker.id
      });

      // タイムアウト設定（10秒）
      setTimeout(() => {
        if (this.pendingTasks.has(taskId)) {
          this.pendingTasks.delete(taskId);
          availableWorker.busy = false;
          reject(new Error('Worker task timeout'));
        }
      }, 10000);
    });
  }

  // Worker からの結果処理
  handleWorkerResult(event) {
    const { id, result, error, processingTime } = event.data;
    const taskInfo = this.pendingTasks.get(id);
    
    if (!taskInfo) return;
    
    const worker = this.workerPool.find(w => w.id === taskInfo.workerId);
    if (worker) worker.busy = false;
    
    this.pendingTasks.delete(id);
    
    // New Relic に Worker 処理時間を報告
    if (typeof newrelic !== 'undefined') {
      newrelic.addPageAction('WorkerTaskCompleted', {
        taskId: id,
        processingTime: processingTime,
        totalTime: performance.now() - taskInfo.startTime,
        workerId: taskInfo.workerId,
        success: !error
      });
    }
    
    if (error) {
      taskInfo.reject(new Error(error));
    } else {
      taskInfo.resolve(result);
    }
  }

  // FID に影響を与えるイベントハンドラーの最適化
  optimizeEventHandlers() {
    const criticalElements = document.querySelectorAll('[data-critical-interaction="true"]');
    
    criticalElements.forEach(element => {
      // 既存のイベントリスナーの最適化
      this.optimizeElementEventHandlers(element);
    });
  }

  optimizeElementEventHandlers(element) {
    // クリックイベントの高速化
    element.addEventListener('click', (event) => {
      const startTime = performance.now();
      
      // 即座にUIフィードバックを提供
      this.provideImmediateFeedback(element);
      
      // 重い処理は非同期で実行
      requestIdleCallback(() => {
        this.handleHeavyClickOperation(element, event);
        
        // 処理時間をNew Relicに報告
        if (typeof newrelic !== 'undefined') {
          newrelic.addPageAction('OptimizedClickHandler', {
            elementId: element.id || 'unknown',
            processingTime: performance.now() - startTime,
            wasDeferred: true
          });
        }
      });
    }, { passive: false });

    // タッチイベントの最適化（モバイル対応）
    if ('ontouchstart' in window) {
      element.addEventListener('touchstart', this.optimizedTouchHandler.bind(this), 
                            { passive: true });
    }
  }

  // 即座のUIフィードバック提供
  provideImmediateFeedback(element) {
    // 視覚的フィードバック
    element.style.transform = 'scale(0.98)';
    element.style.transition = 'transform 0.1s ease';
    
    // ハプティックフィードバック（対応デバイス）
    if (navigator.vibrate) {
      navigator.vibrate(50);
    }
    
    setTimeout(() => {
      element.style.transform = '';
    }, 100);
  }
}

// Worker ファイルの内容 (/js/performance-worker.js)
/*
// Web Worker 内で実行される重い処理
self.addEventListener('message', (event) => {
  const { id, type, data } = event.data;
  const startTime = performance.now();
  
  try {
    let result;
    
    switch (type) {
      case 'process_heavy_task':
        result = processHeavyComputation(data);
        break;
      case 'data_transformation':
        result = transformLargeDataset(data);
        break;
      case 'image_processing':
        result = processImageData(data);
        break;
      default:
        throw new Error(`Unknown task type: ${type}`);
    }
    
    const processingTime = performance.now() - startTime;
    
    self.postMessage({
      id,
      result,
      processingTime
    });
    
  } catch (error) {
    self.postMessage({
      id,
      error: error.message,
      processingTime: performance.now() - startTime
    });
  }
});

// 重い計算処理の例
function processHeavyComputation(data) {
  // 複雑なアルゴリズム実行
  let result = 0;
  for (let i = 0; i < data.iterations; i++) {
    result += Math.sqrt(i) * Math.sin(i) * Math.cos(i);
  }
  return result;
}
*/

// FID最適化システムの初期化
document.addEventListener('DOMContentLoaded', () => {
  const fidOptimizer = new FIDOptimizationManager();
  
  // 重要な対話要素の最適化
  fidOptimizer.optimizeEventHandlers();
});

// 高度なCode Splitting戦略
class DynamicLoadingManager {
  constructor() {
    this.loadedModules = new Map();
    this.moduleQueue = new Map();
    this.intersectionObserver = this.setupIntersectionObserver();
  }

  // 重要でない機能の遅延読み込み
  async loadModuleOnDemand(moduleName, triggerElement) {
    // すでに読み込み済みの場合は即座に返却
    if (this.loadedModules.has(moduleName)) {
      return this.loadedModules.get(moduleName);
    }

    // 読み込み中の場合は既存のPromiseを返却
    if (this.moduleQueue.has(moduleName)) {
      return this.moduleQueue.get(moduleName);
    }

    const loadPromise = this.performModuleLoad(moduleName, triggerElement);
    this.moduleQueue.set(moduleName, loadPromise);

    try {
      const module = await loadPromise;
      this.loadedModules.set(moduleName, module);
      this.moduleQueue.delete(moduleName);
      return module;
    } catch (error) {
      this.moduleQueue.delete(moduleName);
      throw error;
    }
  }

  async performModuleLoad(moduleName, triggerElement) {
    const startTime = performance.now();
    
    let module;
    
    try {
      // 動的インポートの実行
      switch (moduleName) {
        case 'chartModule':
          module = await import('./modules/charts.js');
          break;
        case 'advancedFilters':
          module = await import('./modules/advanced-filters.js');
          break;
        case 'dataVisualization':
          module = await import('./modules/data-visualization.js');
          break;
        case 'userPreferences':
          module = await import('./modules/user-preferences.js');
          break;
        default:
          throw new Error(`Unknown module: ${moduleName}`);
      }
      
      const loadTime = performance.now() - startTime;
      
      // New Relic に動的読み込み情報を送信
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('DynamicModuleLoaded', {
          moduleName: moduleName,
          loadTime: loadTime,
          triggerElement: triggerElement?.id || 'unknown',
          memoryUsage: this.getMemoryUsage(),
          wasUserTriggered: !!triggerElement
        });
      }
      
      return module;
      
    } catch (error) {
      // 読み込みエラーの報告
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('DynamicModuleLoadError', {
          moduleName: moduleName,
          errorMessage: error.message,
          loadTime: performance.now() - startTime
        });
      }
      throw error;
    }
  }

  // Intersection Observer を使用した自動的なモジュール読み込み
  setupIntersectionObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const element = entry.target;
          const moduleName = element.dataset.requireModule;
          
          if (moduleName) {
            // 要素が表示されたら対応するモジュールを読み込み
            this.loadModuleOnDemand(moduleName, element);
            observer.unobserve(element); // 一度読み込んだら監視を停止
          }
        }
      });
    }, {
      rootMargin: '50px' // 表示される50px前に読み込み開始
    });

    return observer;
  }

  // 対話的要素の監視開始
  observeElements() {
    const elementsToObserve = document.querySelectorAll('[data-require-module]');
    elementsToObserve.forEach(element => {
      this.intersectionObserver.observe(element);
    });
  }

  // メモリ使用量の監視
  getMemoryUsage() {
    if (performance.memory) {
      return {
        used: performance.memory.usedJSHeapSize,
        total: performance.memory.totalJSHeapSize,
        limit: performance.memory.jsHeapSizeLimit
      };
    }
    return null;
  }
}

// Critical Resource Hints の動的実装
class ResourceHintsOptimizer {
  constructor() {
    this.setupResourceHints();
  }

  setupResourceHints() {
    // DNS prefetch for external domains
    this.addResourceHint('dns-prefetch', 'https://fonts.googleapis.com');
    this.addResourceHint('dns-prefetch', 'https://api.example.com');
    
    // Preconnect for critical third-party resources
    this.addResourceHint('preconnect', 'https://fonts.gstatic.com', true);
    
    // Module preload for critical JavaScript
    this.preloadCriticalModules();
  }

  addResourceHint(rel, href, crossorigin = false) {
    const link = document.createElement('link');
    link.rel = rel;
    link.href = href;
    if (crossorigin) link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  }

  async preloadCriticalModules() {
    // Critical modules that should be preloaded
    const criticalModules = [
      '/js/modules/user-interaction.js',
      '/js/modules/form-validation.js'
    ];

    for (const moduleUrl of criticalModules) {
      const link = document.createElement('link');
      link.rel = 'modulepreload';
      link.href = moduleUrl;
      document.head.appendChild(link);
    }
  }
}

// システムの初期化
document.addEventListener('DOMContentLoaded', () => {
  const dynamicLoader = new DynamicLoadingManager();
  const resourceHints = new ResourceHintsOptimizer();
  
  // 遅延読み込み要素の監視開始
  dynamicLoader.observeElements();
  
  // 重要でないJavaScriptの遅延実行
  setTimeout(() => {
    // 非重要な機能は3秒後に読み込み
    dynamicLoader.loadModuleOnDemand('userPreferences');
  }, 3000);
});

// 包括的なCLS対策システム
class CLSOptimizationManager {
  constructor() {
    this.layoutShiftEntries = [];
    this.cumulativeScore = 0;
    this.setupLayoutShiftObserver();
    this.implementLayoutReservation();
  }

  // Layout Shift の継続的監視
  setupLayoutShiftObserver() {
    if (!('LayoutShift' in window)) {
      console.warn('Layout Shift API not supported');
      return;
    }

    this.observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        // セッションウィンドウ内でのCLS計算
        if (!entry.hadRecentInput) {
          this.cumulativeScore += entry.value;
          this.layoutShiftEntries.push({
            timestamp: entry.startTime,
            value: entry.value,
            sources: entry.sources ? Array.from(entry.sources) : [],
            hadRecentInput: entry.hadRecentInput
          });

          // 問題のあるレイアウトシフトの自動分析
          if (entry.value > 0.1) { // 単一のシフトが大きい場合
            this.analyzeLayoutShiftCause(entry);
          }
        }
      }

      // New Relic への継続的な CLS 報告
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('CLSMeasurement', {
          cumulativeScore: this.cumulativeScore,
          shiftCount: this.layoutShiftEntries.length,
          isGoodCLS: this.cumulativeScore <= 0.1,
          needsImprovement: this.cumulativeScore > 0.1 && this.cumulativeScore <= 0.25,
          isPoorCLS: this.cumulativeScore > 0.25
        });
      }
    });

    this.observer.observe({ type: 'layout-shift', buffered: true });
  }

  // レイアウトシフト原因の自動分析
  analyzeLayoutShiftCause(entry) {
    const causes = [];
    
    if (entry.sources) {
      entry.sources.forEach(source => {
        const element = source.node;
        if (!element) return;

        // 画像の遅延読み込みによるシフト
        if (element.tagName === 'IMG' && !element.width && !element.height) {
          causes.push({
            type: 'image_without_dimensions',
            element: element.src || element.dataset.src,
            recommendation: 'Set explicit width and height attributes'
          });
        }

        // 広告要素によるシフト
        if (element.classList.contains('ad-container') || 
            element.id.includes('ad')) {
          causes.push({
            type: 'advertising_insertion',
            element: element.id || element.className,
            recommendation: 'Pre-reserve space for advertisements'
          });
        }

        // フォント読み込みによるシフト
        if (this.isTextNode(element) && this.hasCustomFont(element)) {
          causes.push({
            type: 'font_loading_shift',
            element: `${element.tagName}.${element.className}`,
            recommendation: 'Use font-display: swap and size-adjust'
          });
        }

        // 動的コンテンツ挿入によるシフト
        if (element.dataset.dynamicContent === 'true') {
          causes.push({
            type: 'dynamic_content_insertion',
            element: element.id || 'dynamic-element',
            recommendation: 'Pre-reserve space for dynamic content'
          });
        }
      });
    }

    // New Relic に詳細な原因分析を送信
    if (typeof newrelic !== 'undefined' && causes.length > 0) {
      newrelic.addPageAction('CLSCauseAnalysis', {
        shiftValue: entry.value,
        causesDetected: causes.length,
        causes: JSON.stringify(causes),
        timestamp: entry.startTime,
        requiresUrgentFix: entry.value > 0.25
      });
    }
  }

  // 包括的なレイアウト予約システム
  implementLayoutReservation() {
    // 1. 画像のレイアウト予約
    this.reserveImageLayout();
    
    // 2. 広告スペースの予約
    this.reserveAdSpace();
    
    // 3. 動的コンテンツエリアの予約
    this.reserveDynamicContentSpace();
    
    // 4. フォント読み込みの最適化
    this.optimizeFontLoading();
  }

  // 画像のレイアウト予約実装
  reserveImageLayout() {
    const images = document.querySelectorAll('img:not([width]):not([height])');
    
    images.forEach(img => {
      // 画像のアスペクト比を設定
      const aspectRatioContainer = document.createElement('div');
      aspectRatioContainer.style.cssText = `
        position: relative;
        width: 100%;
        background-color: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
      `;

      // アスペクト比の計算（デフォルト16:9）
      const aspectRatio = img.dataset.aspectRatio || '16/9';
      aspectRatioContainer.style.aspectRatio = aspectRatio;

      // CSS で padding-bottom を使用したフォールバック
      if (!CSS.supports('aspect-ratio', aspectRatio)) {
        const [width, height] = aspectRatio.split('/').map(Number);
        const paddingBottom = (height / width) * 100;
        aspectRatioContainer.style.paddingBottom = `${paddingBottom}%`;
        aspectRatioContainer.style.height = '0';
      }

      // 画像の絶対配置
      img.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        transition: opacity 0.3s ease;
      `;

      // スケルトンローダーの追加
      const skeleton = this.createSkeletonLoader();
      aspectRatioContainer.appendChild(skeleton);

      // DOM の更新
      img.parentNode.insertBefore(aspectRatioContainer, img);
      aspectRatioContainer.appendChild(img);

      // 画像読み込み完了時の処理
      img.addEventListener('load', () => {
        img.style.opacity = '1';
        skeleton.style.opacity = '0';
        setTimeout(() => skeleton.remove(), 300);
      });

      // 読み込みエラー時の処理
      img.addEventListener('error', () => {
        aspectRatioContainer.style.backgroundColor = '#e0e0e0';
        skeleton.innerHTML = '<div style="text-align:center;color:#666;">画像を読み込めませんでした</div>';
      });
    });
  }

  // スケルトンローダーの作成
  createSkeletonLoader() {
    const skeleton = document.createElement('div');
    skeleton.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        #f0f0f0 25%, 
        #e0e0e0 50%, 
        #f0f0f0 75%
      );
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      transition: opacity 0.3s ease;
    `;

    // スケルトンアニメーションの CSS 追加
    if (!document.getElementById('skeleton-animation-css')) {
      const style = document.createElement('style');
      style.id = 'skeleton-animation-css';
      style.textContent = `
        @keyframes skeleton-loading {
          0% {
            background-position: 200% 0;
          }
          100% {
            background-position: -200% 0;
          }
        }
      `;
      document.head.appendChild(style);
    }

    return skeleton;
  }

  // 広告スペースの予約
  reserveAdSpace() {
    const adContainers = document.querySelectorAll('.ad-container, [class*="ad-"]');
    
    adContainers.forEach(container => {
      // 広告の標準サイズに基づいてスペースを予約
      const adSize = container.dataset.adSize || 'medium-rectangle';
      const dimensions = this.getAdDimensions(adSize);
      
      container.style.cssText = `
        min-height: ${dimensions.height}px;
        width: ${dimensions.width}px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 12px;
        margin: 10px auto;
      `;

      // 広告読み込み中の表示
      if (!container.hasChildNodes()) {
        container.innerHTML = `
          <div style="text-align: center;">
            <div style="margin-bottom: 8px;">📢</div>
            <div>広告</div>
          </div>
        `;
      }

      // 広告の動的読み込み監視
      const observer = new MutationObserver(() => {
        if (container.children.length > 1) {
          container.style.backgroundColor = 'transparent';
          container.style.border = 'none';
          observer.disconnect();
        }
      });

      observer.observe(container, { childList: true });
    });
  }

  // 広告サイズの取得
  getAdDimensions(adSize) {
    const adSizes = {
      'leaderboard': { width: 728, height: 90 },
      'medium-rectangle': { width: 300, height: 250 },
      'large-rectangle': { width: 336, height: 280 },
      'wide-skyscraper': { width: 160, height: 600 },
      'mobile-banner': { width: 320, height: 50 },
      'large-mobile-banner': { width: 320, height: 100 }
    };

    return adSizes[adSize] || adSizes['medium-rectangle'];
  }
}

// フォント読み込み最適化
class FontOptimizationManager {
  constructor() {
    this.setupFontDisplay();
    this.implementFontLoadingStrategy();
  }

  setupFontDisplay() {
    // Critical CSS にフォント最適化を追加
    const style = document.createElement('style');
    style.innerHTML = `
      /* フォント読み込みの最適化 */
      @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/custom-font.woff2') format('woff2'),
             url('/fonts/custom-font.woff') format('woff');
        font-display: swap;
        size-adjust: 100.06%; /* フォールバックフォントとのサイズ調整 */
      }

      /* フォント読み込み中のレイアウトシフト防止 */
      .font-loading body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .font-loaded body {
        font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
    `;
    document.head.appendChild(style);
  }

  async implementFontLoadingStrategy() {
    if ('fonts' in document) {
      try {
        // フォントの事前読み込み
        await document.fonts.ready;
        
        // カスタムフォントが利用可能かチェック
        const customFont = new FontFace(
          'CustomFont', 
          'url(/fonts/custom-font.woff2) format("woff2")'
        );
        
        await customFont.load();
        document.fonts.add(customFont);
        
        document.body.classList.add('font-loaded');
        document.body.classList.remove('font-loading');
        
        // New Relic にフォント読み込み状況を報告
        if (typeof newrelic !== 'undefined') {
          newrelic.addPageAction('CustomFontLoaded', {
            loadTime: performance.now(),
            fontFamily: 'CustomFont',
            preventedCLS: true
          });
        }
        
      } catch (error) {
        console.warn('Custom font loading failed:', error);
        document.body.classList.remove('font-loading');
      }
    }
  }
}

// CLS最適化システムの初期化
document.addEventListener('DOMContentLoaded', () => {
  new CLSOptimizationManager();
  new FontOptimizationManager();
  
  // ページ読み込み開始時にフォント読み込みクラスを設定
  document.body.classList.add('font-loading');
});

// New Relic Browser カスタムイベント送信システム
class NewRelicCoreWebVitalsMonitor {
  constructor() {
    this.vitalsData = {
      lcp: null,
      fid: null,
      cls: 0
    };
    this.setupVitalsObservers();
    this.setupCustomEventTracking();
  }

  setupVitalsObservers() {
    // LCP の詳細監視
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      
      this.vitalsData.lcp = {
        value: lastEntry.startTime,
        element: this.getElementInfo(lastEntry.element),
        renderTime: lastEntry.renderTime || lastEntry.loadTime,
        url: lastEntry.url
      };
      
      this.sendCoreWebVitalData('LCP', this.vitalsData.lcp);
    }).observe({ type: 'largest-contentful-paint', buffered: true });

    // FID の詳細監視
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        this.vitalsData.fid = {
          value: entry.processingStart - entry.startTime,
          inputDelay: entry.processingStart - entry.startTime,
          processingTime: entry.processingEnd - entry.processingStart,
          eventType: entry.name,
          target: this.getElementInfo(entry.target)
        };
        
        this.sendCoreWebVitalData('FID', this.vitalsData.fid);
      });
    }).observe({ type: 'first-input', buffered: true });

    // CLS の継続監視
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          this.vitalsData.cls += entry.value;
          
          this.sendCoreWebVitalData('CLS', {
            cumulativeValue: this.vitalsData.cls,
            shiftValue: entry.value,
            affectedElements: entry.sources ? 
              Array.from(entry.sources).map(s => this.getElementInfo(s.node)) : []
          });
        }
      });
    }).observe({ type: 'layout-shift', buffered: true });
  }

  // 詳細なカスタムイベント送信
  sendCoreWebVitalData(metric, data) {
    if (typeof newrelic === 'undefined') return;

    const commonAttributes = {
      pageUrl: window.location.href,
      pageType: this.getPageType(),
      deviceType: this.getDeviceType(),
      connectionType: this.getConnectionType(),
      viewportSize: `${window.innerWidth}x${window.innerHeight}`,
      userAgent: navigator.userAgent,
      timestamp: Date.now()
    };

    // メトリック固有のデータ送信
    switch (metric) {
      case 'LCP':
        newrelic.addPageAction('CoreWebVitals_LCP', {
          ...commonAttributes,
          lcpValue: data.value,
          lcpGrade: this.gradeLCP(data.value),
          lcpElement: data.element?.tagName || 'unknown',
          lcpElementId: data.element?.id || '',
          lcpElementSrc: data.element?.src || '',
          renderTime: data.renderTime,
          resourceUrl: data.url || '',
          isAboveFold: data.element ? this.isAboveFold(data.element) : false
        });
        break;

      case 'FID':
        newrelic.addPageAction('CoreWebVitals_FID', {
          ...commonAttributes,
          fidValue: data.value,
          fidGrade: this.gradeFID(data.value),
          inputDelay: data.inputDelay,
          processingTime: data.processingTime,
          eventType: data.eventType,
          targetElement: data.target?.tagName || 'unknown',
          targetElementId: data.target?.id || ''
        });
        break;

      case 'CLS':
        newrelic.addPageAction('CoreWebVitals_CLS', {
          ...commonAttributes,
          clsCumulative: data.cumulativeValue,
          clsGrade: this.gradeCLS(data.cumulativeValue),
          shiftValue: data.shiftValue,
          affectedElementsCount: data.affectedElements.length,
          affectedElements: JSON.stringify(data.affectedElements)
        });
        break;
    }

    // 包括的なCore Web Vitalsサマリー送信
    this.sendVitalsSummary();
  }

  // Core Web Vitals サマリーの定期送信
  sendVitalsSummary() {
    if (typeof newrelic === 'undefined') return;

    const summary = {
      pageUrl: window.location.href,
      lcpValue: this.vitalsData.lcp?.value || 0,
      fidValue: this.vitalsData.fid?.value || 0,
      clsValue: this.vitalsData.cls || 0,
      
      // 各指標の評価
      lcpGrade: this.vitalsData.lcp ? this.gradeLCP(this.vitalsData.lcp.value) : 'unknown',
      fidGrade: this.vitalsData.fid ? this.gradeFID(this.vitalsData.fid.value) : 'unknown',
      clsGrade: this.gradeCLS(this.vitalsData.cls),
      
      // 総合評価
      overallGrade: this.calculateOverallGrade(),
      
      // パフォーマンス予算の遵守状況
      meetsPerformanceBudget: this.checkPerformanceBudget(),
      
      // ユーザー体験スコア
      userExperienceScore: this.calculateUXScore(),
      
      // デバイス・ネットワーク情報
      deviceType: this.getDeviceType(),
      connectionType: this.getConnectionType(),
      
      // ページ固有情報
      pageType: this.getPageType(),
      isFirstVisit: this.isFirstVisit(),
      
      timestamp: Date.now()
    };

    newrelic.addPageAction('CoreWebVitals_Summary', summary);
  }

  // 評価グレードの計算
  gradeLCP(value) {
    if (value <= 2500) return 'good';
    if (value <= 4000) return 'needs-improvement';
    return 'poor';
  }

  gradeFID(value) {
    if (value <= 100) return 'good';
    if (value <= 300) return 'needs-improvement';
    return 'poor';
  }

  gradeCLS(value) {
    if (value <= 0.1) return 'good';
    if (value <= 0.25) return 'needs-improvement';
    return 'poor';
  }

  // 総合パフォーマンスグレードの算出
  calculateOverallGrade() {
    const grades = [];
    
    if (this.vitalsData.lcp) {
      grades.push(this.gradeLCP(this.vitalsData.lcp.value));
    }
    if (this.vitalsData.fid) {
      grades.push(this.gradeFID(this.vitalsData.fid.value));
    }
    grades.push(this.gradeCLS(this.vitalsData.cls));

    // 最も悪いグレードを全体グレードとする
    if (grades.includes('poor')) return 'poor';
    if (grades.includes('needs-improvement')) return 'needs-improvement';
    return 'good';
  }

  // ユーザー体験スコアの計算（0-100点）
  calculateUXScore() {
    let score = 100;
    
    // LCP のスコア減点
    if (this.vitalsData.lcp) {
      if (this.vitalsData.lcp.value > 4000) score -= 40;
      else if (this.vitalsData.lcp.value > 2500) score -= 20;
    }

    // FID のスコア減点
    if (this.vitalsData.fid) {
      if (this.vitalsData.fid.value > 300) score -= 30;
      else if (this.vitalsData.fid.value > 100) score -= 15;
    }

    // CLS のスコア減点
    if (this.vitalsData.cls > 0.25) score -= 30;
    else if (this.vitalsData.cls > 0.1) score -= 15;

    return Math.max(score, 0);
  }
}

// ビジネス指標との相関分析
class BusinessMetricsCorrelation {
  constructor() {
    this.setupBusinessEventTracking();
  }

  setupBusinessEventTracking() {
    // コンバージョン追跡
    document.addEventListener('conversion', (event) => {
      this.trackConversionWithVitals(event.detail);
    });

    // エンゲージメント追跡
    this.trackEngagementMetrics();
  }

  trackConversionWithVitals(conversionData) {
    if (typeof newrelic === 'undefined') return;

    // 現在のCore Web Vitals値を取得
    const currentVitals = window.webVitalsMonitor?.vitalsData || {};

    newrelic.addPageAction('Conversion_With_Vitals', {
      ...conversionData,
      lcpAtConversion: currentVitals.lcp?.value || null,
      fidAtConversion: currentVitals.fid?.value || null,
      clsAtConversion: currentVitals.cls || null,
      vitalsGrade: window.webVitalsMonitor?.calculateOverallGrade() || 'unknown',
      uxScore: window.webVitalsMonitor?.calculateUXScore() || null,
      pageLoadToConversion: Date.now() - performance.timing.navigationStart
    });
  }

  trackEngagementMetrics() {
    let engagementStartTime = Date.now();
    let scrollDepth = 0;
    let interactions = 0;

    // スクロール深度の追跡
    window.addEventListener('scroll', () => {
      const currentScroll = window.scrollY;
      const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
      scrollDepth = Math.max(scrollDepth, (currentScroll / maxScroll) * 100);
    });

    // ユーザー操作の追跡
    ['click', 'keydown', 'touchstart'].forEach(eventType => {
      document.addEventListener(eventType, () => {
        interactions++;
      });
    });

    // ページ離脱時にエンゲージメントデータを送信
    window.addEventListener('beforeunload', () => {
      if (typeof newrelic === 'undefined') return;

      const engagementTime = Date.now() - engagementStartTime;
      const currentVitals = window.webVitalsMonitor?.vitalsData || {};

      newrelic.addPageAction('Engagement_With_Vitals', {
        engagementTime,
        scrollDepth,
        interactions,
        lcpValue: currentVitals.lcp?.value || null,
        fidValue: currentVitals.fid?.value || null,
        clsValue: currentVitals.cls || null,
        vitalsGrade: window.webVitalsMonitor?.calculateOverallGrade() || 'unknown',
        uxScore: window.webVitalsMonitor?.calculateUXScore() || null
      });
    });
  }
}

// 監視システムの初期化
document.addEventListener('DOMContentLoaded', () => {
  window.webVitalsMonitor = new NewRelicCoreWebVitalsMonitor();
  new BusinessMetricsCorrelation();
});