Webpagetest is the best thing in web performance

Lighthouse is great for showing someone non-technical if the website is doing good or not. It’s very satisfying and easy to understand: 4x100 on your websites Lighthouse report means it is fast. Especially on the mobile variant.

Having said that, I use Lighthouse only as a quick look, to share it with someone non-technical. In every other situation I use Webpagetest.org.

Why?

Webpagetest allows me to test a lot more than synthetic testing, and gives much more detail about the real behavior of website.

In this article I will present how I use some of those features and why they are good to know as frontend developer.

Test from different locations

This feature is great to test speed of hosting and CDNs in various locations. If your visitors are mostly from Australia, then testing from Australia makes more sense than Frankfurt, Germany.

When I was choosing hosting for this webiste I tested all candidates [1] from three different locations (USA, Australia, UK) and made informed decision based on global performance, because I expect the whole wide world to read my articles.

Blocking asset URLs and domains

This is my absolute favorite feature. It is my guilty pleasure to see website’s waterfall with a bunch of trackers, ad services, google fonts, tag managers, twitter bloat, and other things that no visitor ever wanted, but had to download (and parse) anyway. My uBlock origin blocks it all, but Webpagetest shows how bad it is for the website to include all those scripts. This feature allows me to repeat the test, but without all those resources. Difference between before and after is a very good starting point in discussion about limiting 3rd party services loaded on a site.

Take a look at CNN.com test to see how bad it can get when it comes to third party bloat.
Warning: Content of this test is meant only for adults with strong nerves.

How to block a request or domain

Blocking domain

List of blocked domains should appear on the left side. After you blocked all the pesky trackers, click “Run with Blocked” and wait for the results. In case of CNN’s page, wait a long time for the results, thats why there is no video showing the experiment.

You probably will be greeted with a completely different picture than before. This is a powerful tool in visualizing potential gains in removing real security risks.

“Your website on tag managers”

I started to do those experiments after I saw this inspirational image [2].

Your website on tag managers

PS. Tag managers are the root of all [3] evil.

Throttle CPU, Packet Loss

Developers usually have pretty fast computers. It is especially true in developed countries where Apple products are popular. Just like it is important to test your website from geolocation that your visitors come from, it is also important to test on more or less similar devices. It would be ideal to use real devices, but the next best thing is to throttle CPU to simulate that low-end device that your visitors might have.

Example

I use Macbook Pro 14 with Apple M1 chip – it’s not a an average device, it’s high-end. Additionally, I have very stable 100Mbps connection, which also might be much faster than my visitors average connection. If I dont make an effort to put myself into more realistic position, my website will be tuned for my environment, but it might be painfully slow on a 2016 $150 mobile phone with 3G connection. I decided to make as much as I can to eliminate the risk of someone not being able to read my content because of lack of resources.

I encourage you to do too, because if your website is usable on spotty (packet loss) connection and slow device (ie. Moto G4), it will be fine for everybody. Some say that performance is part of accessibility, when it comes to low-end devices or challenging connection conditions. I tend to agree with them.

Packet loss

Note
I've once read that people in some countries are used to loading times measured in minutes. The article mentioned that they made website couple times lighter, but loading times increased, and they didn't know why. It turned out, that after optimization, people from those countries could access the page, which was impossible before. Loaded page in 2 minutes is still better than not loaded page at all, if you have to get to that page. If you test your site with "Packet loss" at 15-20% you will see a scary, but very real scenario. I dare you to run that test on CNN :-)

Disable graphic formats (WebP, Avif, Jpeg XL)

Some websites use picture tag to provide responsive images and/or fallback to legacy image formats for older browsers.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg">
</picture>

The easiest way of testing it, IMO, is to go to Webpagetest, turn off specific format and see if the next in line format has been served. This feature also can be used to test CDN ability to serve proper format dynamically, because some of them offer that.

Compare two tests

When you perform tests as a logged-in user, they are saved saved in your test history. Not only you have an archive that you can refer to in the future, but you can also compare two tests.

It is a good practice to measure control pages on a website you are working once a while. In the future you will have something to compare current state to, and will know if some regressions happened. Example: On one project I worked on we were making good progress, but at some point someone threw a very expensive to run js analytics tool, and it made the site worse than before. It is worth monitoring that, because otherwise everybody would miss the reason, and maybe even get demotivated.

Compare results of two tests

See waterfall of requests

I think the most recognizable feature of Webpagetest is the waterfall. You probably already saw it, but its so good I’m going to mention it anyway. It is a gold mine of useful data. It allows you to inspect every request, its headers, timings. It also shows which asset is blocking and which is not.

Waterfall request inspection

Closing words

I just scratched the surface with this post. Take a look at Advanced Configuration tab, click links to read more and see for yourself whats possible. Webpagetest is a very powerful tool and I encourage you to play with it. There is also a good documentation, take a look at it for more intricate options.

Footnotes

  1. Netlify, Cloudflare Pages, Vercel, Render, Surge ↩︎

  2. https://twitter.com/csswizardry/status/915886339391918083 ↩︎

  3. or at least most ↩︎