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

Jan Hornung Updated on 21.10.2020
6 Min.
Compare websites with Webpagetest

Webpagetest.org is probably the best free tool to measure your page load time. Because WebPagetest is much more powerful than the direct competition. And that's mainly thanks to two functions: The possibility to compare websites and the long-term comparison.

This article is part of a series to measure and evaluate the loading time of your web pages. In the previous articles we have shown:

Today I will show you two functions 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 key metrics - Speed Index, DOM Elements and cost

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

Sample result of a webpage test, which shows the important extended parameters
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 module. The fewer of these blocks your browser needs to load, the leaner and faster your site browser will be, but the number of DOM elements is only an indication of the loading time of the site . The number of DOM elements can be reduced considerably by changing the plugins, but especially the theme.

Extract from the source code of a RAIDBOXES  blog post
Each 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 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 yours site always has the best overview of the HTTP requests that are loaded.

In practice, however, the actual number of HTTP requests is not that important. At least not if your site SSL is encrypted and is hosted on a server with HTTP/2 is running. Because then several requests can be executed and loaded simultaneously.

Speed index: This index is calculated by Webpagetest and is an indicator of the perceived page load time. The value describes a millisecond value - so low values are better than high ones - that indicates how fast and efficient the visible content of your site pages is loaded. In principle, Webpagetest determines the user experience via screenshots of your site website and measures this with a time value. If you are interested: Webpagetest also has a Equation formulated.

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

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 yours site has a significantly lower Speed Index than that of the competition, then you can assume that yours site offers visitors a better surfing experience.

Cost: This value is rather a nice-to-have. It indicates how expensive yours site is when it's loaded over mobile networks. The data is from whatdoesmysitecost.com and form an average value for all country tariffs listed here. With this function you can see the costs for mobile charging of yourssite . But I think this value is only in very few cases really relevant for optimization. Please correct me if I am wrong here.

The most important function of Webpagetest: Compare several websites directly

If you measure the loading time of yourssite , there are usually two reasons: Either you have made a change and want to know what effect it has on the loading time or you want to compare yours site with others.

Of course you need a comparative value for such a statement. And that is exactly what the function "visual comparison" created. Because with it you can directly compare the loading time and 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 Webpagetest standard analysis.

With this function you can, for example:

  • compare your own sites performance with that of your competitors
  • 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 themsites , insert the URLs and run the test with the previously set parameters.

For test purposes we compare two of our product pages with each otherThe result allows you to compare them sites using several metrics. The most descriptive one can be found at the beginning of the results document: The Filmstrip View. Here you can see when the visitor perceives yours site as loaded (the relevant parameter is called Visually Complete).

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

Result, if you compare two websites on Webpagetest
The most vivid metrics are presented right at the beginning: The filmstrip view. You can still configure it using the settings at the bottom right. You can toggle the waterfall diagrams using the slider on the left above the diagrams.

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

With these metrics, you can see at a glance which of the tested sites ones load faster, are leaner and offer a better experience to the visitor.

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

When you sign in to Webpagetest with your Google Account, each test is recorded. This gives you the opportunity to view and compare all tests from the past year.

Long-term comparisons in Webpagetest to compare several versions of a website
Our Webpagetest history of the last seven days. Whenever you log in with your Google Account, your tests are saved and can be viewed later.

This overview is extremely practical because of two functions: You can access 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 your sites development.

Conclusion: Webpagetest is much more powerful than other free tools

The direct comparison of several sites is certainly the most powerful function of Webpagetest. Because it allows you to see how you site compare with your competitors, role models or industry benchmarks. The results you get are - for webpagetest conditions - 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 page loading time and the user experience.

With these two functions you are able to capture all relevant changes to yours sites and, more importantly, analyze them.

You know another useful feature of Webpagetest that we have forgotten? Then we are looking forward to your comment!

RAIDBOXER of the first hour and Head of Support. At Bar- and WordCamps he likes to talk about PageSpeed and website performance. The best way to bribe him is with an espresso - or Bavarian pretzel.

Related articles

Comments on this article

Write a comment

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