Skip to content

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. For more information about measuring website speed, including more ways to use WebPageTest, check out my book Speed Metrics Guide.

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

WebPageTest Home Screen

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.

WebPageTest Advanced Configuration

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 – Start Testing

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

WebPageTest – 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.

Details Report

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.

WebPageTest – Details Report – Waterfall View

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.

Waterfall View – Request Details

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.

WebPageTest Web Vitals Report

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.

Web Vitals Report – LCP details

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.

WebPageTest – Lighthouse Report

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.

WebPageTest Domain Breakdown Report

Content Breakdown Report

What file types take the longest to load? Those are the files you’ll need to optimize to improve your website’s speed. To answer this question, you can use WebPageTest’s Content Breakdown report. Select Content from the View menu. This report provides two pie charts, showing the total number of requests by file type and the total bytes loaded for each file type. In this example, images consume 55% of the requested files but only 42.1% of the requested bytes. JavaScript files consume 25% of the requested files but consume 50.9% of the requested bytes. This helps you determine what content types to focus on to improve your website’s speed.

WebPageTest Content Breakdown Report

Image Analysis

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.

Cloudinary – Website Image Analysis Tool

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.

Cloudinary – Analysis of specific image assets on the page

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.

WebPageTest Opportunities & Experiments

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.

Experiments in WebPageTest

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.

Experiment Results

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 in Bulk

Final Thoughts

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.

You may also like

What is Core Web Vitals?

What are Google’s Core Web Vitals metrics? How can these affect your website’s performance? How do you optimize your website?

Do Redirects Impact Your Website’s Speed?

Yes, redirects do add to a website’s speed. There are two ways redirects can affect speed: by adding to the server overhead or by delaying the load of the final destination page. Discover the data-driven conclusion.

5 Ways to Decrease Website Load Time

How do you make your website load faster? Learn about the top five ways to improve your website speed.