Performance Analytics & Web Vitals

Core Web Vitals, RUM vs synthetic monitoring, and the Performance APIs

Why Performance Is an Analytics Concern

A page that works perfectly but takes 8 seconds to load is a failed page. Performance is a core analytics concern — it affects user experience, conversion rates, SEO rankings, and revenue. Google uses performance metrics as ranking signals. Measuring real user performance is a direct application of analytics.

Core Web Vitals

Core Web Vitals are Google's framework for measuring user experience through three metrics:

Metric What It Measures Good Threshold API
LCP (Largest Contentful Paint) Loading — when the main content is visible ≤ 2.5s PerformanceObserver
INP (Interaction to Next Paint) Responsiveness — delay from user input to visual update ≤ 200ms PerformanceObserver
CLS (Cumulative Layout Shift) Visual stability — unexpected layout movement ≤ 0.1 PerformanceObserver

These are measured on real users, not lab tests. That is the analytics connection — you need to collect these metrics from actual visitor sessions. Google uses Core Web Vitals as search ranking signals, meaning poor performance literally reduces your search visibility.

RUM vs. Synthetic Monitoring

Aspect Real User Monitoring (RUM) Synthetic Monitoring
Data source Actual user sessions Scripted bots from controlled locations
What it tells you Real-world experience across devices/networks Baseline performance under controlled conditions
Variability High — real networks, real devices Low — consistent test environment
Coverage Only pages users visit Any page you configure
Setup Analytics script on every page Configure test scenarios
Examples web-vitals JS library, custom beacons Lighthouse, WebPageTest, Pingdom

RUM is analytics. Synthetic is testing. Both are necessary but serve different purposes. For the course project, you are building RUM — collecting real performance data from real visitors.

The Performance APIs

Key browser APIs for collecting performance data:

  • Navigation Timing API — DNS lookup, TCP connect, TLS handshake, TTFB, DOM load, full page load
  • Resource Timing API — Load time of every resource (images, scripts, CSS)
  • Performance Observer API — Subscribe to performance entries as they occur (the modern approach)
  • Long Tasks API — Detect tasks that block the main thread for >50ms
// Using the web-vitals library (Google's official library) import {onLCP, onINP, onCLS} from 'web-vitals'; function sendMetric(metric) { navigator.sendBeacon('/collect', JSON.stringify({ type: 'web_vital', name: metric.name, // 'LCP', 'INP', or 'CLS' value: metric.value, rating: metric.rating, // 'good', 'needs-improvement', or 'poor' url: location.href, timestamp: Date.now() })); } onLCP(sendMetric); onINP(sendMetric); onCLS(sendMetric);

What Performance Data Tells You

  • Slow pages correlate with higher bounce rates and lower conversions
  • Performance varies dramatically by device and network — aggregate numbers hide the pain
  • Segment by device type, connection speed (ECT from Client Hints), geography
  • The 75th percentile (p75) is the standard reporting threshold for Web Vitals, not the average — because averages hide tail latency

The Enriching Server Logs section covers how Client Hints like ECT, Downlink, and RTT can provide network quality data without JavaScript.