Web Performance: Measure and Report

Why does page speed matter?

You want to give your potential customers the best possible experience and what better way to do that than with a great first impression? Especially when your customers are browsing multiple sites or coming in through paid advertising, you want to stand out and that starts with a smooth browsing experience.

There are also thousands of case studies on how improving page load performance increases conversions. That’s not surprising: who wants to wait more than 5 seconds for a web page to load? It’s a numbers game: depending on your traffic, a few percentage points increase means a lot of revenue.

Improving page load performance is also good for traffic, as Google takes web performance metrics into account when ranking pages.

Finally, improving your site’s page speed usually means that you’ll end up using less bandwidth, which is great for both costs and the environment!

What makes a website fast?

When you open a website with your favorite browser, you make an HTTP request that is routed to a web server which responds with an HTML document describing the content of your website as well as referencing additional resource to load such as images, CSS stylesheets and JavaScript files.

Your browser downloads and parses the HTML code, identifies which user interfaces to display, it applies styles through CSS, calculates the layout of the page and finally renders the pixels on your screen.

You might guess that the first thing to optimize is how fast your browser receives the initial HTML response which depends on how you have set up your Content Delivery Network as well as the response time of your own server. For images to load fast, they need to be discovered early and also be fast to download. The same goes for your CSS and JavaScript assets, which are critical to providing a meaningful user experience.

Making a website fast boils down to prioritizing the loading order of critical assets that are immediately visible to the user, and minimizing their size so that they can be downloaded and ready to use by your browser early.

This is difficult to measure and reproduce consistently and is not a good reflection of how users experience loading your website. Page load performance metrics help proxy how users experience page loads by measuring how fast your hero content pixels are painted on screen, and how responsive and visually stable your website is.

If you are already familiar with web performance, you know that I am talking about Web Vitals.

How fast is your hero content painted on screen?

How responsive is your website to users’ inputs?

How visually stable is your layout?

Note: Web Vitals is an initiative started by Google as a fast web aligns with their business incentives. and while Safari and Firefox do not currently support all Web Vitals, they are very good metrics to start with especially considering Chrome’s 63% market share.

Getting started with Web Performance

When you start the journey to make your website load faster, the first thing you want to do is measure your current performance with Web Vitals. One thing you do not want to do is to focus and rely on Lighthouse’s data: even while it can sometimes be useful in specific cases, its data is not consistent enough and not at all representative of how real users experience loading your website.

You want to accurately measure the experience of real users, and for that you need to rely on field data. Google has solved the problem for you by providing Chrome User Experience Report (CrUX). This works well if you have enough users browsing your site on Chrome and provides a 28-day rolling average of aggregated metrics. It is a great starting point and even more so since Google recently made available a dashboard to visualize it: CrUX Vis. This even gives you weekly historical data and how you are trending.

If you do not yet have enough users browsing your website to be in CrUX or if you want more granular or even real-time data, you will need to start collecting your own metrics directly from your users (with their consent!). This is relatively easy to do using Google’s web-vitals library and pass the data to your favorite reporting tool. This allows you to visualize the impact of new features and performance improvements in real time as you roll them out, as well as slice and dice the data on a per-page basis. There are also off-the-shelf solutions you can use to accomplish this, such as DebugBear or RUMvision.

The key is to start reporting your web performance early and everywhere. I’ve had great success creating a monthly performance report that I published on the company internal blog as well as setting up real time dashboards with Grafana. What also made the monthly performance report popular was that I compared our company with direct competitors. I just launched a free tool to help you do the same and start raising awareness on how you stand on web performance against your direct competitors, give it a try!