Webpagetest: Tame the Test Monster & analyze your websites

Jan Hornung Last updated on 23.01.2020
14 Min.
Webpagetest.org
Last updated on 23.01.2020

WebPagetest 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 will show you what you need to adjust, how to bring order into the data chaos and which parameters you need for a professional analysis. Because only if you know how to load your customer projects and your ownsites , you can optimize them.

Surely it should be his ownsite . And fast. Of course, because a lot depends on the loading time: The conversion rate, the security perception of your visitors and the Google ranking of your offer. But many WordPress users do not even get to the point where they can determine the loading time of their own site correctly.

Some site operators, for example, do not know exactly which tools they can use to analyze theirs site correctly. Or they don't know which settings they have to make to get really good results. To avoid making the same mistakes, I'll show you today how you can get a quick and meaningful overview of yours site with the (in our opinion) best free measuring tool ever. So you know exactly how fast yours site loads and if and where you have to optimize.

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 analyze your own site in parallel. Because: bringing order into the data chaos is not so easy. But as a reward for the effort, you will receive some of the best data you have ever collected about yourssite . And especially if you work for a customer or earn money with your WPWordPress projects, the effort is worth it.

Webpagetest is the best tool we know

Granted: We praise webpagetest.org in this article exuberantly. Maybe too ebullient, but not without reason. Because Webpagetest is the only tool known to us that allows you to site reliably determine the absolute and perceived loading time of your website. And all this for free. No payment barrier, no subscription model, simply valuable data and a APIthat allows you to automate the whole thing: that's how it should be.

For the sake of completeness, let me say that you also Pingdom and GTmetrix get nice test results. But just not as nice as with Webpagetest. This does not mean, of course, that you cannot and should not back up your results with multiple tests in different tools. And it 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 has almost become a mantra with us: To measure the load time of yourssite , tools like Google PageSpeed Insights not out. 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 conclusions about what actually happens when a visitor calls yours site up.

That's what you want to know. And this is exactly what you need to know to determine whether an optimization measure is effective.

Unfortunately, Webpagetest delivers not only not very nicely prepared data but also very extensive test results. So today I will show you how to use Webpaget and how to interpret the results in a fundamental way.

In the next section I will briefly go into some background information about the tool. If you're not interested, skip just do the part.

Webpagetest: The big brother of Google PageSpeed Insights

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

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

In contrast to 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). In fact, one could say that webpagetest is part of Google's plan to make the web faster overall. Whatever one wants to evaluate the efforts of Google in this context.

In 4 steps to really meaningful loading time data

Yes, Webpagetest is more complex than other tools. Don't let that put you off! In this case complexity is good. Because that means you get great data from your website. And even as a first-time user you can get the relevant information quite quickly.

This is done with the following four steps:

Step one: Set test parameters

Step two: provide 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 for obtaining good measurement results:

  • the server to be tested with (1)
  • the browser to be tested with (2)
  • the advanced test settings, which I will go into more detail in a moment (3)
Homepage of Webpagetest
This is what the start page of Webpagetest looks like. It is therefore somewhat more complex than those of Pingdom or GTmetrix.

The server you choose for the test simulates a user who is calling site from there. If you choose the default server in the USA, the test result for a page call from Texas will be displayed. But in most cases 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 application.

The two most common applications 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 site perceive the loading time of the server, 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 needed, then in principle it does not matter which server location you use. The only important thing is that you have to use the same server location for the test before and after the optimization. Otherwise you will not be able to compare the measured data correctly. Of course I recommend a German test server for this purpose as well. This simply provides the most realistic results.

Webpagetest: Map for selecting the test server on Webpagetest.org
Besides a list selection you also have the possibility to select the test server via a map. You can also see all test servers at a glance.

The browser used

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

You can find information about this in Google Analytics or Piwik, for example.RAIDBOXES

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 the end!

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 define, for example, that only certain values should be output, or that the measurement should stop automatically after a certain time. And here there are two settings that are particularly important to obtain 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 charging time. Otherwise you run the risk of measuring outliers and may be looking for a problem that does not exist. And believe me, we've seen this happen several times before. I recommend at least three consecutive tests.

You should also remember to always measure the cached version of yourssite . You can do this with the Repeat View option.

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

Do you have your URL - for example hRAIDBOXES ttps:// .de - and set the test parameters (i.e. the German server, the browser, the minimum 3 repetitions and the Repeat View), you can start the test. Depending on how many other users are currently sites testing theirs, the analysis may take a few minutes.

Important: Webpagetest only tests the site one that can be reached under the URL, not your entire web presence. That means you should test your homepage, all landing pages and, if relevant, also your product overview individually.

In this guide I work with the data from the analysis of our homepage, raidboxes.io. That means you can recreate everything explained here one-to-one in webpagetest.org. Just click here and you will receive the results of the analysis as of the end of December 2016.

Step 2: Getting an overview

The first thing you 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 Webpagetest
Overview of the first results from webpagetest.org

(1) The more green, the better

In the first section, the test parameters are listed again for checking purposes. If you find an error here, just repeat the test. You will also see the result of the potential analysis. So Webpagetest also gives you the results from GooglePageSpeed Insights . If you can cope with the spartan presentation of Webpagetest, dualso can do PageSpeed Insights without.

Webpagetest uses a school grade and colour code. A is the best, F the worst rating. 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 get all relevant key data of your page load time for the cached and uncached variant of yourssite . The important thing is: In the overview, Webpagetest only displays the values for one of the three tests. The overview shows you which one this is, right 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'll explain how that works in a moment.

Five values are particularly important here:

  • Load Time: The time it site takes for the user to get the impression that it site is fully loaded. The Load Time 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 less than 200 milliseconds and is an important indicator of the performance of your hosting.
  • Start Render: This value describes the amount of time that a render site loads before content is displayed to the visitor for the first time. Until this time, the site content remains completely white for the user. This value should also be as low as possible. Together with the Load Time (or Document Complete), this value forms the evaluation standard for the perceived website speed. Start Render marks the beginning of the visible loading of your site documents, Document Complete the end.
  • Document Complete: This value is identical to Load Time.
  • Fully Loaded: This value indicates when the site fully loaded, with all scripts and elements. It describes the total technical loading time of the site . This is usually irrelevant for the visitor. What really counts 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 longer than 2.5 seconds
  • Document Complete should not be longer than five seconds

Of course these values are only rules of thumb. It always depends on yourssite : A shop page with 50 products - i.e. 50 or more pictures and description texts - loads naturally slower than an imprint page, which consists of text only.

So I can only guess: Test those sites of your direct competitors and role models. That way you will receive comparative values within the industry.

Calculating average values - Now it's time to get down to business

Unfortunately, the overview explained above only shows the results of a single measurement run. And you remember: Single, isolated values can lead you astray. Therefore you have carried out at least three consecutive measurements to test your site own. And the average values of these three measurements are the best approximate values you can get for your page load time.

And don't worry: Creating the average values only requires the press of a button:

Webpagetest plotting results
By clicking on the plot option, Webpagetest calculates the average 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. In principle, this new overview is the same for all values. So once you understand how to read them, they are anything but confusing.

Webpagetest Plot View
These plots illustrate perfectly why you should always take several measurements: Measuring point 3 is almost one second worse than measuring point 1, so averaging is essential for a professional performance analysis.

As you can see, all three measured values (1-3) are shown here in a diagram (the difference between measuring point 1 and measuring point 3 is particularly remarkable!) 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 over all three measurements (5). This mean value is the most valuable information you can get about yourssite .

By the way: By ticking the Box Repeat 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: Much 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 was worth the effort, because you could see it in the numbers on the diagrams: Two tests with the same settings can sometimes be a whole second apart. So it may be chance that decides whether you invest time and money in further optimizing your sites own or not. And especially if you earn money with WordPress your own shop, web design business or agency, you should have the best data basis for such a decision.

But in fact we are not yet at the end. Because now you know the most important performance parameters of yoursite , you know how fast your site loads and if there is still potential for optimization, but you don't know where exactly yours site can be improved. And this is exactly what the detailed analysis is for.

Step 3: Detailed analysis

You can see if there is room for improvement in certain areas, how fast yours site site actually loads and if it could load a little faster. However, you do not yet know the cause 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 appear very complex and confusing. But if you know how, you can get a lot of details about yours site with just one look from a waterfall diagram. Here we show you how to read waterfall diagrams correctly and how you can use them to site further optimize yours.

Basically, a fast site one 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 your performance is site already optimized. This detailed review contains three elements:

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

You should look at the glossary first when you analyze yours site for the first time with webpagetest.org. It explains all important terms of the Performance Review.

Extract 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 check mark means the requirement is fulfilled, a yellow triangle marks the need for improvement, a red cross the absence of the proposed optimization measure.

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

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

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

And because it's basically the same information that is spitting PageSpeed Insights out, you can of course just run a PageSpeed analysis in parallel. Because this test is much nicer and better prepared.

Step 4: Analysis of the perceived loading time

Unlike all other tests known to us, Webpagetest is the only one that shows the perceived loading time of your site free. You can watch a video of the page structure via the movie stripview. This way you can see exactly what your visitors see and can better evaluate if and how yours should be site optimized.

Webpagetest Find Filmstripview
You will find the film stripview in the overview of your measurement result on the far right. Note: This option is not always displayed. Why is it not entirely clear to me. However, repeating the test has so far always made the option accessible.

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

In addition to the movie stripview you should remember the following:

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

The Filstrip View shows you to the nearest tenth of a second what yours site looks like and which processes are running at any given time. If you look at the test with these datathen you realize that nothing happens for site more than three seconds. Then, site however, it looks almost the same as in the final state. So the user gets the impression that it is loaded site within 3.5 seconds. Or, alternatively, the visitor already has the feeling after 3.5 seconds that he can site interact with it.

Especially when prioritizing the visible page contents, 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 the article you should now be able to choose the right settings for a webpage test, know which metrics you have to interpret in which way and how to prevent misinterpretations due to outliers. You also know where to find detailed information about yours site and how to site determine and display the perceived loading time of yours.

So you know the important basics to get a really comprehensive overview of your ownsite , sites 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 yourssite .

But why was that important again? Very simple: Without a reasonable measurement of the actual state of yourssite , you cannot correctly rate how yours is loading at the site moment. And on the other hand you are missing information for the Optimization of the loading time.

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

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.

Comments on this article

Write a comment

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