Introducing Browser Insights

Speed matters. We know that when your website or app gets faster, users have a better experience and you get more conversions and more revenue. At Cloudflare, we spend our days obsessing about speed and building new features to squeeze out as much performance as possible.

But to improve speed, you first need to measure it. That’s why we’re launching Browser Insights: a new tool that measures the performance of your website from the perspective of your users. Browser Insights lets you dive in to understand where, when, and why web pages are slow. And you can enable it today, for free, with one click.

Let’s say you run an e-commerce site, and you want to make your conversion rates better. You’ve noticed that there’s a lot of traffic from visitors in Peru, but they have worse conversion than users in North America. Maybe you theorize that it takes a long time to load your checkout page, which causes customers to drop off before checking out. How would you verify that this is happening?

There are a few ways you could do this: you could check your server logs to look at timing information, or you could load the page a few times in your browser to see what’s slow.

These approaches have a few downsides though:

• If you only look at server-side data, you miss factors that impact the end-user experience -- how long did it take for the web browser to load all the necessary scripts, execute them, and paint the page?

• If you only measure from one computer (or a small number of them), you miss the diversity of the computing population -- for example, “how does this work on a phone on a 3G connection?”

To solve these problems, we use Real User Monitoring. This gives us the best of both worlds: we can run a timer inside real web browsers. This timer captures how long it takes web pages to load, from your actual users.

Browser Insights can be enabled with the flip of a switch in the “Speed” section of the dashboard:

When it’s enabled, we add a small snippet of JavaScript code to each HTML page load that uses the standard Performance API to collect timing info. Then we can start showing you metrics about how your web pages are performing in the real world:

There’s a lot of info in this graph! At a high level, there are two main types of metrics

• Request-level metrics like TCP connection time, or Request time. These metrics are counted on every page load and are impacted by Internet infrastructure, like the mobile network of your end users, or the speed of your servers.

• Page-level metrics like Page Load Time, which take into account the many requests needed to load a web page, plus the time taken to parse HTML and execute JavaScript.

For more information about what these times mean and how we chose them, see our companion blog post.

In addition to seeing several metrics about your web page performance, it’s helpful to drill into the dimensions that impact performance like URL and Country. This means you can filter down to the performance of a specific page (like your home page or checkout page), and you can see the locations where your site loads the fastest and slowest.

Going back to our example above, we want to see how performance in Peru compares to North America:

Sure enough, we can confirm that there’s significant traffic from Peru, but web pages take about 13s to load on average -- compared with just 4.2 seconds for users in the US. Theory confirmed!  Now we can filter all of our metrics to just Peru to understand what’s happening better:

Note that “Processing” has increased the most, all the way to 12 seconds. Request times are higher as well, likely because we are connecting to an origin server in the US. Web pages are made of many individual requests, so it makes sense that, when combined, they lead to slower load times. In this example, caching faster content would probably lead to significantly better page loads.

Our launch today is just the tip of the iceberg for Browser Insights. In the near future we want to add much more information that will help you understand exactly what’s slowing down your website, and what you can do to make it faster. We plan to add:

• More metrics and dimensions, including page-level metrics like Time to First Paint and more dimensions like browser and network type

• Subresource analytics. The average web page loads over 100 subresources, and we can provide a waterfall chart to show exactly which one is slow.

• A/B testing, to show you how potential configuration changes will impact the performance of your own traffic

• Error collection to monitor issues at the network layer, in JavaScript, etc

• Alerting so that you know when performance falls below a pre-defined threshold

• Insights powered by Cloudflare that tell you why something might be slow – for example, how your cache hit ratio impacts page load time

Cloudflare’s mission to help build a better Internet is based on the importance we place on establishing trust with our customers, our customers’ end users, and the Internet community globally. We have a transparent business model that aligns with the interests of our customers -- we make money from protecting and speeding up our customers’ Internet properties. We do not sell our customers’ (or their end users’) data.

Browser Insights requires that end users’ browsers report timing information back to Cloudflare. We designed Browser Insights so that it reports only the bare-minimum information needed to show our customers how their websites are performing. The only metrics Browser Insights collects are about timing. We do not track individual end users across our customers’ Internet properties. We encourage you to open up the Inspector in your favorite web browser to see what we’re sending back!

Last May we announced the all-new Speed Page. Our mission with the Speed page is to show you how fast your website is, and what you can do to make it faster. Today, we’re excited to announce that the new Speed Page is available for everyone!

Browser Insights will be available on the Speed page in early access and we’ll be working hard to bring it to everyone as soon as possible in the coming weeks. Watch this space for updates!

Subscribe to this blog for daily updates on all our Birthday Week announcements.