Cloudflare Browser Insights

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.

This feature is available for free in all Cloudflare plans.


Activating Browser Insights

To activate Browser Insights:

  1. Log in to the Cloudflare dashboard.
  2. Ensure the account and website you want to update is selected.
  3. In the main menu bar, click the Speed app.
  4. Next, click the Browser Insights tab. 
  5. Click the toggle to the On position.
Screenshot showing how to enable Browser Insights.

Once you enable Browser Insights, you'll be able to visualize the data in the Cloudflare dashboard Speed app within a few minutes.


Browser Insights data origin and collection

Origin of Browser Insights data

Browser Insights relies on the performance.timing object to collect a number of metrics about page load performance. 

The following graph from the W3C depicts the sequence of timing events for web page loads.

The following graph illustrates the timing attributes defined by the PerformanceTiming interface and the PerformanceNavigation interface with or without redirect, respectively.

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.

Browser Insights does not insert the beacon on every page load. Instead, it inserts a beacon in a random sample of web pages and uses the information collected to estimate the amount of traffic and performance of your web pages. At this time, you cannot change the sampling rate.

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 - domLoading) - 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.

Cloudflare plans to provide more detailed analytics for the Processing metric in the future.

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.

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk