Webpagetest: Tame the test monster and analyze your website performance

Jan Hornung Last updated 03.12.2020
14 Min.
Webpagetest.org
Last updated 03.12.2020

Webpagetest.org is probably the best and most comprehensive free tool for measuring your page load time. Unfortunately, it provides a lot of very complex data. Today I'll show you what you have to set, how you can bring order into the data jumble and which parameters you need for a professional analysis. Because only if you know how your customer projects and your own sites load, you can optimize them.

Your own site should be secure. And fast. Of course, because a lot depends on the loading time: the conversion rate, the feeling of security of your visitors and the Google ranking of your offer. However, many WordPress users do not even get as far as being able to determine the loading time of their own site correctly.

For example, some site operators don't even know which tools they can use to analyze their site properly. Or they don't know which settings they have to make in order to achieve really good results. So that you don't make the same mistakes, I'll show you today how you can get a quick and meaningful overview of your site with the (in our opinion) best free measurement tool ever. So you know exactly how fast your site loads and if and where you need to optimize.

In order to understand exactly how the individual analysis steps work, I advise you to look at the data sets linked at the important points or to analyse your own site in parallel. Because: Bringing order into the jumble of data is not that easy. But as a reward for the effort you will receive some of the best data you have ever collected yourself about your site . And especially if you work for clients or earn money with your WP-WordPress -projects, the effort is worth it.

Webpagetest is the best tool we know of

Admittedly: We praise webpagetest.org effusively in this article. Perhaps too effusively, but not without reason. Because Webpagetest is the only tool we know of that allows you to reliably determine the absolute and perceived load time of your site . And that completely free of charge. No payment barrier, no subscription model, just valuable data and an API that allows you to automate the whole thing: that's how it should be.

For the sake of completeness, it should be said that you also get nice measurement results with Pingdom and GTmetrix. But not as nice as with Webpagetest. Of course, this doesn't mean that you can't and shouldn't validate your results with several tests in different tools. And it also doesn't mean that you shouldn't measure with Pingdom or GTmetrix. Only I can recommend you to have a look at Webpagetest at least once.

It's almost become a mantra with us: To measure the load time of your site , tools like Google PageSpeed Insights are not enough. Because these only determine the performance potential of your site . This data is of course still valuable - from a performance and SEO point of view - but it simply does not allow you to draw any conclusions about what actually happens when a visitor calls up your site .

But that's exactly what you want to know. And that's exactly what you need to know in order to determine whether an optimization measure is effective.

Unfortunately, Webpagetest delivers not only not very pretty data, but also very extensive test results. Therefore, I will show you today how to use Webpagetest and how to interpret the results.

In the next section, I'll briefly go into some background on the tool. If you're not interested, just skip this part.

Webpagetest: Google's big brother PageSpeed Insights

Webpagetest was originally an AOL project and only intended for internal use. In 2008, however, the program then became open source software and is now mainly maintained and further developed by Google. The entire documentation of Webpagetest can be found on GitHub and can also be downloaded and used locally.

While PageSpeed Insights shows you where the optimization potential of your site lies, Webpagetest can do much more. It shows you not only how you can improve your site , but also directly what effects your optimization measures have on the loading time of your site .

Unlike Pingdom and GTmetrix, there is no company behind Webpagetest that wants to sell a paid service (ok, except Google, but at least the service is not sold directly). Rather, you could say that Webpagetest is part of Google's plan to make the web faster overall. However you want to evaluate Google's efforts in this context.

4 steps to really meaningful load time data

Yes, Webpagetest is more complex than other tools. But don't let that scare you away! In this case, complexity is good. Because it means you get great data about your website. And even as a first-time user, you can get the relevant info pretty quickly.

And that's with the following four steps:

Step 1: Set test parameters

Step 2: Get an overview

Step Three: Detailed analysis

Step four: Analysis of the perceived loading time

Step 1: Set test parameters

Webpagetest offers very fine settings for testing your website. Four of these settings are particularly important to get good measurement results:

  • the server to be tested with (1)
  • the browser to be used for testing (2)
  • the advanced test settings, which I will discuss in more detail in a moment (3)
Home page of Webpagetest
This is what the start page of Webpagetest looks like. It is a bit more complex than the one from Pingdom or GTmetrix.

The server that you select for the test simulates a user who calls up site from there. If you select the default server in the USA, then the test result will be output for a page call from Texas. In most cases, however, this is not necessarily what you want. Therefore, this setting is very important. Because it can massively distort the overall result and must be set accordingly, depending on the use case.

The two most common use cases are:

  1. Determination of the loading time for a user from your target group
  2. Load time comparison after an optimization measure

If you want to know how your visitors perceive the loading time of site , then the server location must correspond as closely as possible to the location of a typical user. For a blog with mainly German readers, this means that you should choose a server in Germany, for example in Frankfurt.

If you want to know what an optimization measure took, then it doesn't matter in principle which server location you use. The only important thing is: You must use the same server location for the test before and after the optimization. Otherwise you can't compare the measurement data properly. Of course, I recommend a German test server here as well. This simply delivers the most realistic results.

Webpagetest: Map for the selection of the test server on Webpagetest.org
In addition to a list selection, you also have the option to select the test server via a map. You can also see an overview of all test servers here.

The browser used

Webpagetest offers many setting options to simulate certain transmission techniques and browsers. For example, you can define that the site should be loaded via a 3G connection and Firefox. For the beginning, however, it is sufficient to choose the browser that your target group uses most often.

You can find information about this in Google Analytics or Piwik, for example. For example, RAIDBOXES is mostly visited via Chrome.

Extract from the browsers used by visitors to raidboxes.io. These serve as a template for the settings in Webpagetest.
The most used browsers on raidboxes.io. So for an analysis in Webpagetest I would mainly test Chrome. Results for Firefox and Safari, in contrast, are of course also interesting.

Very important: The advanced settings determine how good your measurement data will be!

In addition to the two parameters that determine how the test is performed - i.e. the server location and the browser used - Webpagetest also offers the option of setting what the test should output at the end. In the advanced settings you can, for example, define that only certain values should be output, or that the measurement should stop automatically after a certain time. And here are two settings that are especially important to get reasonably comprehensive and reliable data: The "Number of Tests to Run" and the "Repeat View".

In principle, you should always measure more than once when measuring the load time. Otherwise you run the risk of measuring outliers and possibly looking for a problem that doesn't exist. And believe me: We have already experienced this a few times. I recommend at least three consecutive tests.

You should also remember to always measure the cached version of your site . You can do this by using the Repeat View option.

Webpagetest advanced settings
The advanced settings of Webpagetest are where the real magic of the tool lies. Only if you select at least 3 tests here and also include the Repeat View, the data you get will be really interesting.

Once you have entered your URL - e.g. https://raidboxes.de - and set the test parameters (i.e. the German server, the browser, the minimum of 3 repetitions and the repeat view), you can start the test. Depending on how many other users are currently testing their sites , the analysis may take a few minutes.

It is important to note that Webpagetest only tests site , which is accessible under the URL, not your entire web presence. That means you should test your homepage, all landing pages and, if relevant, your product overview individually.

In this guide I work with the data from the analysis of our home page, raidboxes.de. That means you can reproduce everything explained here one to one in webpagetest.org. Just click here and you will get the results of the analysis.

Step 2: Get an overview

The first thing you'll see is the page load time overview. This is divided into three areas:

  • the test parameters and the results of the potential analyses (1)
  • the breakdown of the main characteristics (2 )
  • the overview of the page structure (3)
The overview results of the webpage test
Overview of the first results of webpagetest.org

(1) The more green, the better

In the first area, the test parameters are listed again for checking. If you discover an error here, simply repeat the test. You will also see the results of the potential analysis. Webpagetest also displays the results of Google PageSpeed Insights . If you are satisfied with the spartan display of Webpagetest, you can do without PageSpeed Insights .

Webpagetest uses a school grade and color code. A is the best, F the worst score. Green indicates a good degree of optimization, orange indicates usable optimization potential, and red indicates urgent need for action.

(2) The sooner the better

In the second section of the results, you will be presented with all relevant key data of your page load time for the cached and uncached variant of your site . It is important to note here: In the overview, Webpagetest only displays the values for one of the three tests. The overview shows you which test this is directly next to the First View and Repeat View labels. Run 2, for example, is the result for the second test run.

Explanation of the individual results of Webpagetest
Unfortunately, this overview is only available for individual measurement results, i.e. individual test runs. For the really valuable values, you have to go one level deeper. I will explain how to do this in a moment.

Five values are particularly important here now:

  • Load Time: The time that your site needs until the user has the impression that the site is fully loaded. The load time therefore corresponds to the perceived total loading time of your site .
  • First byte: Time until the first data byte is transmitted between client and web server. This value should, if possible, be below 200 milliseconds and is an important indication of the performance of your hosting.
  • Start Render: This value describes the time that a site loads until the visitor is shown content for the first time. Until this time, the site remains completely white for the user. Of course, this value should also be as low as possible. Together with the Load Time (or Document Complete), this value forms the evaluation benchmark for the perceived website speed. Start Render marks the beginning of the visible loading of your site , Document Complete the end.
  • Document Complete: This value is identical to Load Time.
  • Fully Loaded: This value shows when the site is completely loaded with all scripts and elements. It describes the total technical loading time of site . This is usually irrelevant for the visitor. What is really decisive is the perceived loading time.

The following applies to all these values: the smaller, the better. As a guideline, you can remember:

  • the time to first byte should be less than 200 milliseconds
  • Start render should not be greater than 2.5 seconds
  • Document Complete should not be greater than five seconds

Of course, these values are only rules of thumb. It always depends on your site : A shop page with 50 products - that is, 50 or more images and descriptive texts - naturally loads slower than an imprint page that consists only of text.

Therefore I can only advise: Also test the sites of your direct competitors and your role models. In this way, you will receive comparative values within the industry.

Calculating mean values - Now it's time for the nitty-gritty

Unfortunately, the overview explained above only shows the results of a single measurement. And you remember: single, isolated values can lead you astray. That is why you have carried out at least three consecutive measurements for the test of your site . And the averages of these three measurements are the best approximations you can get for your page load time.

And don't worry: creating the averages only takes the push of a button:

Plot web page test results
By clicking on the plot option Webpagetest calculates the mean values for your measurement results.

Now you get an initially confusing amount of data from so-called plots. And these are exactly the results you want to have. In principle, this new overview is the same for all values. So once you understand how to read them, they are anything but confusing.

Webpage test Plot view
These plots are an excellent illustration of why you should always take multiple measurements: Measurement point 3 is almost one second worse than measurement point 1, so averaging is essential for a professional performance analysis.

As you can see, all three measured values (1-3) are plotted here in a diagram (remarkable is especially the difference between measuring point 1 and measuring point 3). Above the plot is the value to which the diagram refers (4). In this case the perceived load time(Document Complete or Load Time). The number in the Mean column now describes the average value of the load time across all three measurements (5). This average is the most valuable info you can get about your site .

By the way: By ticking the Repeat box you can also get the values for the loading time with and without caching. And if you want to find the results for the other values: Just search for "First Byte" and "Start Render" via your browser search (CTRL+F for PCs and cmd+f for Macs).

Interim conclusion: A lot of work for particularly valuable data

Okay, that was a lot of input. And it was a lot of steps. Especially compared to simple testing methods. But it's worth the effort, because you saw it in the numbers on the graphs: Two tests with the same settings can sometimes be a whole second apart. Under certain circumstances, chance decides whether you invest time and money in further optimizing your sites or not. And especially if you earn your money with WordPress , be it with your own shop, a web design business or your own agency, you should have the best data basis for such a decision.

In fact, we are not at the end yet. Because now you know the most important performance parameters of your site , so you know how fast your site loads and whether there is still potential for optimization, but you do not know exactly where your site can be improved. And that's exactly what the detailed analysis is for.

Step 3: Detailed analysis

The overview already tells you a lot about your site . You can see whether there is room for improvement in certain areas, how fast your site actually loads and whether it could load a little faster. However, you will not yet be able to identify the causes of the problems. But you can find them in the detailed reports:

The waterfall diagrams list every single HTTP request that a browser makes to the web server. At first glance, these diagrams seem very complex and confusing. But if you know how, you can pull a lot of detail about your site from a waterfall diagram with just one look. Here we show you how to read waterfall diagrams correctly and how you can use them to further optimize your site .

Basically, a fast site has a short waterfall diagram with few, short requests. This means that the length of the diagram and the length of the bars in the individual lines are particularly relevant.

In the Performance Review you will find detailed information about how well the performance of your site is already optimized. This detailed review contains three elements:

  • the Optimization Checklist
  • the detailed breakdown of the performance test
  • the glossary

The glossary is the first thing you should look at when analyzing your site for the first time with webpagetest.org. All important terms of the Performance Review are explained here.

Excerpt from the glossary of Webpagetest.
Unfortunately in English, but Webpagetest actually explains every technical term in detail.

In the Optimization Checklist you will find the individual evaluation criteria that are applied to each of the HTTP requests. A green checkmark means that the requirement is met, a yellow triangle indicates a need for improvement, and a red cross means that the proposed optimization measure is missing.

An excerpt from Webpagetest's performance checklist.
With the Optimization Checklist you can see exactly which images of your site still have optimization potential, which requests should be further compressed and whether your caching is working properly.

Finally, you will find a description of the warnings and missing optimization measures in the details section. Webpagetest describes the still possible optimizations for each resource. For images, for example, it shows how much data volume can be saved.

You will have to spend some time with these detailed evaluations, but with their help you can get a detailed picture of your site and its optimization potential.

And because it's basically the same info that PageSpeed Insights spits out, you can of course just run a PageSpeed analysis in parallel. Because this test is a lot prettier and better prepared.

Step 4: Analysis of the perceived loading time

Unlike all other tests we know of, Webpagetest is the only one that shows the perceived load time of your site for free. Via the filmstripview you can watch a video of the page load. This way you can see exactly what your visitors see and can evaluate even better if and how your site should be optimized.

Webpagetest Find Filmstripview
You will find the filmstripview in the overview of your measurement results on the far right. Attention: This option is not always displayed. Why is not quite clear to me. However, repeating the test has so far always made the option accessible.

The perceived load time is probably the most important parameter of your page load time. It influences whether your visitors leave site prematurely, the conversion probability and the overall experience of your site . Especially for shops, the perceived web page speed is therefore an important benchmark. Of course, the perceived loading time should always be as low as possible.

In addition to the movie stripview, remember this:

Schematic representation of the page load time
The perceived total loading time should be as low as possible. At the same time, it is important that the distance between T0 and start render is as short as possible. Because then the user gets the impression very early that the site is completely loaded, even if it is far from being so.

The Filstrip View shows you exactly what your site looks like and which processes are running at any given time. If you look at the test with this data, you will see that nothing happens on site for more than three seconds. Then, however, in one fell swoop, site looks almost exactly like it did in its final state. The user gets the impression that the site is loaded within 3.5 seconds. Or rather, the visitor already has the feeling after 3.5 seconds that he can interact with the site .

So especially when prioritizing the visible page content, the Filmstrip View is a very valuable tool.

Conclusion: With these basics and a little practice you will get a very good overview of your site

Ok, after reading this article you should now be able to choose the right settings for a webpage test, know which metrics to interpret and how to prevent misinterpretations due to outliers. You also know where to find detailed information about your site and how to determine and display the perceived loading time of your site .

So you know the important basics to get a really comprehensive overview of your own site , the sites of your customers and any other web project. And you know where to get the information that allows you to fill the measurement results with life and draw meaningful conclusions for your site .

But why was this important again? Quite simply: Without a reasonable measurement of the actual state of your site , you can not properly assess how your site currently loads. And on the other hand, you lack information for the optimization of the loading time.

You have another tip for using Webpagetest? Perfect, then leave us a comment below!

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

Comments on this article

Post a comment

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