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.
Activating Browser Insights
To activate 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'll be able to visualize the data in the Cloudflare dashboard Speed app within a few minutes.
Enable Browser Insights for your entire zone or enable or disable it for certain hostnames or paths by clicking Create a rule within the Browser Insights Rules section.
For example, to measure every page on a zone, just turn on Browser Insights and don’t create any Browser Insights Rules. The Cloudflare dashboard displays a message showing Browser Insights enabled for your entire zone.
Alternatively, to use Browser Insights by default but exclude certain pages, create a rule to exclude Browser Insights for certain paths. Moreover, to include Browser Insights on certain paths, create explicit rules to measure those paths.
To measure all sites under a specific subdomain while excluding certain pages, first create a rule to measure your chosen subdirectory on the specific subdomain such as /articles/ for blog.example.com and then create a rule to exclude certain paths like /articles/2018/* and /articles/2017/*
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
Browser Insights collects the bare minimum amount of information necessary to show customers how their websites perform. It only collects timing metrics. In addition, Cloudflare does not track individual end users across our customers’ Internet properties.
To see what information Cloudflare sends back, we encourage you to open up the inspector feature in your favorite web browser and examine the data.
The performance beacon is loaded from https://static.cloudflareinsights.com/beacon.min.js. We use a third-party domain so that the script may be cached across many website loads. You may need to update your Content Security Policy (CSP) settings to be able to load this script. Learn more about CSP.
Beacon data is sent back to https://<yourdomainname>/cdn-cgi/beacon/performance.
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.
