Assessing the performance of your website

The grand promise of a statically generated site backed up with a headless content management system is performance. They’re meant to load fast and be secure, and are scalable to boot. The digital equivalent of a sports car and an SUV all rolled into one. But how can you verify those claims?

Google has a special tool called Lighthouse which does some way towards, ahem, illuminating the darkness. The official description for Lighthouse is that it “analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.”

So how does it work? Your page is given a score between 1–100 for each of the following criteria: Performance, Accessibility, Best Practices, Search Engine Optimization and Progressive Web Apps.

• Performance is about how quickly it takes your webpage to load. The funny thing here is that, according to the documentation, Lighthouse reports the performance metrics as they would be experienced by a typical mobile user on a 4G connection and a mid-tier $200 phone. Even if your site loads quickly on your desktop PC with a gigabit Ethernet connection, users in other environments will experience the site very differently.

• Accessibility is based on whether your site follows accessibility guidelines, .e.g., for visually-impaired users who use screen-readers or have difficulty with colors.

• Best Practices are things like using deprecated Libraries/APIs, asking for permission if you want the user’s location, and making sure that it carries a HTTPS certificate.

• Search Engine Optimisation checks whether the site is optimized for search engine crawlers. This is a huuuge discipline in itself, but things like having metadata, using headers correctly and alt tags for images are all contributing factors.

• PWA (Progressive Web Apps) is the most bleeding edge criteria of the five; according to this definition, PWAs are web apps developed using a number of specific technologies and standard patterns that allow them to take advantage of both web and native app features.

All that sounds great, right? Having a lighthouse score (endorsed by the mighty Google, no less) is a lot more credible than simply claiming your site is amazing. But how do you get one?

How to get a Lighthouse score

The simplest and most straightforward way to assess your site is to install the official plugin for Google Chrome. However, the assessment will only run on live sites, and won’t check local sites running on your machine.

For understandable reasons, you might want to assess your lighthouse score before you go live, at the preview stage. If the score is very low and this wasn’t anticipated, for example, you’ll be troubleshooting long after you thought the project was done and dusted.

But you have options! Two of my recent website projects — here and here — have lighthouse plugins offered by their respective hosting providers, Netlify and Gatsby Cloud.

The option by Netlify is pretty decent, and has a nice tutorial on their blog to get it activated. It’s very easy to install! What I like about this feature is that it offers up the Lighthouse score alongside your deployment log as a neat visual.

As you can see below, the score for this site isn’t perfect. The performance is lagging a bit, and it’s not much of a progressive web app.

I’m not so bothered about the PWA score since that isn’t the objective, but the performance has me scratching my head. First port of call for troubleshooting would be check the size of the images and other assets, and whether they could be optimized further.

The lighthouse implementation by Gatsby Cloud is automatic, which is awfully nice. And by comparison, the implementation is much more detailed and (looks like it is) closely modeled on the guidelines from Google.

In this screenshot, I can see the baseline scores plus diagnostics as to what’s causing issues. Curiously, this assessment doesn’t concern itself with the PWA metric, which I believe has been deactivated by default.

This implementation is fantastic, I have to say. Digging into the report, I’ve learned that one of my sites is blocked from indexing (whoops) which is dinging the SEO score. Also, I will be investigating “a more efficient cache policy” as per the diagnostics to bump up performance.

Safe travels, seafarers of the internets

So that’s my primer on lighthouse scoring. Henceforth, you have empirical evidence that your site really does perform amazingly well. I hope this has been useful to you, dear reader. It certainly has been an education for me, learning about this fantastic feature that every website can benefit from.