Measuring Speed: WebPageTest
By Matthew Edgar · Last Updated: December 08, 2023
One of the most helpful tools to measure website speed is WebPageTest. WebPageTest offers a wide range of configuration options, allowing you to test speed across different devices, connection speeds, browsers, and countries. It also offers several other reports to help you diagnose why your website loads slowly. In this article, I’ll review a few of the most helpful reports you can access in WebPageTest to understand your website’s speed.
Note: There are free and paid versions of WebPageTest. I’ll focus on the options available in the free version in this article.
Configuring a Speed Test in WebPageTest
From the main screen, enter the URL of the page you want to test. Before starting the test, you can set configuration settings for the test. As pictured above, WebPageTest offers Simple and Advanced Configuration options. Simple configurations let you pick pre-defined browsers, connection speeds, and locations.
The simple configurations may or may not work for you. You want to pick devices and browsers that your visitors use and you want to test from a location near where your visitors are located. If the Simple Configuration options are not sufficient, click Advanced Configuration.
Under Advanced Configuration you can choose a Test Location or Browser. In the Browser dropdown, you can also choose a device type. On the Test Settings tab, you can set a connection speed. There are many other options available that I will not cover here but I highly recommend investigating those on your own.
Pro Tip: When choosing test locations, you can check WebPageTest’s queue to see how many other people are currently testing from that location. Tests will finish running faster if you use a location with fewer active tests.
Under Simple or Advanced Configuration, you can choose whether you want to run a repeat view. A repeat view is helpful if your visitors regularly return to the website to see if a return visit will be faster than the first.
You can also select whether you want to include a Lighthouse Audit. On Advanced Configuration, Lighthouse Audit is under the Chromium tab. A Lighthouse Audit gives you data from Google’s Lighthouse report.
Once the configurations are in place, click Start Test. For the remainder of this example, I’ll test my website’s home page from Salt Lake City, Utah using a Chrome browser on a desktop computer with a Cable connection speed.
WebPageTest Test Results
By default, WebPageTest will run three separate tests of the website’s speed and reports on the median result. You can adjust the number of runs under Advanced Configuration. By running multiple tests, the reports will not be negatively affected if something weird occurs during one of the tests, such as issues accessing a third-party script or a network hiccup. After all tests have finished running, you’ll be taken to the Performance Summary report.
Performance Summary Report
The Page Performance Metrics section shows key metrics. In this example test, the Time to First Byte (TTFB) is .422 seconds, the start render time is .7 seconds, and the Core Web Vitals metrics are in green, indicating all passed the test. If you aren’t familiar with these metrics, I have a separate article defining the key speed metrics.
Note that the metrics in this report are from the median of all tests run. By default, this selects the median run by Speed Index but you can toggle the dropdown next to the Page Performance Metrics header to select the median run by a different metric that is more meaningful for you.
In the View menu, select Details. This will take you to a report providing details about the median run. Along with seeing the Page Performance Metrics for this specific test, WebPageTest will also show a Waterfall View. This provides a visual representation of what files were loaded on the website.
The vertical bars indicate when specific key metrics occurred. For example, the solid green bar represents Start Render and the solid Blue Bar at the end marks the Document Complete time. You can see what files were loading when key metrics were triggered, including identifying which files may have delayed certain metrics.
The items with the longest bars are the items that take longer to load and are more likely to slow down your website. Everything is color-coded so that you can see which items are taking the longest to load. The color key is directly above the waterfall. Each bar also notes the milliseconds taken to load that specific resource.
When reviewing the waterfall, start by identifying the longest-loading items. In the example shown above, line 13 has the longest load time, taking 472 milliseconds to load. We can click on that row for more details about this file and to see the full URL for this resource. This can help you determine if you need this file or if there are ways to load this file more efficiently.
Web Vitals Report
WebPageTest also provides a detailed report about Google’s Core Web Vitals metrics. From the View menu, select Web Vitals. At the top of the page, WebPageTest reports on Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) as observed in the median run. TBT is not a Core Web Vitals metric but is a proxy metric for Interaction to Next Paint and First Input Delay.
Scrolling down, this report provides additional details about all three metrics. The following screenshot shows an example of details provided about LCP. The report highlights what the largest element is, provides a summary table that includes the element’s HTML, and provides a waterfall report showing when this element was loaded (highlighted in green). This is helpful to identify what the LCP element is and figure out how to make that element load faster. For example, on my website’s homepage, the LCP is the 12th item to load so LCP could be improved by loading that element sooner.
If you selected Lighthouse Audit on the test settings, you can also view Core Web Vitals metrics by choosing Lighthouse Report from the View menu. This also provides opportunities and diagnostic information.
Domains Breakdown Report
Third-party requests are a common reason websites load slowly. You can see what those third-party domains are by selecting Domains from the View menu. The Domains Breakdown report shows the total number of files requested for each domain and the total bytes for all files from each domain. In the case of my website, the majority of requests are from my website with only a few third-party domains in use. One of those third-party domains is Google Analytics and it consumes 37.7% of all bytes.
Content Breakdown Report
If images are causing slower speeds, you can evaluate images by selecting Image Analysis in the View menu. This will take you to a report from Cloudinary analyzing the images loaded on the page. At the top of the report, it provides an overall assessment of images and what opportunities exist to reduce the image size.
Scrolling down this report, there are details about specific images and how these images could be optimized. For example, my website uses WebP images but changing to AVIF could improve performance. Estimated file size savings are provided.
Opportunities & Experiments
Reporting on speed is helpful but what you really need to do is improve your website’s speed. WebPageTest helps you figure out how to make your website load faster. Choose Opportunities & Experiments in the View menu to view opportunities for improving your website’s speed. Opportunities are broken out into three categories: quickness, usability, and resiliency.
Along with providing recommendations, WebPageTests lets Pro users (those paying for an account) run the experiments in real time to calculate savings. These experiments do not require any code changes and can be a useful way to see if the change would be worth the development cost. For example, WebPageTest noted an opportunity to lazy load the images on my website’s homepage. Check the box that says Run This Experient and then click Re-Run Test with Experiments.
This will mimic the change in the website’s code and re-run the full-speed test. It does not actually change your website’s code. Once the test has loaded, WebPageTest will show the results of the comparison. In this case, almost all of the metrics improved, including a reduction in Largest Contentful Paint of 0.42 seconds. The Page Weight is heavier by 1KB but that is insignificant given the other gains. This would be a worthwhile change to make on my website.
WebPageTest Bulk Reporting
WebPageTest does offer an API so that Pro users can run speed tests in bulk. Andy Davies assembled this as a Google Sheets file that you can access on GitHub. You can select different test locations and connection speeds and measure different metrics using this. It outputs a report similar to this:
WebPageTest provides many other helpful reports about the website’s speed beyond those discussed here. I highly recommend spending time with each of these reports to understand your website’s speed and find ways to make your website load faster. If you’d like help using WebPageTest or measuring your website’s speed, please contact me.