Real User Monitoring (RUM) implementation

Author：Chuan Chen 阅读数：27211人阅读分类：性能优化

What is Real User Monitoring (RUM)

Real User Monitoring (RUM) is a technical approach that collects and analyzes performance data generated during real users' interactions with websites or applications to evaluate actual user experience. Unlike traditional Synthetic Monitoring, RUM captures real user experience data under various network conditions, device types, and geographical locations.

The core value of RUM lies in:

Reflecting real user experience rather than lab-environment test results
Capturing edge cases and long-tail issues
Providing correlation analysis between user behavior and performance metrics
Helping identify performance bottlenecks that impact business metrics

Core Metrics of RUM

Key Performance Indicators

First Contentful Paint (FCP): The time from when the page starts loading to when any part of the page content is rendered on the screen.
Largest Contentful Paint (LCP): The time when the largest content element visible in the viewport completes rendering.
First Input Delay (FID): The time from when a user first interacts with the page to when the browser can actually respond to that interaction.
Cumulative Layout Shift (CLS): The sum of all unexpected layout shifts that occur during the entire lifecycle of the page.

User Perception Metrics

// Example: Using the PerformanceObserver API to monitor LCP
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
    // Send data to analytics platform
    analytics.send('LCP', {
      value: entry.startTime,
      url: window.location.href,
      deviceType: navigator.userAgent
    });
  }
});

observer.observe({type: 'largest-contentful-paint', buffered: true});

RUM Data Collection Techniques

Browser API Integration

Modern browsers provide various performance monitoring APIs:

Navigation Timing API: Provides detailed timing information about the page loading process.
Resource Timing API: Monitors timing data for all resource loads.
User Timing API: Allows developers to define custom measurement points.
Paint Timing API: Specifically designed to capture paint-related metrics.

// Resource load monitoring example
window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource');
  resources.forEach(resource => {
    console.log(`${resource.name} load time:`, 
      resource.duration.toFixed(2), 'ms');
  });
});

Data Sampling Strategies

To avoid data overload, sampling strategies are typically employed:

Fixed-Ratio Sampling: For example, 1% of page visits.
Stratified Sampling: Increase the sampling rate for critical pages.
Outlier Sampling: 100% collection for sessions with extremely poor performance.
Business Metric Correlation Sampling: Sessions correlated with business metrics like conversion rates.

RUM System Architecture Design

Data Collection Layer

Frontend SDK: Lightweight JavaScript library responsible for collecting and preliminary data processing.
Beacon API: Ensures reliable data transmission even during page unload.
Web Worker: Isolates monitoring logic from the main thread to avoid impacting user experience.

// Using the Beacon API to send data
const rumData = {
  timestamp: Date.now(),
  fcp: 1200,
  lcp: 2500,
  cls: 0.1
};

navigator.sendBeacon('/collect', JSON.stringify(rumData));

Data Processing Layer

Data Cleaning: Filters out invalid or anomalous data.
Session Reassembly: Reorganizes scattered events into complete user sessions.
Metric Calculation: Computes derived metrics based on raw data.
Anomaly Detection: Identifies performance anomaly patterns.

Storage and Analysis Layer

Time-Series Database: Stores time-series data, such as InfluxDB.
OLAP System: Supports multidimensional analysis, such as Druid.
Data Lake: Stores raw event data for retrospective analysis.

Correlation Between RUM and Business Metrics

Conversion Rate Analysis

Correlate performance metrics with business conversion rates, for example:

A 1-second increase in page load time leads to a 7% drop in conversion rate.
Pages with LCP exceeding 2.5 seconds see a 30% increase in bounce rate.

User Cohort Analysis

Analyze performance differences by dimensions such as device type, geographical location, and network conditions:

Mobile vs. Desktop: LCP differences on 3G networks.
Regional Differences: Performance across different CDN nodes.
Browser Differences: FID comparison between Chrome and Safari.

RUM Implementation Challenges and Solutions

Data Accuracy

Problem: Single-point measurements may not reflect the true situation.

Solutions:

Use standardized measurement methods provided by Web Vitals libraries.
Cross-validate with multiple measurement points.
Reconfirm extreme values.

Performance Overhead

Problem: Monitoring code itself may impact performance.

Solutions:

Use Web Workers for complex computations.
Delay execution of non-critical monitoring tasks.
Adopt efficient data serialization methods.

// Optimized performance monitoring code
const monitor = {
  init() {
    this.scheduledSend = false;
    this.batch = [];
    
    // Use requestIdleCallback for non-critical tasks
    if ('requestIdleCallback' in window) {
      this.scheduleSend = () => {
        if (!this.scheduledSend) {
          requestIdleCallback(() => this.sendData());
          this.scheduledSend = true;
        }
      };
    }
  },
  
  addData(data) {
    this.batch.push(data);
    this.scheduleSend();
  },
  
  sendData() {
    if (this.batch.length > 0) {
      navigator.sendBeacon('/collect', JSON.stringify(this.batch));
      this.batch = [];
    }
    this.scheduledSend = false;
  }
};

Privacy Compliance

Problem: User data collection must comply with regulations like GDPR.

Solutions:

Provide opt-out mechanisms for users.
Anonymize personally identifiable information.
Clarify data retention policies.

RUM Data Visualization

Core Dashboard

Performance Trend Charts: Display key metrics over time.
Geographical Heatmaps: Show performance across regions.
Device Matrix: Compare metric differences by device type.

Anomaly Detection Views

Anomaly Session Replay: Recreate user interaction paths when issues occur.
Resource Waterfall: Analyze resource loading sequences for problematic pages.
Correlation Analysis: Show relationships between performance and business metrics.

Advanced RUM Use Cases

Single Page Application (SPA) Monitoring

SPAs require special handling:

Performance measurement during route changes.
Frontend rendering metric collection.
Component-level performance analysis.

// SPA route change monitoring
let lastRouteChangeTime;

window.addEventListener('popstate', () => {
  const now = performance.now();
  const routeLoadTime = now - lastRouteChangeTime;
  // Report route change performance data
  monitor.addData({
    type: 'route_change',
    duration: routeLoadTime,
    from: document.referrer,
    to: window.location.href
  });
  lastRouteChangeTime = now;
});

Error Monitoring Integration

Combine RUM with frontend error monitoring:

Correlate JavaScript errors with performance metrics.
Analyze the context in which errors occur.
Identify errors caused by performance issues.

A/B Testing Support

Use RUM data to evaluate performance differences between versions:

Compare core metrics between test and control groups.
Analyze the impact of performance changes on conversion rates.
Identify performance regression issues.

Synergy Between RUM and Synthetic Monitoring

Complementary Relationship

RUM: Reflects real user experience and captures long-tail issues.
Synthetic Monitoring: Provides benchmark tests in controlled environments.

Joint Analysis Model

Problem Discovery: Identify performance issues through RUM.
Problem Reproduction: Use synthetic monitoring to reproduce issues in lab environments.
Solution Validation: Verify optimization effects through A/B testing.