Advanced Performance Monitoring for Popup Systems: Complete Technical Guide

Advanced Performance Monitoring for Popup Systems: Complete Technical Guide

Performance monitoring is the cornerstone of successful popup implementation, directly impacting user experience, conversion rates, and overall website performance. Comprehensive monitoring strategies enable developers to identify bottlenecks, optimize resource usage, and maintain consistent performance across all user segments and devices. This in-depth technical guide explores advanced performance monitoring techniques specifically designed for popup systems, from Core Web Vitals tracking to real-time analytics and automated optimization strategies.

Modern popup performance monitoring requires a multi-layered approach encompassing browser-native APIs, custom monitoring solutions, and sophisticated analytics platforms. Understanding how to measure, analyze, and optimize popup performance at scale is essential for maintaining competitive advantage and ensuring optimal user experiences. This guide provides the technical foundation and practical implementation details needed to build robust, production-ready popup performance monitoring systems.

Core Web Vitals Monitoring for Popups

Largest Contentful Paint (LCP) Impact

Monitor how popup loading affects page LCP scores:

class PopupPerformanceMonitor {
  constructor() {
    this.metrics = new Map();
    this.observers = new Map();
    this.performanceEntries = [];
    this.initializeObservers();
  }

  initializeObservers() {
    // Monitor LCP impact when popups are visible
    this.observeLCP();
    this.observeFID();
    this.observeCLS();
    this.observeINP();
  }

  observeLCP() {
    const lcpObserver = new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];

      // Check if popup was visible during LCP
      const popupVisible = this.wasPopupVisibleAtTime(lastEntry.startTime);

      this.recordMetric('LCP', {
        value: lastEntry.startTime,
        popupVisible,
        popupLoadTime: this.getPopupLoadTime(lastEntry.startTime),
        element: lastEntry.element?.tagName || 'unknown'
      });
    });

    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
    this.observers.set('LCP', lcpObserver);
  }

  wasPopupVisibleAtTime(timestamp) {
    return Array.from(this.metrics.entries())
      .filter(([key, value]) => key.startsWith('popup-show-'))
      .some(([_, data]) =>
        data.timestamp <= timestamp &&
        (!data.hideTime || data.hideTime > timestamp)
      );
  }

  getPopupLoadTime(timestamp) {
    return this.performanceEntries
      .filter(entry => entry.name.includes('popup') && entry.startTime < timestamp)
      .reduce((max, entry) => Math.max(max, entry.duration), 0);
  }
}

First Input Delay (FID) Tracking

Measure interaction delays caused by popup JavaScript execution:

// Monitor FID with popup context
observeFID() {
  const fidObserver = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      const popupContext = this.getPopupContext(entry.startTime);

      this.recordMetric('FID', {
        value: entry.processingStart - entry.startTime,
        inputType: entry.name,
        popupVisible: popupContext.visible,
        popupType: popupContext.type,
        concurrentOperations: this.getConcurrentOperations(entry.startTime)
      });
    }
  });

  fidObserver.observe({ entryTypes: ['first-input'] });
  this.observers.set('FID', fidObserver);
}

getPopupContext(timestamp) {
  const activePopups = Array.from(this.metrics.entries())
    .filter(([key, value]) =>
      key.startsWith('popup-show-') &&
      value.timestamp <= timestamp &&
      (!value.hideTime || value.hideTime > timestamp)
    )
    .map(([_, data]) => data);

  return {
    visible: activePopups.length > 0,
    type: activePopups[0]?.type || 'none',
    count: activePopups.length
  };
}

Cumulative Layout Shift (CLS) Prevention

Track and prevent layout shifts caused by popup animations:

class CLSMonitor {
  constructor() {
    this.clsScore = 0;
    this.layoutShiftEntries = [];
    this.clsObserver = null;
    this.popupLayoutMap = new Map();
  }

  initialize() {
    this.clsObserver = new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
          this.processLayoutShift(entry);
        }
      }
    });

    this.clsObserver.observe({ entryTypes: ['layout-shift'] });
    this.trackPopupLayout();
  }

  processLayoutShift(entry) {
    const shiftValue = entry.value;
    const popupRelated = this.isPopupRelatedShift(entry);

    this.layoutShiftEntries.push({
      timestamp: entry.startTime,
      value: shiftValue,
      popupRelated,
      sources: entry.sources?.map(source => ({
        node: source.node,
        previousRect: source.previousRect,
        currentRect: source.currentRect
      }))
    });

    if (popupRelated) {
      console.warn('Popup-related layout shift detected:', {
        value: shiftValue,
        sources: entry.sources
      });
    }

    this.clsScore += shiftValue;
  }

  isPopupRelatedShift(entry) {
    return entry.sources?.some(source =>
      this.isPopupElement(source.node) ||
      this.isAffectedByPopup(source.node)
    );
  }

  trackPopupLayout() {
    // Monitor popup element positions
    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        if (this.isPopupElement(entry.target)) {
          this.popupLayoutMap.set(entry.target, {
            rect: entry.contentRect,
            timestamp: performance.now()
          });
        }
      }
    });

    // Observe all popup containers
    document.querySelectorAll('[data-popup-container]').forEach(el => {
      observer.observe(el);
    });
  }
}

Real User Monitoring (RUM) Implementation

Custom RUM Data Collection

Build a comprehensive RUM system for popup performance:

class PopupRUMCollector {
  constructor(endpoint, config = {}) {
    this.endpoint = endpoint;
    this.config = {
      sampleRate: config.sampleRate || 0.1,
      batchSize: config.batchSize || 50,
      flushInterval: config.flushInterval || 30000,
      maxRetries: config.maxRetries || 3
    };

    this.metrics = [];
    this.sessionId = this.generateSessionId();
    this.userId = this.getUserId();
    this.flushTimer = null;
    this.initializeCollection();
  }

  initializeCollection() {
    this.setupPerformanceObserver();
    this.setupUserInteractionTracking();
    this.setupNetworkMonitoring();
    this.startBatchFlushing();
  }

  collectPopupMetric(eventName, data) {
    if (Math.random() > this.config.sampleRate) return;

    const metric = {
      sessionId: this.sessionId,
      userId: this.userId,
      timestamp: performance.now(),
      eventName,
      data: this.sanitizeData(data),
      userAgent: navigator.userAgent,
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      connection: this.getConnectionInfo(),
      page: {
        url: window.location.href,
        referrer: document.referrer
      }
    };

    this.metrics.push(metric);

    if (this.metrics.length >= this.config.batchSize) {
      this.flush();
    }
  }

  setupPerformanceObserver() {
    const observer = new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (this.isPopupRelatedEntry(entry)) {
          this.collectPopupMetric('performance-entry', {
            name: entry.name,
            type: entry.entryType,
            startTime: entry.startTime,
            duration: entry.duration,
            size: this.getEntrySize(entry)
          });
        }
      }
    });

    observer.observe({
      entryTypes: ['navigation', 'resource', 'paint', 'measure']
    });
  }

  setupUserInteractionTracking() {
    // Track popup interactions
    ['click', 'touchstart', 'keydown', 'scroll'].forEach(eventType => {
      document.addEventListener(eventType, (event) => {
        if (this.isPopupInteraction(event)) {
          this.collectPopupMetric('user-interaction', {
            type: eventType,
            target: this.getElementPath(event.target),
            popupId: this.getPopupId(event.target),
            coordinates: {
              x: event.clientX,
              y: event.clientY
            },
            timestamp: performance.now()
          });
        }
      }, { passive: true });
    });
  }

  async flush() {
    if (this.metrics.length === 0) return;

    const payload = {
      metrics: [...this.metrics],
      metadata: {
        flushTimestamp: Date.now(),
        count: this.metrics.length
      }
    };

    try {
      await this.sendToEndpoint(payload);
      this.metrics = [];
    } catch (error) {
      console.error('Failed to flush RUM data:', error);
      // Retry logic for failed requests
      this.retryFlush(payload);
    }
  }

  async sendToEndpoint(payload) {
    const response = await fetch(this.endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-RUM-Version': '1.0'
      },
      body: JSON.stringify(payload),
      keepalive: true
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return response.json();
  }
}

Performance Budget Enforcement

Implement strict performance budgets for popup resources:

class PopupPerformanceBudget {
  constructor(budgets = {}) {
    this.budgets = {
      totalSize: 150 * 1024, // 150KB
      scriptSize: 50 * 1024, // 50KB
      imageSize: 100 * 1024, // 100KB
      loadTime: 1000, // 1 second
      renderTime: 500, // 500ms
      animations: 60, // 60fps
      ...budgets
    };

    this.violations = [];
    this.enforcement = new Map();
  }

  validatePopupResources(popupId, resources) {
    const violations = [];
    const totalSize = resources.reduce((sum, resource) => sum + resource.size, 0);

    // Check total size budget
    if (totalSize > this.budgets.totalSize) {
      violations.push({
        type: 'total-size',
        limit: this.budgets.totalSize,
        actual: totalSize,
        severity: 'high'
      });
    }

    // Check individual resource budgets
    resources.forEach(resource => {
      const budgetKey = this.getResourceBudgetKey(resource.type);
      if (this.budgets[budgetKey] && resource.size > this.budgets[budgetKey]) {
        violations.push({
          type: budgetKey,
          resource: resource.url,
          limit: this.budgets[budgetKey],
          actual: resource.size,
          severity: 'medium'
        });
      }
    });

    if (violations.length > 0) {
      this.reportViolations(popupId, violations);
      return false;
    }

    return true;
  }

  monitorLoadPerformance(popupId) {
    const startTime = performance.now();

    return new Promise((resolve) => {
      const observer = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        const popupEntries = entries.filter(entry =>
          entry.name.includes(popupId)
        );

        if (popupEntries.length > 0) {
          const loadTime = popupEntries.reduce((max, entry) =>
            Math.max(max, entry.startTime + entry.duration), 0
          ) - startTime;

          if (loadTime > this.budgets.loadTime) {
            this.reportViolation(popupId, {
              type: 'load-time',
              limit: this.budgets.loadTime,
              actual: loadTime,
              severity: 'high'
            });
          }

          observer.disconnect();
          resolve({ loadTime, withinBudget: loadTime <= this.budgets.loadTime });
        }
      });

      observer.observe({ entryTypes: ['resource', 'measure'] });
    });
  }

  enforceBudget(popupId, violation) {
    const enforcementAction = this.getEnforcementAction(violation);

    switch (enforcementAction) {
      case 'warn':
        console.warn(`Performance budget violation for popup ${popupId}:`, violation);
        break;

      case 'optimize':
        this.autoOptimize(popupId, violation);
        break;

      case 'block':
        this.blockPopup(popupId, violation);
        break;

      case 'fallback':
        this.loadFallbackContent(popupId);
        break;
    }

    this.enforcement.set(popupId, {
      action: enforcementAction,
      violation,
      timestamp: performance.now()
    });
  }

  autoOptimize(popupId, violation) {
    const popup = document.getElementById(popupId);
    if (!popup) return;

    switch (violation.type) {
      case 'script-size':
        this.optimizeScripts(popup);
        break;
      case 'image-size':
        this.optimizeImages(popup);
        break;
      case 'load-time':
        this.enableLazyLoading(popup);
        break;
      case 'animations':
        this.reduceAnimations(popup);
        break;
    }
  }
}

JavaScript Execution Timing Optimization

Async Script Loading and Execution

Optimize JavaScript loading to prevent popup blocking:

class PopupScriptLoader {
  constructor() {
    this.scripts = new Map();
    this.loadingPromises = new Map();
    this.executionQueue = [];
    this.isExecuting = false;
  }

  async loadPopupScript(scriptUrl, popupId, options = {}) {
    const cacheKey = `${scriptUrl}:${popupId}`;

    if (this.scripts.has(cacheKey)) {
      return this.scripts.get(cacheKey);
    }

    if (this.loadingPromises.has(cacheKey)) {
      return this.loadingPromises.get(cacheKey);
    }

    const loadPromise = this.loadScript(scriptUrl, popupId, options);
    this.loadingPromises.set(cacheKey, loadPromise);

    try {
      const script = await loadPromise;
      this.scripts.set(cacheKey, script);
      this.loadingPromises.delete(cacheKey);
      return script;
    } catch (error) {
      this.loadingPromises.delete(cacheKey);
      throw error;
    }
  }

  async loadScript(url, popupId, options) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.async = true;
      script.defer = true;

      // Add performance monitoring
      const startTime = performance.now();

      script.onload = () => {
        const loadTime = performance.now() - startTime;
        this.recordScriptMetrics(url, loadTime, popupId, 'success');
        resolve(script);
      };

      script.onerror = () => {
        const loadTime = performance.now() - startTime;
        this.recordScriptMetrics(url, loadTime, popupId, 'error');
        reject(new Error(`Failed to load script: ${url}`));
      };

      // Add integrity and crossorigin for security
      if (options.integrity) {
        script.integrity = options.integrity;
      }
      if (options.crossorigin) {
        script.crossorigin = options.crossorigin;
      }

      script.src = url;
      document.head.appendChild(script);
    });
  }

  queueExecution(callback, priority = 'normal') {
    this.executionQueue.push({
      callback,
      priority,
      timestamp: performance.now()
    });

    this.executionQueue.sort((a, b) => {
      const priorityOrder = { 'high': 0, 'normal': 1, 'low': 2 };
      return priorityOrder[a.priority] - priorityOrder[b.priority];
    });

    if (!this.isExecuting) {
      this.processQueue();
    }
  }

  async processQueue() {
    if (this.executionQueue.length === 0) {
      this.isExecuting = false;
      return;
    }

    this.isExecuting = true;
    const task = this.executionQueue.shift();

    try {
      const startTime = performance.now();
      await task.callback();
      const executionTime = performance.now() - startTime;

      this.recordExecutionMetrics(task, executionTime);

      // Yield control to browser every few tasks
      if (this.executionQueue.length > 0) {
        await this.yieldToMain();
      }
    } catch (error) {
      console.error('Error executing queued task:', error);
    }

    // Continue processing queue
    requestAnimationFrame(() => this.processQueue());
  }

  async yieldToMain() {
    return new Promise(resolve => {
      setTimeout(resolve, 0);
    });
  }

  recordScriptMetrics(url, loadTime, popupId, status) {
    const metrics = {
      url,
      loadTime,
      popupId,
      status,
      timestamp: performance.now(),
      userAgent: navigator.userAgent
    };

    // Send to analytics or store locally
    this.sendMetrics('script-loading', metrics);
  }
}

Web Workers for Heavy Processing

Offload popup calculations to prevent UI blocking:

class PopupWorkerManager {
  constructor() {
    this.workers = new Map();
    this.taskQueue = [];
    this.activeTasks = new Map();
    this.workerScript = this.createWorkerScript();
  }

  createWorkerScript() {
    return `
      let popupData = new Map();
      let performanceMetrics = [];

      self.onmessage = function(e) {
        const { type, data, taskId } = e.data;

        switch (type) {
          case 'PROCESS_POPUP_DATA':
            processPopupData(data, taskId);
            break;
          case 'CALCULATE_PERFORMANCE':
            calculatePerformanceMetrics(data, taskId);
            break;
          case 'ANALYZE_USER_BEHAVIOR':
            analyzeUserBehavior(data, taskId);
            break;
          default:
            self.postMessage({ type: 'ERROR', taskId, error: 'Unknown task type' });
        }
      };

      function processPopupData(data, taskId) {
        const startTime = performance.now();

        try {
          // Heavy processing tasks
          const processedData = {
            targetingRules: evaluateTargetingRules(data.rules),
            personalization: generatePersonalization(data.user),
            timing: calculateOptimalTiming(data.analytics),
            variations: generateContentVariations(data.content)
          };

          const processingTime = performance.now() - startTime;

          self.postMessage({
            type: 'POPUP_DATA_PROCESSED',
            taskId,
            result: processedData,
            metrics: { processingTime }
          });
        } catch (error) {
          self.postMessage({
            type: 'ERROR',
            taskId,
            error: error.message
          });
        }
      }

      function evaluateTargetingRules(rules) {
        // Complex targeting rule evaluation
        return rules.map(rule => ({
          id: rule.id,
          condition: rule.condition,
          matches: evaluateCondition(rule.condition),
          weight: rule.weight || 1
        }));
      }

      function calculatePerformanceMetrics(analytics, taskId) {
        const metrics = {
          lcpTrend: calculateLCPTrend(analytics),
          fidImpact: calculateFIDImpact(analytics),
          clsContribution: calculateCLSContribution(analytics),
          recommendations: generateOptimizationRecommendations(analytics)
        };

        self.postMessage({
          type: 'PERFORMANCE_METRICS_CALCULATED',
          taskId,
          result: metrics
        });
      }
    `;
  }

  getWorker(workerType = 'default') {
    if (!this.workers.has(workerType)) {
      const blob = new Blob([this.workerScript], { type: 'application/javascript' });
      const workerUrl = URL.createObjectURL(blob);
      const worker = new Worker(workerUrl);

      this.workers.set(workerType, worker);

      // Cleanup worker URL when worker is terminated
      worker.addEventListener('terminate', () => {
        URL.revokeObjectURL(workerUrl);
      });
    }

    return this.workers.get(workerType);
  }

  async executeTask(taskType, data, workerType = 'default') {
    const worker = this.getWorker(workerType);
    const taskId = this.generateTaskId();

    return new Promise((resolve, reject) => {
      const timeout = setTimeout(() => {
        reject(new Error('Task timeout'));
        this.activeTasks.delete(taskId);
      }, 10000); // 10 second timeout

      const handleMessage = (e) => {
        if (e.data.taskId === taskId) {
          clearTimeout(timeout);
          worker.removeEventListener('message', handleMessage);
          this.activeTasks.delete(taskId);

          if (e.data.type === 'ERROR') {
            reject(new Error(e.data.error));
          } else {
            resolve(e.data.result);
          }
        }
      };

      worker.addEventListener('message', handleMessage);
      this.activeTasks.set(taskId, { resolve, reject, timeout });

      // Send task to worker
      worker.postMessage({
        type: taskType,
        data,
        taskId
      });
    });
  }

  async processPopupDataInWorker(popupConfig) {
    try {
      const result = await this.executeTask('PROCESS_POPUP_DATA', popupConfig);
      return result;
    } catch (error) {
      console.error('Worker processing failed:', error);
      // Fallback to main thread processing
      return this.processPopupDataMainThread(popupConfig);
    }
  }
}

Network Performance and Resource Loading

Resource Loading Optimization

Implement smart resource loading strategies:

class PopupResourceOptimizer {
  constructor() {
    this.resourceCache = new Map();
    this.loadingPromises = new Map();
    this.networkMonitor = new NetworkMonitor();
    this.preloadQueue = [];
  }

  async optimizeResourceLoad(resources, popupId) {
    const optimizedResources = await Promise.all(
      resources.map(resource => this.optimizeResource(resource, popupId))
    );

    return this.sortResourcesByPriority(optimizedResources);
  }

  async optimizeResource(resource, popupId) {
    const optimizations = {
      compression: true,
      minification: true,
      lazyLoading: this.shouldLazyLoad(resource),
      preloading: this.shouldPreload(resource),
      cdn: this.shouldUseCDN(resource)
    };

    return {
      ...resource,
      optimizations,
      url: await this.getOptimizedUrl(resource, optimizations),
      loadingStrategy: this.getLoadingStrategy(resource, optimizations)
    };
  }

  shouldLazyLoad(resource) {
    // Lazy load non-critical resources
    return (
      resource.type === 'image' &&
      !resource.priority === 'critical' &&
      !resource.aboveFold
    );
  }

  shouldPreload(resource) {
    // Preload critical resources
    return (
      resource.priority === 'critical' ||
      resource.type === 'script' && resource.blocking
    );
  }

  getLoadingStrategy(resource, optimizations) {
    if (optimizations.preloading) {
      return 'preload';
    } else if (optimizations.lazyLoading) {
      return 'lazy';
    } else if (resource.async) {
      return 'async';
    } else if (resource.defer) {
      return 'defer';
    }
    return 'normal';
  }

  async loadWithFallback(primaryUrl, fallbackUrls, options = {}) {
    const errors = [];

    for (const url of [primaryUrl, ...fallbackUrls]) {
      try {
        const result = await this.loadResource(url, options);
        return result;
      } catch (error) {
        errors.push({ url, error });
        continue;
      }
    }

    throw new Error(`All fallback URLs failed: ${errors.map(e => e.url).join(', ')}`);
  }

  async loadResource(url, options = {}) {
    const cacheKey = this.getCacheKey(url, options);

    if (this.resourceCache.has(cacheKey)) {
      return this.resourceCache.get(cacheKey);
    }

    if (this.loadingPromises.has(cacheKey)) {
      return this.loadingPromises.get(cacheKey);
    }

    const loadPromise = this.performResourceLoad(url, options);
    this.loadingPromises.set(cacheKey, loadPromise);

    try {
      const result = await loadPromise;
      this.resourceCache.set(cacheKey, result);
      this.loadingPromises.delete(cacheKey);
      return result;
    } catch (error) {
      this.loadingPromises.delete(cacheKey);
      throw error;
    }
  }

  async performResourceLoad(url, options) {
    const startTime = performance.now();

    try {
      const response = await fetch(url, {
        headers: {
          'Accept': this.getAcceptHeader(url),
          'Cache-Control': options.noCache ? 'no-cache' : 'default'
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const loadTime = performance.now() - startTime;
      const size = parseInt(response.headers.get('content-length')) || 0;

      this.recordResourceMetrics(url, {
        loadTime,
        size,
        status: 'success',
        fromCache: response.headers.get('x-from-cache') === 'true'
      });

      return {
        url,
        content: await response.text(),
        size,
        loadTime,
        headers: Object.fromEntries(response.headers.entries())
      };
    } catch (error) {
      const loadTime = performance.now() - startTime;

      this.recordResourceMetrics(url, {
        loadTime,
        error: error.message,
        status: 'error'
      });

      throw error;
    }
  }
}

Network Condition Adaptation

Adapt popup loading based on network conditions:

class AdaptivePopupLoader {
  constructor() {
    this.networkInfo = this.getNetworkInfo();
    this.adaptationRules = new Map();
    this.setupNetworkMonitoring();
  }

  getNetworkInfo() {
    if ('connection' in navigator) {
      const connection = navigator.connection;
      return {
        effectiveType: connection.effectiveType,
        downlink: connection.downlink,
        rtt: connection.rtt,
        saveData: connection.saveData
      };
    }

    return {
      effectiveType: '4g',
      downlink: 10,
      rtt: 100,
      saveData: false
    };
  }

  setupNetworkMonitoring() {
    if ('connection' in navigator) {
      navigator.connection.addEventListener('change', () => {
        this.networkInfo = this.getNetworkInfo();
        this.adaptActivePopups();
      });
    }
  }

  getLoadingStrategy(popupConfig) {
    const strategy = {
      priority: 'normal',
      resources: 'all',
      animations: 'full',
      tracking: 'full'
    };

    // Adapt based on network conditions
    switch (this.networkInfo.effectiveType) {
      case 'slow-2g':
      case '2g':
        strategy.priority = 'critical';
        strategy.resources = 'minimal';
        strategy.animations = 'reduced';
        strategy.tracking = 'essential';
        break;

      case '3g':
        strategy.priority = 'important';
        strategy.resources = 'optimized';
        strategy.animations = 'reduced';
        break;

      case '4g':
        // Full features available
        break;
    }

    if (this.networkInfo.saveData) {
      strategy.resources = 'minimal';
      strategy.animations = 'disabled';
      strategy.tracking = 'essential';
    }

    return strategy;
  }

  async loadPopupWithAdaptation(popupId, config) {
    const strategy = this.getLoadingStrategy(config);
    const adaptedConfig = this.adaptConfig(config, strategy);

    return this.loadPopup(popupId, adaptedConfig, strategy);
  }

  adaptConfig(originalConfig, strategy) {
    const adapted = { ...originalConfig };

    // Filter resources based on strategy
    adapted.resources = originalConfig.resources.filter(resource => {
      switch (strategy.resources) {
        case 'minimal':
          return resource.priority === 'critical';
        case 'optimized':
          return resource.priority !== 'optional';
        default:
          return true;
      }
    });

    // Adapt animations
    adapted.animations = {
      ...originalConfig.animations,
      enabled: strategy.animations !== 'disabled',
      reduced: strategy.animations === 'reduced',
      duration: strategy.animations === 'reduced' ? 200 : 400
    };

    // Adapt tracking
    adapted.tracking = {
      ...originalConfig.tracking,
      level: strategy.tracking,
      realTime: strategy.tracking === 'full'
    };

    return adapted;
  }

  monitorNetworkPerformance(popupId) {
    const monitor = new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const popupEntries = entries.filter(entry =>
        entry.name.includes(popupId)
      );

      if (popupEntries.length > 0) {
        const avgLoadTime = popupEntries.reduce((sum, entry) =>
          sum + entry.duration, 0
        ) / popupEntries.length;

        this.evaluatePerformanceThresholds(popupId, avgLoadTime);
      }
    });

    monitor.observe({ entryTypes: ['resource'] });
    return monitor;
  }
}

Mobile Performance Optimization

Touch Interaction Optimization

Optimize popup interactions for mobile devices:

class MobilePopupOptimizer {
  constructor() {
    this.deviceInfo = this.detectDevice();
    this.touchOptimizations = new Map();
    this.performanceProfile = this.createPerformanceProfile();
  }

  detectDevice() {
    return {
      isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
      isTouch: 'ontouchstart' in window,
      pixelRatio: window.devicePixelRatio || 1,
      screenSize: {
        width: window.screen.width,
        height: window.screen.height
      },
      memory: navigator.deviceMemory || 4,
      cores: navigator.hardwareConcurrency || 4
    };
  }

  createPerformanceProfile() {
    const profile = {
      gpuAcceleration: true,
      reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
      darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
      dataSaver: navigator.connection?.saveData || false
    };

    // Adjust for low-end devices
    if (this.deviceInfo.memory < 2 || this.deviceInfo.cores < 4) {
      profile.gpuAcceleration = false;
      profile.reducedComplexity = true;
    }

    return profile;
  }

  optimizeForMobile(popupConfig) {
    if (!this.deviceInfo.isMobile) return popupConfig;

    const optimized = { ...popupConfig };

    // Reduce animation complexity
    optimized.animations = {
      ...popupConfig.animations,
      duration: 200, // Faster animations on mobile
      easing: 'ease-out',
      reduced: true
    };

    // Optimize touch targets
    optimized.touchTargets = {
      minSize: 44, // Apple HIG minimum
      spacing: 8,
      feedback: true
    };

    // Adjust layout for mobile
    optimized.layout = {
      ...popupConfig.layout,
      maxWidth: Math.min(popupConfig.layout?.maxWidth || 400, window.innerWidth - 32),
      maxHeight: Math.min(popupConfig.layout?.maxHeight || 600, window.innerHeight - 100),
      position: this.getOptimalPosition()
    };

    // Optimize resources for mobile
    optimized.resources = this.optimizeMobileResources(popupConfig.resources);

    return optimized;
  }

  optimizeMobileResources(resources) {
    return resources.map(resource => {
      const optimized = { ...resource };

      // Use responsive images
      if (resource.type === 'image') {
        optimized.srcset = this.generateSrcset(resource.src);
        optimized.sizes = this.generateSizes(resource);
        optimized.loading = 'lazy';
      }

      // Compress resources on mobile
      if (this.deviceInfo.pixelRatio > 1) {
        optimized.quality = Math.min(resource.quality || 80, 60);
      }

      return optimized;
    });
  }

  setupTouchOptimizations(popupElement) {
    // Prevent scrolling behind popup
    this.preventScrolling(popupElement);

    // Optimize touch feedback
    this.addTouchFeedback(popupElement);

    // Handle gestures properly
    this.setupGestureHandling(popupElement);

    // Optimize tap targets
    this.optimizeTapTargets(popupElement);
  }

  preventScrolling(popupElement) {
    const preventDefault = (e) => e.preventDefault();
    const originalStyle = document.body.style.overflow;

    // Prevent background scrolling
    document.body.style.overflow = 'hidden';

    // Add touch move prevention
    document.addEventListener('touchmove', preventDefault, { passive: false });

    // Cleanup when popup is closed
    const cleanup = () => {
      document.body.style.overflow = originalStyle;
      document.removeEventListener('touchmove', preventDefault);
      popupElement.removeEventListener('popup-closed', cleanup);
    };

    popupElement.addEventListener('popup-closed', cleanup);
  }

  addTouchFeedback(popupElement) {
    const touchElements = popupElement.querySelectorAll('button, a, [role="button"]');

    touchElements.forEach(element => {
      let touchTimer;

      element.addEventListener('touchstart', () => {
        element.style.transform = 'scale(0.95)';
        touchTimer = setTimeout(() => {
          element.style.transform = '';
        }, 150);
      }, { passive: true });

      element.addEventListener('touchend', () => {
        clearTimeout(touchTimer);
        element.style.transform = '';
      }, { passive: true });
    });
  }

  setupGestureHandling(popupElement) {
    let startX, startY, isDragging = false;

    popupElement.addEventListener('touchstart', (e) => {
      if (e.target.closest('.draggable-handle')) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
        isDragging = true;
        popupElement.style.transition = 'none';
      }
    }, { passive: true });

    popupElement.addEventListener('touchmove', (e) => {
      if (!isDragging) return;

      const deltaX = e.touches[0].clientX - startX;
      const deltaY = e.touches[0].clientY - startY;

      popupElement.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
    }, { passive: true });

    popupElement.addEventListener('touchend', () => {
      if (isDragging) {
        isDragging = false;
        popupElement.style.transition = '';
        popupElement.style.transform = '';
      }
    }, { passive: true });
  }
}

Performance Testing Methodologies

Automated Performance Testing

Implement comprehensive automated testing:

class PopupPerformanceTester {
  constructor() {
    this.testResults = new Map();
    this.testConfigs = new Map();
    this.testEnvironment = this.setupTestEnvironment();
  }

  setupTestEnvironment() {
    return {
      browsers: ['chrome', 'firefox', 'safari', 'edge'],
      devices: ['desktop', 'tablet', 'mobile'],
      networkConditions: [
        { name: 'fast', rtt: 50, downlink: 10 },
        { name: 'average', rtt: 300, downlink: 1.5 },
        { name: 'slow', rtt: 1000, downlink: 0.5 }
      ],
      locations: ['us-east', 'eu-west', 'asia-pacific']
    };
  }

  async runPerformanceTestSuite(popupConfig) {
    const testSuite = {
      loadPerformance: await this.testLoadPerformance(popupConfig),
      interactionPerformance: await this.testInteractionPerformance(popupConfig),
      memoryUsage: await this.testMemoryUsage(popupConfig),
      networkImpact: await this.testNetworkImpact(popupConfig),
      crossBrowserCompatibility: await this.testCrossBrowserCompatibility(popupConfig)
    };

    const overallScore = this.calculateOverallScore(testSuite);

    return {
      suite: testSuite,
      overallScore,
      recommendations: this.generateRecommendations(testSuite),
      timestamp: Date.now()
    };
  }

  async testLoadPerformance(config) {
    const tests = [
      this.testFirstPaint(config),
      this.testFirstContentfulPaint(config),
      this.testLargestContentfulPaint(config),
      this.testTimeToInteractive(config),
      this.testPopupLoadTime(config)
    ];

    const results = await Promise.all(tests);

    return {
      metrics: results,
      score: this.calculateLoadScore(results),
      passThreshold: this.getLoadThresholds()
    };
  }

  async testFirstPaint(config) {
    return new Promise((resolve) => {
      const startTime = performance.now();

      const observer = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        const paintEntries = entries.filter(entry => entry.name === 'first-paint');

        if (paintEntries.length > 0) {
          const firstPaint = paintEntries[0].startTime;
          observer.disconnect();
          resolve({
            metric: 'first-paint',
            value: firstPaint,
            threshold: 1000,
            passed: firstPaint < 1000
          });
        }
      });

      observer.observe({ entryTypes: ['paint'] });
      this.loadPopupForTesting(config);
    });
  }

  async testInteractionPerformance(config) {
    const popup = await this.loadPopupForTesting(config);

    const interactionTests = [
      this.testClickResponse(popup),
      this.testScrollPerformance(popup),
      this.testAnimationSmoothness(popup),
      this.testFormInteraction(popup)
    ];

    const results = await Promise.all(interactionTests);

    return {
      interactions: results,
      score: this.calculateInteractionScore(results),
      responsiveness: this.measureResponsiveness(popup)
    };
  }

  async testClickResponse(popup) {
    const button = popup.querySelector('[data-test-button]');
    const startTime = performance.now();

    return new Promise((resolve) => {
      button.addEventListener('click', () => {
        const responseTime = performance.now() - startTime;
        resolve({
          type: 'click-response',
          responseTime,
          threshold: 100,
          passed: responseTime < 100
        });
      });

      // Simulate click
      button.click();
    });
  }

  async testAnimationSmoothness(popup) {
    const animatedElement = popup.querySelector('[data-test-animation]');
    const frameRates = [];

    return new Promise((resolve) => {
      let frameCount = 0;
      let lastTime = performance.now();

      const measureFrame = () => {
        const currentTime = performance.now();
        const deltaTime = currentTime - lastTime;

        if (deltaTime > 0) {
          const fps = 1000 / deltaTime;
          frameRates.push(fps);
        }

        frameCount++;
        lastTime = currentTime;

        if (frameCount < 60) { // Test for 1 second at 60fps
          requestAnimationFrame(measureFrame);
        } else {
          const avgFps = frameRates.reduce((sum, fps) => sum + fps, 0) / frameRates.length;
          const droppedFrames = frameRates.filter(fps => fps < 55).length;

          resolve({
            type: 'animation-smoothness',
            averageFps: avgFps,
            droppedFrames,
            totalFrames: frameCount,
            threshold: 55,
            passed: avgFps >= 55 && droppedFrames < frameCount * 0.1
          });
        }
      };

      requestAnimationFrame(measureFrame);
      animatedElement.classList.add('animate');
    });
  }

  async testMemoryUsage(config) {
    const initialMemory = this.getMemoryUsage();
    const popup = await this.loadPopupForTesting(config);
    const afterLoadMemory = this.getMemoryUsage();

    // Simulate interactions
    await this.simulateInteractions(popup);
    const afterInteractionsMemory = this.getMemoryUsage();

    // Cleanup
    popup.remove();
    await this.waitForGarbageCollection();
    const afterCleanupMemory = this.getMemoryUsage();

    return {
      initial: initialMemory,
      afterLoad: afterLoadMemory,
      afterInteractions: afterInteractionsMemory,
      afterCleanup: afterCleanupMemory,
      memoryLeak: afterCleanupMemory > initialMemory * 1.1,
      passThreshold: {
        maxIncrease: 50 * 1024 * 1024, // 50MB
        leakThreshold: 0.1 // 10%
      }
    };
  }

  getMemoryUsage() {
    if ('memory' in performance) {
      return {
        used: performance.memory.usedJSHeapSize,
        total: performance.memory.totalJSHeapSize,
        limit: performance.memory.jsHeapSizeLimit
      };
    }

    return { used: 0, total: 0, limit: 0 };
  }

  generateRecommendations(testSuite) {
    const recommendations = [];

    if (testSuite.loadPerformance.score < 80) {
      recommendations.push({
        category: 'load-performance',
        priority: 'high',
        message: 'Optimize popup loading time by reducing resource size and improving caching',
        actions: [
          'Compress images using WebP format',
          'Implement resource preloading',
          'Minimize JavaScript bundle size',
          'Use CDN for static resources'
        ]
      });
    }

    if (testSuite.interactionPerformance.score < 85) {
      recommendations.push({
        category: 'interaction-performance',
        priority: 'medium',
        message: 'Improve popup interaction responsiveness',
        actions: [
          'Optimize event handlers',
          'Reduce animation complexity',
          'Implement hardware acceleration',
          'Debounce input handlers'
        ]
      });
    }

    if (testSuite.memoryUsage.memoryLeak) {
      recommendations.push({
        category: 'memory-usage',
        priority: 'high',
        message: 'Fix memory leaks in popup implementation',
        actions: [
          'Remove event listeners on popup close',
          'Clear timers and intervals',
          'Release object references',
          'Implement proper cleanup procedures'
        ]
      });
    }

    return recommendations;
  }
}

A/B Testing Performance Impact Analysis

Performance-Aware A/B Testing

Measure performance impact of different popup variations:

class PopupPerformanceABTest {
  constructor() {
    this.experiments = new Map();
    this.results = new Map();
    this.trafficSplitter = new TrafficSplitter();
    this.performanceMonitor = new PopupPerformanceMonitor();
  }

  createPerformanceExperiment(config) {
    const experiment = {
      id: this.generateExperimentId(),
      name: config.name,
      hypothesis: config.hypothesis,
      variants: this.setupVariants(config.variants),
      trafficAllocation: config.trafficAllocation || {
        control: 0.5,
        variant: 0.5
      },
      metrics: this.defineMetrics(config.metrics),
      duration: config.duration || 14 * 24 * 60 * 60 * 1000, // 14 days
      sampleSize: this.calculateSampleSize(config),
      status: 'created'
    };

    this.experiments.set(experiment.id, experiment);
    return experiment;
  }

  setupVariants(variantConfigs) {
    return variantConfigs.map(config => ({
      id: config.id,
      name: config.name,
      popupConfig: config.popupConfig,
      performanceProfile: config.performanceProfile || {},
      expectedImpact: config.expectedImpact || {}
    }));
  }

  defineMetrics(metricConfigs) {
    const defaultMetrics = [
      'loadTime',
      'firstPaint',
      'interactionDelay',
      'memoryUsage',
      'networkRequests',
      'animationFrameRate'
    ];

    return metricConfigs || defaultMetrics;
  }

  async runExperiment(experimentId) {
    const experiment = this.experiments.get(experimentId);
    if (!experiment) throw new Error('Experiment not found');

    experiment.status = 'running';
    experiment.startTime = Date.now();

    // Set up monitoring for all variants
    for (const variant of experiment.variants) {
      this.setupVariantMonitoring(experimentId, variant);
    }

    // Start traffic allocation
    this.trafficSplitter.startAllocation(
      experiment.trafficAllocation,
      this.getVariantHandler(experiment)
    );

    return experiment;
  }

  setupVariantMonitoring(experimentId, variant) {
    const monitor = {
      variantId: variant.id,
      samples: [],
      metrics: new Map(),
      startTime: Date.now()
    };

    // Monitor performance metrics for this variant
    for (const metric of experiment.metrics) {
      this.performanceMonitor.on(metric, (data) => {
        if (data.variantId === variant.id) {
          this.recordMetric(experimentId, variant.id, metric, data);
        }
      });
    }

    this.results.set(`${experimentId}:${variant.id}`, monitor);
  }

  recordMetric(experimentId, variantId, metricName, data) {
    const key = `${experimentId}:${variantId}`;
    const monitor = this.results.get(key);

    if (monitor) {
      monitor.samples.push({
        metric: metricName,
        value: data.value,
        timestamp: Date.now(),
        context: data.context
      });

      // Update running statistics
      this.updateStatistics(monitor, metricName, data.value);
    }
  }

  updateStatistics(monitor, metricName, value) {
    if (!monitor.metrics.has(metricName)) {
      monitor.metrics.set(metricName, {
        count: 0,
        sum: 0,
        min: Infinity,
        max: -Infinity,
        values: []
      });
    }

    const stats = monitor.metrics.get(metricName);
    stats.count++;
    stats.sum += value;
    stats.min = Math.min(stats.min, value);
    stats.max = Math.max(stats.max, value);
    stats.values.push(value);

    // Keep only last 1000 values for memory efficiency
    if (stats.values.length > 1000) {
      stats.values = stats.values.slice(-1000);
    }
  }

  async analyzeResults(experimentId) {
    const experiment = this.experiments.get(experimentId);
    if (!experiment) throw new Error('Experiment not found');

    const analysis = {
      experimentId,
      duration: Date.now() - experiment.startTime,
      variants: [],
      statisticalSignificance: {},
      winner: null,
      confidence: 0
    };

    // Analyze each variant
    for (const variant of experiment.variants) {
      const variantAnalysis = await this.analyzeVariant(experimentId, variant);
      analysis.variants.push(variantAnalysis);
    }

    // Determine statistical significance
    analysis.statisticalSignificance = this.calculateSignificance(analysis.variants);

    // Determine winner
    analysis.winner = this.determineWinner(analysis.variants);
    analysis.confidence = analysis.winner ?
      analysis.statisticalSignificance[analysis.winner.id] : 0;

    return analysis;
  }

  async analyzeVariant(experimentId, variant) {
    const key = `${experimentId}:${variant.id}`;
    const monitor = this.results.get(key);

    if (!monitor || monitor.samples.length === 0) {
      return null;
    }

    const analysis = {
      variantId: variant.id,
      variantName: variant.name,
      sampleSize: monitor.samples.length,
      metrics: {},
      performanceScore: 0
    };

    // Analyze each metric
    for (const [metricName, stats] of monitor.metrics) {
      const mean = stats.sum / stats.count;
      const variance = this.calculateVariance(stats.values, mean);
      const standardDeviation = Math.sqrt(variance);

      analysis.metrics[metricName] = {
        mean,
        median: this.calculateMedian(stats.values),
        standardDeviation,
        min: stats.min,
        max: stats.max,
        percentile95: this.calculatePercentile(stats.values, 95),
        confidenceInterval: this.calculateConfidenceInterval(
          mean, standardDeviation, stats.count
        )
      };
    }

    // Calculate overall performance score
    analysis.performanceScore = this.calculatePerformanceScore(analysis.metrics);

    return analysis;
  }

  calculatePerformanceScore(metrics) {
    const weights = {
      loadTime: -0.3,
      firstPaint: -0.2,
      interactionDelay: -0.2,
      memoryUsage: -0.1,
      animationFrameRate: 0.2
    };

    let score = 0;
    let totalWeight = 0;

    for (const [metric, analysis] of Object.entries(metrics)) {
      const weight = weights[metric] || 0;
      if (weight !== 0) {
        // Normalize score (lower is better for performance metrics)
        const normalizedScore = weight > 0 ?
          analysis.mean / analysis.percentile95 :
          analysis.percentile95 / analysis.mean;

        score += weight * Math.log(normalizedScore);
        totalWeight += Math.abs(weight);
      }
    }

    return totalWeight > 0 ? (score / totalWeight) * 100 : 0;
  }

  generateOptimizationRecommendations(analysis) {
    const recommendations = [];

    for (const variant of analysis.variants) {
      for (const [metric, data] of Object.entries(variant.metrics)) {
        if (data.mean > this.getThreshold(metric)) {
          recommendations.push({
            variant: variant.variantName,
            metric,
            issue: `${metric} exceeds recommended threshold`,
            currentValue: data.mean,
            threshold: this.getThreshold(metric),
            suggestions: this.getOptimizationSuggestions(metric, data)
          });
        }
      }
    }

    return recommendations;
  }
}

Performance Analytics and Reporting

Real-time Performance Dashboard

Build comprehensive performance analytics:

class PopupPerformanceDashboard {
  constructor() {
    this.data = new Map();
    this.charts = new Map();
    this.realTimeUpdates = true;
    this.updateInterval = 5000; // 5 seconds
    this.initializeDashboard();
  }

  initializeDashboard() {
    this.setupMetricCollection();
    this.setupRealTimeUpdates();
    this.createCharts();
    this.setupAlerts();
  }

  setupMetricCollection() {
    // Collect Core Web Vitals
    this.collectCoreWebVitals();

    // Collect custom popup metrics
    this.collectPopupMetrics();

    // Collect user interaction metrics
    this.collectInteractionMetrics();

    // Collect network performance
    this.collectNetworkMetrics();
  }

  collectCoreWebVitals() {
    const vitalsCollector = new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        this.recordMetric('core-web-vitals', {
          name: entry.name,
          value: entry.value || entry.startTime,
          timestamp: entry.startTime,
          id: entry.id
        });
      }
    });

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

  collectPopupMetrics() {
    // Monitor popup performance
    const popupObserver = new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (this.isPopupRelatedEntry(entry)) {
          this.recordMetric('popup-performance', {
            popupId: this.extractPopupId(entry.name),
            metric: entry.entryType,
            value: entry.duration || entry.startTime,
            timestamp: entry.startTime,
            size: this.getEntrySize(entry)
          });
        }
      }
    });

    popupObserver.observe({
      entryTypes: ['measure', 'navigation', 'resource']
    });
  }

  createCharts() {
    // Performance over time chart
    this.charts.set('performance-timeline', {
      type: 'line',
      title: 'Popup Performance Timeline',
      metrics: ['LCP', 'FID', 'CLS'],
      refreshRate: 10000
    });

    // Distribution charts
    this.charts.set('performance-distribution', {
      type: 'histogram',
      title: 'Performance Distribution',
      metrics: ['loadTime', 'interactionDelay'],
      buckets: 20
    });

    // Comparison charts
    this.charts.set('variant-comparison', {
      type: 'bar',
      title: 'Performance by Variant',
      groupBy: 'variant',
      metrics: ['all']
    });

    // Real-time metrics
    this.charts.set('real-time-metrics', {
      type: 'gauge',
      title: 'Current Performance',
      metrics: ['currentLoadTime', 'activePopups', 'memoryUsage'],
      refreshRate: 5000
    });
  }

  generatePerformanceReport(timeRange = '24h') {
    const report = {
      timeRange,
      generatedAt: new Date().toISOString(),
      summary: this.generateSummary(timeRange),
      detailed: this.generateDetailedReport(timeRange),
      trends: this.analyzeTrends(timeRange),
      recommendations: this.generateRecommendations(timeRange),
      alerts: this.getActiveAlerts()
    };

    return report;
  }

  generateSummary(timeRange) {
    const data = this.getDataForTimeRange(timeRange);

    return {
      totalPopups: data.popups.length,
      averageLoadTime: this.calculateAverage(data, 'loadTime'),
      averageInteractionDelay: this.calculateAverage(data, 'interactionDelay'),
      lcpScore: this.calculatePercentile(data, 'LCP', 75),
      fidScore: this.calculatePercentile(data, 'FID', 75),
      clsScore: this.calculatePercentile(data, 'CLS', 75),
      performanceScore: this.calculateOverallScore(data),
      issues: this.identifyIssues(data)
    };
  }

  generateDetailedReport(timeRange) {
    const data = this.getDataForTimeRange(timeRange);

    return {
      byPopupType: this.groupByPopupType(data),
      byDevice: this.groupByDevice(data),
      byBrowser: this.groupByBrowser(data),
      byNetwork: this.groupByNetworkCondition(data),
      byLocation: this.groupByLocation(data),
      performanceBreakdown: this.getPerformanceBreakdown(data),
      resourceAnalysis: this.analyzeResources(data)
    };
  }

  analyzeTrends(timeRange) {
    const data = this.getDataForTimeRange(timeRange);
    const trends = {};

    // Analyze performance trends
    const performanceData = this.getTimeSeriesData(data, 'performance');
    trends.performance = {
      direction: this.calculateTrendDirection(performanceData),
      change: this.calculateTrendChange(performanceData),
      significance: this.calculateTrendSignificance(performanceData)
    };

    // Analyze usage trends
    const usageData = this.getTimeSeriesData(data, 'usage');
    trends.usage = {
      direction: this.calculateTrendDirection(usageData),
      change: this.calculateTrendChange(usageData),
      seasonality: this.detectSeasonality(usageData)
    };

    return trends;
  }

  generateRecommendations(timeRange) {
    const data = this.getDataForTimeRange(timeRange);
    const recommendations = [];

    // Performance recommendations
    if (this.calculateAverage(data, 'loadTime') > 1000) {
      recommendations.push({
        type: 'performance',
        priority: 'high',
        title: 'Optimize Popup Load Time',
        description: 'Average load time exceeds 1 second',
        actions: [
          'Reduce resource size',
          'Implement preloading',
          'Use CDN for static assets',
          'Optimize images and fonts'
        ],
        potentialImpact: '20-40% improvement in load time'
      });
    }

    // Mobile recommendations
    const mobileData = this.filterByDevice(data, 'mobile');
    if (this.calculateAverage(mobileData, 'loadTime') > this.calculateAverage(data, 'loadTime') * 1.5) {
      recommendations.push({
        type: 'mobile',
        priority: 'medium',
        title: 'Improve Mobile Performance',
        description: 'Mobile performance significantly slower than desktop',
        actions: [
          'Implement responsive images',
          'Reduce animation complexity',
          'Optimize touch interactions',
          'Use adaptive loading strategies'
        ],
        potentialImpact: '30% improvement in mobile performance'
      });
    }

    // Resource recommendations
    const resourceIssues = this.identifyResourceIssues(data);
    if (resourceIssues.length > 0) {
      recommendations.push({
        type: 'resources',
        priority: 'medium',
        title: 'Optimize Resource Loading',
        description: 'Identified resource loading inefficiencies',
        actions: resourceIssues,
        potentialImpact: '15-25% improvement in overall performance'
      });
    }

    return recommendations;
  }

  setupAlerts() {
    this.alerts = new Map();

    // Performance threshold alerts
    this.setupPerformanceAlerts();

    // Error rate alerts
    this.setupErrorAlerts();

    // Usage pattern alerts
    this.setupUsageAlerts();
  }

  setupPerformanceAlerts() {
    const thresholds = {
      loadTime: { warning: 1000, critical: 2000 },
      interactionDelay: { warning: 100, critical: 300 },
      memoryUsage: { warning: 50 * 1024 * 1024, critical: 100 * 1024 * 1024 },
      errorRate: { warning: 0.01, critical: 0.05 }
    };

    for (const [metric, limits] of Object.entries(thresholds)) {
      this.monitorMetric(metric, limits);
    }
  }

  monitorMetric(metric, limits) {
    setInterval(() => {
      const currentValue = this.getCurrentMetricValue(metric);

      if (currentValue > limits.critical) {
        this.triggerAlert('critical', metric, currentValue, limits);
      } else if (currentValue > limits.warning) {
        this.triggerAlert('warning', metric, currentValue, limits);
      }
    }, 30000); // Check every 30 seconds
  }

  triggerAlert(severity, metric, value, thresholds) {
    const alert = {
      id: this.generateAlertId(),
      severity,
      metric,
      value,
      threshold: thresholds[severity],
      timestamp: Date.now(),
      message: this.generateAlertMessage(metric, value, thresholds[severity]),
      acknowledged: false
    };

    this.alerts.set(alert.id, alert);
    this.notifyAlert(alert);
  }

  generateAlertMessage(metric, value, threshold) {
    const metricNames = {
      loadTime: 'Load Time',
      interactionDelay: 'Interaction Delay',
      memoryUsage: 'Memory Usage',
      errorRate: 'Error Rate'
    };

    return `${metricNames[metric] || metric} exceeds ${threshold}ms (current: ${value}ms)`;
  }
}

Conclusion

Advanced performance monitoring for popup systems represents a critical component of modern web development, directly impacting user experience, conversion rates, and overall business success. The comprehensive monitoring strategies and implementation patterns explored in this guide provide a robust foundation for building popup systems that not only perform well but also maintain consistent performance across all user segments, devices, and network conditions.

Effective performance monitoring requires continuous refinement and adaptation as new technologies emerge and user expectations evolve. The techniques covered—from Core Web Vitals tracking to real-time analytics and automated optimization—represent the current best practices in popup performance engineering. However, the field continues to evolve with new APIs, improved browser capabilities, and increasingly sophisticated performance monitoring tools.

Key Takeaways: Successful popup performance monitoring requires a multi-layered approach combining browser-native APIs, custom monitoring solutions, and sophisticated analytics. By implementing the strategies outlined in this guide, developers can create popup systems that deliver optimal user experiences while maintaining technical excellence and operational reliability.

Next Steps: Begin implementing these monitoring techniques incrementally, starting with Core Web Vitals tracking and gradually incorporating more advanced features like real-time monitoring and automated optimization. Remember that performance monitoring is an ongoing process requiring continuous attention and refinement based on real-world usage data and evolving performance requirements.