Performance Testing using WebPageTest

The Simple Configuration interface is correspondingly simple. You can choose whether to use a Desktop or Mobile configuration, using 3G, 4G, or Cable. By default, the site chooses a 4G Mobile configuration, testing from Virginia, USA. You can also include a repeat view of the site, and run a Lighthouse audit, but that’s where your options stop. For a simple test though, this is still a great starting point.

And not only can you run a Site Performace Test, you can also choose just to run one of the other tests WebPageTest offers, like Core Web Vitals, Lighthouse, Visual Comparison or Traceroute. By default, it runs a Site Performace test which includes the Core Web Vitals anyway.

There are simply too many options in the Advanced Testing section to cover, as this is designed to be a powerful tool for developers. But there are choices here not available in the Simple Testing section that can be very useful, even to beginners.

To start with, there are a huge number of Test Locations to choose from, and in the default location, also a huge variety of devices to use. Virginia is the default location, and with that location, you can choose from a large number of browsers and browser dimensions, which to run your test. If you prefer, you can even select your testing location from a map.

The diversity of testing options on offer make this a very powerful tool for developers. There is the ability to run up to 9 consecutive tests, and you can show results for the first view only or also the repeat views, and you can capturing video of the page load as well. Going into the other tabs would only be useful for developers, but there are a huge range of options to customize your tests as much as you want.

When the test has completed, you are presented with a Performance Summary. This shows your results in all the Observed Metrics, from First Byte though to Total Blocking Time and Total Bytes, as well as Real User Measurments like First Contentful Paint, and Time to First Byte.

Let’s now look at the individual results tabs and what they can show us.

The Filmstrip tab offers a filmstrip of the load time of the site. There is a key to understand the individual frames of the filmstrip and you can adjust the Filmstrip Settings.

As you scroll though the filmstrip, a red marker shows you the relevant place in a waterfall diagram. Under this is a chart mapping the visual progress of the site as it loads, and below this are a range of charts showing the Timings, Layout Shifts, Requests and Bytes.

The Details tab is where it gets very technical. As the descriptions says, you can use this page to explore the metric timings and request waterfall for any run of your test. The page is split up into 6 sections: Observed Metrics, Real User Measurements, Waterfall View, Connection View, Request Details, and Request Headers.

The Waterfall View, shows a cascading visualization of the page load across time, and you can click on any individual request to bring up more specific detail about that request. For a developer, you can see how powerful this can be.

The Request Details section provides details of every request, and if you click on the number of any particular one, you will be taken to the corresponding expanded entry in the Request Headers section.

The Web Vitals tab displays the results of the Core Web Vitals, a crucial bunch of metrics, developed by Google. You can read more about them here.

The Optimisation tab displays the old letter based score that WebPagetest used to show on thePerformance Summary. Here, the most important metrics are given an individual score, and you can click on a score to jump to the details further down the page.

The Content tab breaks down how this site’s assets are comprised by content type, and dispayed both in requests and bytes.

The Domains tab simply shows you content breakdown by domain. Depending on how your site is set up, this may only show one domain or several. Here, we can see a small percentage of requests and content is coming from Google Analytics and Google Tag Manager.

We are getting into seriously nerdy technical territory here, but the Processing Breakdown shows us the various Processing Categories and Processing Events and the percentages of each for the page load.

At the bottom of the Results menu are four external links for further analysis. These are Image Analysis, Request Map, Data Cost, and Security Score.