Website performance

To run these tests all you need is a public website.

Measured performance

The bits that make up a page are critical because they determine the amount of energy required to produce that page. If we are thinking about sustainability as well as performance, this is important.

However, what is sent in response to a user's first request and subsequent requests varies; the page is likely to be cached in many places, including in the user's browser, reducing computational requirements (less energy), and what is sent over the network (again, less energy).

Measuring the overall performance of a website is more difficult still if it is made up of many pages of different weights. The home page may be quick to download but other pages, some of which users will link to directly, may contain images and video.

There are different strategies for loading the assets required for a page to run; the most appropriate will depend on the site, how the site will be used, and on what devices.

Real-world performance

In addition to theoretical, or lab, tests, Google records real-world website performance. These data are preferred when available though benchmarks remain useful for comparing versions of a site, and measuring the effect of changes on performance.

Perceived performance

Perceived performance is a user's subjective impression of how quickly a website is ready. Google finds ways to measure user perception by identifying key events: First Contentful Paint is when a user first sees something on the screen; Time to Interactive measures when they can interact with a page. Google currently uses six metrics.

A website can score relatively well on Google's performance tool Lighthouse through trickery. I used all sorts of techniques to push up the score for my website Learn the Planet. I now concentrate on absolute, measurable performance in bytes before addressing, if necessary, perceived performance.

Both Google (Chrome) and Mozilla (Firefox) cover this topic in detail.

There will also be times when best practice in terms of software engineering clashes with website performance.

How to test your site

Open Chrome DevTools

Select Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). For more ways to open DevTools, see Google's help.

Run Lighthouse

Look for Lighthouse in the top menu (it will likely be hidden at first but one or more of Element, Console, Network will be visible). For help on setting up and using Lighthouse, see Google's page

I run Lighthouse in an Incognito Window in Chrome, or a Private Window in Firefox. This will allow you to measure performance between websites, or different versions of the same website, without the results being affected by previous sessions or other tasks. The lighthouse scores are artificial, 'lab' benchmarks. If you have an active, live site you can measure performance against real user sessions.