Free guide to web performance testing

July 16, 2023 - 3 minutes read - 547 words

Update Sept 2024: This article is slightly out of date. FID is no longer a Core Web Vital, and I would give slightly different advice in September of 2024 than last year. Will update more!

This is how I test websites for performance with free or freemium tools.

I have tried a few web performance tools and this how I do it when I really want to refine and investigate a deployment or the current state of a website. I also do this method when I want to do it for free on an individual basis: a lot of this stuff is automated by paid tools for you.

Ideally, going through the rigor of testing with more than one platform will ensure a higher degree of trust in the results produced by the tests.

For this exercise I usually open six tabs in chrome, one for each of the links below.

First, Identify the specific URL to test

Visit the URL you want to test in a Chrome browser, run a local lighthouse test and get results ( Mobile, Navigation, all 5 categories the first time: Performance, Accessibility, SEO, Best Practices, PWA. Feel free to just do performance if that is all you are looking at on repeat visits.) https://developer.chrome.com/docs/lighthouse/overview/#devtools
Open PageSpeed Insights and enter the URL, await results https://pagespeed.web.dev/
Open Yellow Lab Tools and enter the URL (Mobile), await results https://yellowlab.tools/
Open DebugBear and enter the URL (Mobile), await results https://www.debugbear.com/test/website-speed
Open WebPageTest and enter the URL (Mobile, Motorola G (Gen 4), 4G connection, minimum of 3 test runs) https://www.webpagetest.org/
Open Speedcurve, do a burst of synthetic tests https://www.speedcurve.com/

Have some fun relaxing while the tests run.

Start to look at the results. Consider a few questions:

Does the URL get CrUX data i.e is it somewhat popular like you would expect? That data should be present and comparable in PageSpeed Insights, Debugbear, WebPageTest and SpeedCurve if it is popular enough to get real CrUX data.
Compare trends among the different results. Are they comparable? How does the local versus remote Lighthouse results compare i.e the difference between your local machine and a remote machine? The Yellow Lab Tool result is particularly good at diagnosing code quality issues, take a look at that individually.
Start to look at the key core web vitals. LCP will be measured in several different tests, I look at LCP particularly first. Per Google, on Core Web Vitals:

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

I think it is best to focus on the WebPageTest results for Core Web Vitals. It is currently the best guide generally.

There is SO much more to this than that, but by now if you look at several test results, some trends or things should appear consistent and you can dig deeper.

Seize the day! test web performance.

This is just the first installment in a series of posts about web performance.