Understand how visitors experience you site's performance with Cloudflare Browser Insights.
About Cloudflare Browser Insights
Browser insights is a new tool that lets you understand the performance of your web pages as experienced by your site visitors.
When Cloudflare proxies your site and the Browser Insights feature is enabled, Cloudflare writes and injects a piece of JavaScript code (also known as a beacon) into your web pages that collects certain pieces of information. More specifically, this beacon collects metrics using the web Performance API, which is available in all major web browsers.
Browser Insights now includes support for Core Web Vitals. Core Web Vitals is a new set of web performance metrics from Google to help webmasters measure and understand load time, responsiveness, and visual stability.
Enable Browser Insights
To enable Browser Insights:
- Log in to the Cloudflare dashboard.
- Ensure the account and website you want to update is selected.
- In the main menu bar, click the Speed app.
- Next, click the Browser Insights tab.
- In the left navigation, click Configurations.
- Toggle Browser Insights to On.
Once you enable Browser Insights, you can visualize the data in the Cloudflare dashboard Speed app within a few minutes.
Configure Browser Insights
Configure Browser Insights for your entire domain for specific hostnames or paths by clicking Create a rule on the Browser Insights Rules card.
Browser Insights Rules
To measure every page on your domain,
- enable Browser Insights, and do not create any Browser Insights Rules. The Cloudflare dashboard displays a message showing Browser Insights enabled for your entire zone.
To use Browser Insights for your domain and exclude individual pages,
- create a rule to exclude Browser Insights for each page.
- Alternatively, to include Browser Insights only on certain pages, create explicit rules to measure those pages.
To measure all sites under a specific subdomain while excluding individual pages,
- create a rule to measure your chosen subdirectory on the specific subdomain such as /articles/ for blog.example.com and then make a rule to exclude certain paths like /articles/2018/* and /articles/2017/*
Core Web Vitals
Core Web Vitals are higher-level metrics designed by Google to capture the user experience more completely. Three “core” Web Vitals metrics are measured: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
Browser Insights offers more detail to the Core Web Vitals, as you can filter by group, URL, Browser, OS, or Country in the Cloudflare dashboard.
Each metric is assigned a rating, Good, Needs Improvement, and Poor, based on Google’s methodology and testing.
To improve your Core Web Vitals score, review each metric’s documentation:
Browser Insights data origin and collection
Origin of Browser Insights data
Browser Insights relies on the performance.getEntriesByType('navigation') object to collect a number of metrics about page load performance. If Navigation Timing Level 2 is not supported, then performance.timing (Level 1) is used.
The following graph from the W3C depicts the sequence of timing events for web page loads.
Data collection and reporting
Browser Insights collects the bare minimum amount of information, timing metrics, to show customers how their websites perform.
The Browser Insights performance beacon loads from https://static.cloudflareinsights.com/beacon.min.js and uses a third-party domain so that the script is cached across many website loads. You may need to update your Content Security Policy (CSP) settings to load this script.
Beacon data is sent back to https://<yourdomainname>/cdn-cgi/beacon/performance. Web Vital metrics are reported when the visibilityState is hidden for the first time after the page load event is triggered.
Browser Insights metrics and dimensions
You can visualize the data collected by Browser Insights from the Browser Insights tab of the Cloudflare dashboard Speed app.
The "insights" are classified into metrics and dimensions that appear in several charts. You may apply filters for country and URL, and select a specific a timeframe for analysis.
See below for additional information about metrics and dimensions.
Metrics
Browser Insights reports feature the following metrics (all measured in milliseconds):
Total - Represents the sum of all timing metrics shown on the graph.
DNS (domainLookupEnd - domainLookupStart) - Measures how long a DNS query takes. This could appear as zero for re-used connections or content stored in the local cache (memory or disk).
TCP (connectEnd - connectStart) - Measures how long it takes to establish a TCP connection with the server. If using HTTPs, this process includes TLS negotiation time.
Request (responseStart - requestStart) - Shows the time elapsed between making an HTTP request and receiving the first byte of the response.
Response (responseEnd - responseStart) - Represents the time elapsed between the first byte and the last byte of the response received. You can think of this as a resource download time.
Processing (domComplete - domInteractive) - Measures how long it took to render the page. This includes loading any resources that block page rendering, such as images, scripts, and style sheets. If this number is big, you can optimize your document architecture, resource size, or configure settings in the Cloudflare Speed app, such as Auto Minify the source code. This document process can be drilled down more with domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, and domComplete.
Load Event (loadEventEnd - loadEventStart) - When a document and its resources finish loading, the browser triggers a load event. This duration may be helpful if you have additional functions or any logic for the load event.
Dimensions
Currently, you can break down and sort the data based on the Country and URL dimensions.
The image depicts a sample breakdown by country as well a the top countries and URLs by page loads.
