These two WebPagetest functions you did not know yet - but you should use them regularly

Jan Hornung Last updated 21.10.2020
6 Min.
Compare websites with Webpagetest is probably the best free tool to measure your page load time. Because WebPagetest is incomparably more powerful than the direct competition. And this is mainly thanks to two functions: The ability to compare websites and the long-term comparison.

This article is part of a series on measuring and evaluating the load time of your web pages. In the previous articles we have shown:

Today I'll show you two features of Webpagetest that you probably didn't know yet. Because the tool is especially suitable for performance comparisons and a continuous evaluation of your page load time.

So today I'm going to show you

Other important parameters - Speed Index, DOM Elements and Costs

In addition to the standard values - such as Start Render, Document Complete, etc. - Webpagetest also provides other useful key data that allow you to assess the efficiency of your site . These values are important so that you can interpret the results of the tool correctly.

Example result of a webpage test showing the important extended characteristic values
Example result of a webpage test. The speed index, the number of DOM elements and the number of requests are three important indicators for the overall performance of your site .

DOM Elements: A DOM element is, roughly speaking, an HTML building block. The fewer of these elements your browser has to load, the leaner and faster your site is. However, the number of DOM elements is only an indication of the loading time of site . By making changes to Plugins, but especially to Theme, the number of DOM elements can be noticeably reduced.

Extract from the source code of a RAIDBOXES  blog post
Every element of the HTML-body that is enclosed in angle brackets is a DOM element.

Requests: This value describes the number of individual HTTP requests that your browser must make to the web server. Individual elements such as CSS files, JavaScript files or images are requested via an HTTP request. Theoretically, the fewer requests, the better. By the way, the waterfall diagram of your site always gives you the best overview of the HTTP requests that are loaded.

In practice, however, the specific number of HTTP requests does not play such a big role. At least not if your site is SSL-encrypted and runs on a server with HTTP/2. Because then several requests can be executed and loaded at the same time.

Speed Index: This index is calculated by Webpagetest and is an indicator of perceived page load time. The value describes a millisecond value - low values are better than high ones - that indicates how quickly and efficiently the visible content of your site is loaded. Basically, Webpagetest determines the user experience via screenshots of your site and measures it with a time value. In case you are interested: Webpagetest has also formulated an equation.

Calculation basis of the Speed Index
The Speed Index of Webpagetest is displayed and calculated as an area. The faster the content of your site is loaded, the smaller the area and thus the Speed Index. If you are interested in the details: Webpagetest lists all information about the calculation of the Speed Index here.

The Speed Index is best suited for comparisons. If an optimization measure results in a significant reduction of the index, it tends to be successful and site is perceived as faster. If your site has a significantly smaller Speed Index than the competition, then you can assume that your site offers visitors a better browsing experience.

Cost: This value is rather a nice-to-have. It indicates how expensive your site is when it is loaded via mobile networks. The data comes from and is an average value for all country tariffs listed here. Using this feature, you can take a look at the cost of mobile charging your site once. I think this value is not really relevant for optimization in most cases. Please correct me if I am wrong here.

The most important function of Webpagetest: Compare multiple websites directly

If you measure the loading time of your site , then this usually has two reasons: Either you have made a change and want to know what influence it has on the loading time or you want to compare your site with others.

Of course, you need a comparison value for such a statement. And that's exactly why the "Visual Comparison" function was created. Because with it you can directly compare the loading time and the loading behavior of several URLs.

The Visual Comparison function allows you to compare websites directly with each other.
You will find the comparison function directly to the right of the standard analysis of Webpagetest.

With this function you can for example:

  • compare your own sites with that of the competition
  • check what the hoster change has brought
  • test two or more subpages against each other
  • check how fast subpages load compared to the start page

For the direct comparison you only have to name the sites , insert the URLs and run the test with the previously set parameters.

For testing purposes, we compare two of our product pages with each other. The result allows you to compare the sites on the basis of several metrics. The most descriptive one can be found right at the beginning of the result document: the filmstrip view. Here you can see when the visitor perceives your site as completely loaded (the relevant metric is called Visually Complete).

The reference value can also be changed so that other characteristic values, such as Fully Loaded and Document Complete, can also be displayed.

Result, if you compare two websites at Webpagetest
The most descriptive metric is presented right at the beginning: The Filmstrip View. You can still configure this via the settings at the bottom right. The waterfall diagrams can be switched back and forth via the slider on the left above the diagrams.

Below you will find four bar charts that show you how the tested sites perform in terms of perceived load time, the most important load time points, the number of HTTP requests and the size of the site .

With these metrics, you can see at a glance which of the tested sites loads faster, is more streamlined, and provides a better experience for the visitor.

For Google users Webpagetest also offers the possibility of long-term comparisons

If you log in to Webpagetest with your Google account, then the individual tests are recorded. This gives you the opportunity to view all the tests of the past year and compare them with each other.

Long-term comparisons in Webpagetest to compare several versions of a website
Our webpage test history for the past seven days. Whenever you log in with your Google account, your tests are saved and can be viewed afterwards.

This overview is extremely practical because of two functions: You can call up the historical test data by clicking on the URL. That means you can see the complete results of all tests of the past year.

And you can mark individual tests and compare them with each other to get a quick overview of the development of your sites .

Conclusion: Webpagetest is much more powerful than other free tools

The direct comparison of several sites is certainly the most powerful function of Webpagetest. It allows you to view your site in relation to the competition, role models or industry benchmarks. The results you receive are - by Webpagetest standards - also well prepared and easy to understand.

The time series analysis also allows you to get a comprehensive picture of the development of your page load time. So you can see exactly which optimization measures or changes have affected your site , their loading time and the user experience.

With these two functions you are able to record all relevant changes of your sites and, what is even more important, to analyze them.

You know another useful function of Webpagetest that we forgot? Then we look forward to your comment!

RAIDBOXER from the very start and our Head of Support. He loves talking about PageSpeed and website performance at BarCamps and WordCamps. The best way to bribe him is with an espresso – or a Bavarian pretzel.

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.