Cloudflare Browser Insights -- Performance Monitoring

In this tutorial, you'll learn about Cloudflare Browser Insights. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This tutorial explains how Cloudflare Browser Insights monitors real user performance by collecting Core Web Vitals, navigation timing, and resource load data from actual visitors to help you identify and fix front-end performance issues.

Why Browser Insights Matters

Server-side performance monitoring tells you how fast your origin responds, but it cannot measure what happens in the browser after the HTML arrives. JavaScript execution, CSS rendering, image decoding, and third-party script delays all happen on the client side. Browser Insights fills this gap by collecting real user monitoring (RUM) data directly from Visitor browsers. This reveals the actual experience your users have, not just the server response time. Without RUM data, you might think your site is fast because your server responds in 50ms, while users wait 5 seconds for a blocking script to load.

Real-world use: Durga Antivirus Pro used Browser Insights to discover that a third-party chat widget was blocking page rendering on mobile devices. The LCP was 4.8 seconds for mobile users. After deferring the chat script, LCP dropped to 1.9 seconds. The improvement was confirmed through Browser Insights data within hours of deployment.

Browser Insights Data Collection Flow

flowchart TD
  A[Visitor loads page] --> B[Performance API collects timings]
  B --> C[Browser Insights beacon]
  C --> D[Cloudflare edge processes data]
  D --> E[Aggregate metrics]
  E --> F[Dashboard visualizations]
  F --> G[Identify performance issues]
  G --> H[Deploy fixes]
  H --> A
  style B fill:#f90,color:#fff
  style D fill:#f90,color:#fff
  style F fill:#f90,color:#fff

Enabling Browser Insights

Browser Insights is enabled through the Cloudflare dashboard for proxied zones. No code changes are needed on your site -- Cloudflare injects the beacon script automatically.

# Enable Browser Insights via API
curl -X PATCH "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/browser_insights" \
  -H "Authorization: Bearer API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"value":"on"}'
# Expected output:
# {"success":true,"result":{"id":"browser_insights","value":"on"}}

Once enabled, Browser Insights begins collecting data from all pages served through Cloudflare. The beacon script is ~4KB and loaded asynchronously so it does not affect page performance. No additional configuration or code changes are required.

Analyzing Core Web Vitals

Browser Insights reports the three Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics affect Google search rankings directly.

# Fetch Browser Insights data via API
curl -s "https://api.cloudflare.com/client/v4/zones/ZONE_ID/analytics/dashboard" \
  -H "Authorization: Bearer API_TOKEN" | jq '.result.browser_insights'
# Expected output:
# {
#   "lcp": {"p75": 2100, "p90": 4200, "good_percent": 72},
#   "inp": {"p75": 120, "p90": 280, "good_percent": 85},
#   "cls": {"p75": 0.08, "p90": 0.25, "good_percent": 81},
#   "fcp": {"p75": 1500, "p90": 3100, "good_percent": 78},
#   "ttfb": {"p75": 350, "p90": 850, "good_percent": 88}
# }

The p75 and p90 values represent the 75th and 90th percentile. For LCP, a p75 of 2100ms means 75 percent of visitors experience LCP under 2.1 seconds. The p90 of 4200ms reveals that 10 percent of visitors have very slow load times -- this is where optimization efforts should focus.

Resource Waterfall Analysis

Beyond Core Web Vitals, Browser Insights provides detailed timing for every resource on the page. This helps identify slow scripts, large images, or excessive API calls.

// Access Browser Insights data programmatically via Workers
export default {
  async fetch(request) {
    const insightsData = await fetch(
      'https://api.cloudflare.com/client/v4/zones/ZONE_ID/analytics/dashboard',
      { headers: { 'Authorization': 'Bearer API_TOKEN' } }
    );
    const data = await insightsData.json();
    const slowResources = data.result.browser_insights.slow_resources;
    return new Response(JSON.stringify(slowResources, null, 2), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
}
// Expected output:
// [
//   {"url":"https://example.com/heavy-script.js","load_time_ms":3200,"type":"script"},
//   {"url":"https://example.com/large-banner.jpg","load_time_ms":2100,"type":"image"},
//   {"url":"https://example.com/slow-api","load_time_ms":1800,"type":"fetch"}
// ]

Each slow resource shows the URL, load time, and resource type. This data enables targeted optimization: lazy-load images, defer non-critical scripts, or add cache headers to slow API responses.

Performance Score and Trends

Browser Insights calculates a performance score based on weighted Core Web Vitals thresholds. The score changes over time, so you can track the impact of optimizations.

# Fetch performance trends for the last 7 days
curl -s "https://api.cloudflare.com/client/v4/zones/ZONE_ID/analytics/dashboard" \
  -H "Authorization: Bearer API_TOKEN" \
  --data '{"since":"2026-06-16T00:00:00Z","until":"2026-06-23T00:00:00Z"}' | \
  jq '.result.browser_insights.trend'
# Expected output:
# [
#   {"date":"2026-06-16","score":72,"lcp":2800}, "#   {"date":"2026-06-18"","score":75,"lcp":2600}, "#   {"date":"2026-06-20"","score":81,"lcp":2100}, "#   {"date":"2026-06-22"","score":85,"lcp":1900}
# ]

In this trend, the performance score improved from 72 to 85 over a week. Each optimization was validated with real user data, confirming the change improved the actual Visitor experience rather than just a synthetic test result.

FAQ

Practice Questions

1. What does the p75 value for LCP represent in Browser Insights reports?
2. How would you identify which third-party scripts are slowing down page load using Browser Insights?
3. Why is real user monitoring data more valuable than synthetic testing for performance optimization?

Summary

Cloudflare Browser Insights provides real user performance data including Core Web Vitals, navigation timing, and resource Waterfall analysis. It is enabled from the dashboard without code changes and collects data asynchronously from actual visitors. The p75 and p90 metrics reveal both typical and edge-case performance, while resource-level data identifies specific optimization targets. This turns performance optimization from guesswork into a data-driven Process.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro -- security-first tools for the modern web.