Website Performance Testing with sitespeed.io

There are plenty of ways to test website performance. Pagespeed Insights, Lighthouse, WebPageTest, and more. They all work fine to get a simple score. I wanted to test small adjustments to a website and see their impact on performanc, like:

• Does it make sense to inline this CSS
• Should I preload my fonts
• What’s the “impact” of adding this piece of code

Therefore I wanted an easy way to run multiple tests, get their summed results and compare them. They also needed to run on my localhost, so I don’t have to deploy each time.

The easiest way to test this (for me) is sitespeed.io, since it’s a readymade docker image, that you can easily run in your terminal.

Disclaimer: Absolute values don’t mean much. They can reveal tendencies however.

There were enough small hurdles for me to write this, so here are the steps:

How to run sitespeed.io on your vite / astro project

1. Build your page.
2. Start your preview with __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=host.docker.internal pnpm astro preview
3. Run docker run --shm-size 2g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io http://host.docker.internal:4321

Explanations:

The default config for sitespeed.io is to run the tests 3 times. You get an overview compared to pagespeed insights in a rendered HTML. There are many more options, if you want to. __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=host.docker.internal is required, so docker can access your localhost. The config option is not yet exposed in the astro vite config, unfortunately, but you might have success in a “vanilla” vite project. http://host.docker.internal is the localhost for docker on MacOS and Windows. On linux, you have to use something else.