Performance indicator collection and analysis

Performance metric collection and analysis are indispensable in the performance optimization process. Through systematic data gathering and in-depth analysis, bottlenecks can be precisely identified and optimization strategies formulated. Covering everything from basic load times to complex runtime behaviors, comprehensive tracking of key metrics is the core method for enhancing user experience.

Performance Metric Classification System

Performance metrics are typically divided into three tiers:

1. Core User Experience Metrics:

   • Largest Contentful Paint (LCP): Measures loading performance
   • First Input Delay (FID): Measures interaction responsiveness
   • Cumulative Layout Shift (CLS): Measures visual stability

2. Technical Performance Metrics:

   // Using the Performance API to obtain navigation timing data
   const [entry] = performance.getEntriesByType("navigation");
   console.log({
     DNS lookup time: entry.domainLookupEnd - entry.domainLookupStart,
     TCP connection time: entry.connectEnd - entry.connectStart,
     Request response time: entry.responseEnd - entry.requestStart
   });
   

3. Business Custom Metrics:

   • Key business interface success rate
   • Page funnel conversion rate
   • First-screen data rendering completion time

Data Collection Technical Solutions

Browser Native API Collection

The Performance Timeline API provides comprehensive performance data acquisition capabilities:

// Monitor LCP changes
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry.size);
  }
});
observer.observe({type: 'largest-contentful-paint', buffered: true});

// Manually mark key time points
performance.mark('component_initialized');
performance.measure('init_duration', 'fetch_start', 'component_initialized');

Visual Tracking Solution

Implement DOM change monitoring using MutationObserver:

const targetNode = document.getElementById('app-container');
const config = { 
  attributes: true, 
  childList: true, 
  subtree: true,
  attributeFilter: ['data-track']
};

const callback = (mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes') {
      sendAnalytics(mutation.target.dataset.track);
    }
  });
};

new MutationObserver(callback).observe(targetNode, config);

End-to-End Monitoring Implementation

Building a complete monitoring system requires:

1. Frontend SDK: Encapsulates data collection logic

   class MonitorSDK {
     private static instance: MonitorSDK;
     
     constructor(private endpoint: string) {}
     
     trackMetric(name: string, value: number) {
       navigator.sendBeacon(this.endpoint, 
         JSON.stringify({metric: name, value})
       );
     }
   }
   

2. Server-Side Receiving Service: Handles high-concurrency data reporting

3. Real-Time Processing Pipeline: Flink/Kafka real-time stream processing

4. Storage Layer: Time-series database + OLAP engine combination

Data Analysis Methodology

Time Series Analysis

Use moving average algorithms to smooth out spikes:

function smoothData(points, windowSize = 5) {
  return points.map((_, i) => {
    const start = Math.max(0, i - windowSize);
    const subset = points.slice(start, i + 1);
    return subset.reduce((a,b) => a + b, 0) / subset.length;
  });
}

Multi-Dimensional Drill-Down Analysis

Typical analysis dimension combinations:

Anomaly Detection Algorithms

Z-Score-based outlier detection:

# Pseudocode example
def detect_anomalies(data):
    mean = np.mean(data)
    std = np.std(data)
    threshold = 3 * std
    
    return [
        (i, x) for i, x in enumerate(data) 
        if abs(x - mean) > threshold
    ]

Performance Optimization Decision Tree

Build a decision model based on metric data:

1. LCP > 2.5s:

   • Check lazy loading strategies for images
   • Verify font loading blocking
   • Audit third-party script impact

2. CLS > 0.25:

   <!-- Optimization example: Reserve space for images -->
   <div class="image-container" style="aspect-ratio: 16/9">
     <img src="hero.jpg" loading="lazy" 
          width="1600" height="900">
   </div>
   

3. API P95 > 800ms:

   • Implement request batching
   • Check caching strategies
   • Evaluate the necessity of interface splitting

Continuous Monitoring System Construction

Key elements for building an automated performance dashboard:

1. Metric Baseline Management:

   -- Example SQL for dynamic threshold calculation
   SELECT 
     metric_name,
     AVG(value) * 1.5 AS warning_threshold,
     AVG(value) * 2 AS error_threshold
   FROM perf_metrics
   WHERE env = 'production'
   GROUP BY metric_name
   

2. Intelligent Alert Rules:

   • 50% sudden increase compared to previous periods
   • Metric degradation for 3 consecutive cycles
   • Golden path success rate < 98%

3. Version Comparison Analysis:

   // A/B test performance data comparison
   function compareVersions(v1, v2) {
     return {
       lcp: v2.lcp - v1.lcp,
       fid: v2.fid - v1.fid,
       cls: v2.cls - v1.cls 
     };
   }
   

Performance Data Visualization Practices

Build interactive analysis views using ECharts:

option = {
  dataset: [{
    dimensions: ['timestamp', 'fcp', 'lcp'],
    source: performanceData
  }],
  xAxis: {type: 'time'},
  yAxis: {type: 'value'},
  series: [{
    type: 'line',
    encode: {x: 'timestamp', y: 'fcp'},
    markLine: {
      data: [{type: 'average', name: 'Average'}]
    }
  }],
  dataZoom: [{
    type: 'slider',
    filterMode: 'filter'
  }]
};

Performance Regression Prevention Mechanism

Integrate performance gates into CI workflows:

# GitHub Actions example
- name: Run Performance Tests
  uses: example/performance-action@v1
  with:
    url: https://your-app.com
    thresholds: |
      lcp: 2000
      cls: 0.1
      fid: 100
  fail_threshold: true

Linking Performance Data to Business

Establish mappings between business KPIs and performance metrics:

1. Conversion Rate Analysis Model:

   Conversion Rate = β0 + β1*(1/LCP) + β2*(1/FID) + ε
   

2. User Retention Prediction:

   # Using random forest for modeling
   from sklearn.ensemble import RandomForestRegressor
   
   model = RandomForestRegressor()
   model.fit(
     X_train[['lcp', 'fid', 'cls']], 
     y_train['7d_retention']
   )
   

3. ROI Calculation Framework:

   Performance Optimization ROI = Σ(Increased converted users * LTV) - Optimization cost