How to Measure Your Website Speed

08/02/2021

A slow website affects customer happiness, increases abandonment, lowers brand experience, impacts SEO, frustrates site admins, and just kinda makes everything suck. We’ve been "under the hood" performance tuning websites for clients for years. In our Improving Website Performance Series, we'll help you establish a baseline for your site, review the key levers we look to for performance improvements, and point you in the right direction as you get started.

Calling all webpage elements

As a website visitor, you experience a webpage as whole, when it really is a combination of hundreds of page elements (code, stylesheets, images, video, fonts, javascript, code libraries, and marketing technologies) being loaded and rendered in your browser. 
 
The speed in which those elements load is a high-level metric for measuring website performance and greatly affects user experience of a website. However, not all of the elements in a webpage are needed to make a page usable. 

Want a better understanding of core web vitals and their impact on website performance? Refer to our more detailed blog on the subject.

Most important measure: Contentful painted page

Let’s start with a shared understanding of when a page is loaded. Most will agree, it is when a page can be read and is clickable. This is known as the largest contentful paint, when the largest content within the page is visible to users. 
 
This is the point the website user will perceive the page as loaded (versus the first contentful paint where only the first elements appear). It is recommended that your largest contentful painted paint occur within 2.5 seconds of page load to provide a good user experience.
 
Webpage performance is often measured in the time it takes to render the largest painted page. It’s at that moment that your customers will perceive that a page has loaded.
 
How do you measure your website’s largest contentful paint and overall speed? We’ll introduce three of the tools we like to start with on every website. 
 
Keep in mind, you’re looking at the performance of YOUR personal/business network connection loading the page—it will not exactly match with the average general public experience.

1. Google Chrome Developer Tools

To get a clear understanding of the “painted page” as well as an initial benchmark for performance we like to use Google Chrome Developer Tools and watch the “waterfall” view of elements of a page load. 
 
To check your website’s contentful painted page:

  1. Open Google Chrome Developer Tools. You can open the built-in developer tools in Chrome by holding down Option+Command+i or by right-clicking the page and selecting "Inspect." 
  2. Once open, select the network tab, and you can watch all the elements of a page load. 

Note: You should empty your browser cache or use incognito mode between each page load. Part of a browser’s job is to cache page assets to improve performance. 

The following is an example of the Bear Group homepage elements loading.
 

screenshot showing the bear group website homepage speed metrics


Dissecting this you can see:

  • Request count: There are 140 requests/responses from the server needed to build up this page.
  • Server response time: This is the server speed for the main HTML document containing most of the page. It is 308ms. This page contains many references to other assets that must be loaded in order.
  • Page weight: This single page contains 5.3mb of assets/resources.
  • Painted page: The “DOMContentLoaded” or blue line is where the page is painted, and basically usable. That happens at 558ms for our homepage. 
  • Fully-rendered page: Many items can (and should) be loaded after the initial page is painted. Load order is very important since it affects the perceived performance, and is one of the levers you have. Our page fully loads in about 8.25s there are analytics, our Drift online chat tool, HotJar, a variety of marketing tools that load after the blue line. 

Pro-Tip: Adding the filter: -domain:*.<yourdomain>.com in the Developer Tools window, will show resources external to the domain that are loading. This is important, because it highlights the dependencies your page has. Typically these are analytics javascript files, marketing technology tools, custom fonts, and other services (often added through Google Tag Manager) that add significant load to your page and dependencies for load time. 

On the Bear Group homepage, these account for 109 of the 140 requests, and 3.3mb out of 5.3mb of assets! So, 75% of elements on the page are from these external providers—and most are not specifically needed to render our site. Fortunately, most of these elements load AFTER the painted page, so they really don’t have a big effect on perceived performance. 

2. Lighthouse GTmetrix

There are a number of external services that will evaluate and grade your page performance. We’ve used a bunch of different versions of these over the years, but currently like the Lighthouse GTmetrix reporting. You simply enter your URL on their site and it will analyze performance and provide a report.
 
They take the waterfall view we looked at above and present it in a very nice report. This report has actionable items (though they are canned responses) like adding JS/CSS compression, lowering image sizes, introducing a CDN—all quick wins for page speed.

Pro-tip: In case it’s not obvious, this is not a human user. This is an automated server that is running a browser and simulating the experience of a customer using your site. So use this as an approximation of what customers might experience.

Also, the responses are canned ideas and sometimes can be very difficult to solve. For example, maybe you don’t have a CDN, or are on a system that can’t do full-page caching—use GTmetrix suggestions as a guide. You likely will not be able to implement them all.
 

graphic showing GTmetrix page load

3. Google Analytics 

In Google Analytics > Behavior > Site Speed there is also an analysis of page speed. This is an interesting set of page speed measurements, and differs from the two above, because it represents site speed data from users who were on your site.
 
While this may sound like the holy grail of speed metrics, it doesn’t provide much actionable information. Also, it’s a little hard to understand what you’re looking at — since sometimes the numbers look shockingly terrible. This is the report we’ve had the most questions about from marketing teams since it sometimes makes it look like a site is super slow. 
 
The initial view (example below from beargroup.com) is showing an “average” across all site pages, and is showing full load time, not just the first contentful paint. 

Pro-Tip: You have to filter to a particular page, and select “DOM Interactive” (meaning when the page is loaded enough to use), and filter traffic to just view the US (and ideally your Google Analytics already excludes bot and in-office traffic). 

Google Analytics Page Timings


For the most part, the reports you’ll get back from these tools will have “front-end” suggestions. They are very useful diagnostic tools. We like to use them as a data source to triangulate and look for the items causing the biggest performance issues. 

Read more in the series: