Site speed – How to track speed with WebPageTest

As we saw in the checklist for fixing site speed, all companies that use a digital platform need to have tracking of site speed in place. When we’re starting out, we need to know how much revenue we’re losing due to bad speed (which we can find out with the Impact Calculator from Google), and we need to be able to benchmark and follow our progress.

There are two free and open sourced tools for tracking speed: WebPageTest and Lighthouse. In this post, I’ll go through how I use WebPageTest.

How to set up the test

  1. Enter your url.
  2. Select the test location closest to the url’s market. (For instance, .com tested in US, .uk tested in UK, and so on.)
  3. Click Advanced Settings.
  4. Choose connection. I recommend 3G Fast if you are selling in Northern Europe, Asia or US. For the southern part of Europe, you might need 3G. We’ll go through why 3G Fast is good for benchmarking, but for now – just know that 4G coverage is not what we sometimes expect it to be.
  5. Click the tab Chrome, under Advanced Settings.
  6. Tic the box “Emulate Mobile Browser”, and leave the Motorola alternative, as you don’t want to test on the most high-end devices.

Since this is an open sourced tool, you’ll sometimes end up in a line of tests that you have to wait for. If you don’t have the patience, test changing your test location and see if it goes faster somewhere else.

Analyzing the result

The result will look like this:

If you want to set up reporting for the company, I would propose showing load time (when the page is visually complete) and Speed Index (how long it takes to see the content above the fold – that is, how smart the code is optimized).

These are the targets you want the page to hit:

 Load time: <5 s (measured on 3G Fast)

 Speed Index: <3 s (measured on 3G Fast)

If you want the creative team to work with a performance budget then they should be checking “Bytes In” and making sure that they are below 1Mb for each page (or at least 1.5Mb). If they want to track unpublished pages, they can use Chrome Dev Tools or Lighthouse (which we’ll go through later).

Do this test regularly, for instance by setting up Andy Davies’ API. And track all your important pages.

So, my test showed that I’m slightly above the speed targets – darn it! Then it’s just to get to work with seeing what I can optimize.

Producing a video

Do you want to see how your site compares to your competitors? Or how your site has evolved? Create a video!

  1. Sign in in the upper right corner. This way, your tests will be saved in the tab “Test History” for the future.
  2. Run the tests of the companies you want to compare. You can do this in several tabs/windows, as all will be saved under your Test History.
  3. When all are done, click the tab Test History.
  4. Tic the boxes of the tests you want to compare and click Compare. By altering View you can reach older tests.
  5. Click the box Create video. Done!

The result can look like the below video, showing how the tui.se site loaded before they started their speed optimization and the result afterwards. And now this great team has managed to get down to 3 s in load time!

Did your site reach the speed targets?

You Might Also Like

Tracking – How great is your mobile site?

Tracking – How great is your mobile site?

Read More
Site speed – Checklist for setting up the organisation

Site speed – Checklist for setting up the organisation

Read More

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.