Improving Lighthouse Scores For bionicjulia.com
Tags: a11y, nextjs, devtools, seo
Published: 2022-03-05 12:36:42

---
title: Improving Lighthouse Scores For bionicjulia.com
published: true
date: 2022-03-05 00:00:00 UTC
tags: accessibility, nextjs, devtools, seo
description: Focusing on performance and accessibility scores
canonical_url: https://bionicjulia.com/blog/improving-lighthouse-scores-bionicjulia
---

Carrying on from my [accessibility post](/blog/accessibility-tips-for-web-development) last week, I thought I’d spend some time putting knowledge to practice. I spent my morning looking into [Chrome’s Lighthouse](https://developers.google.com/web/tools/lighthouse) feature and worked at improving my website to see what differences it would make to my Lighthouse scores.

## Starting point

Though the main landing page of my website is [bionicjulia.com](/), I thought I’d try to optimise [bionicjulia.com/blog](/blog) as this is the page that I want people to visit the most. Here are my starting scores - not _too_ bad, but the accessibility score could definitely do with a boost.

![Summary scores before improvements](https://user-images.githubusercontent.com/7389546/156882641-975e919f-d248-483b-806d-1012fddb57e4.png)

### Performance

The really nice thing about Lighthouse is the detailed suggestions it provides on how to improve your scores. If we look at the “Performance” score, it was mainly the “total blocking time” that was letting me down. Delving into it further, the diagnostics showed there were a number of long main-thread tasks being run, which was useful in identifying the worst contributors to input delay. You can read more about what causes this [here](https://web.dev/long-tasks-devtools).

![Performance score before improvements](https://user-images.githubusercontent.com/7389546/156882673-b98005ef-4a10-4b84-b78c-c09a7391de7b.png)

### Accessibility

I found the accessibility section to be extremely useful. There are relevant external links to help you understand more about what makes a site accessible in general, but also very specific improvement points for your site. Check out the snapshot below to see what I mean - each suggestion can be expanded to give you even more precise information on where in your code base, the problems were identified.

![Accessibility scores before improvements](https://user-images.githubusercontent.com/7389546/156882686-e8398ade-935a-43e6-bd45-274628d82ccd.png)

## After the improvements were made...

I use NextJS and Vercel to serve up [bionicjulia.com](/). Some of the suggestions on how to optimise my site was therefore out of my control, but I tried my best to improve as much as I could. Here are my post-improvement Lighthouse scores.

![Summary scores after improvements](https://user-images.githubusercontent.com/7389546/156882729-7b621193-7e71-4dc6-9567-13c3c5c169c3.png)

Not bad at all (if I may say so myself!), considering how quick and easy it was to make the fixes. I’m somewhat gutted that my performance score isn’t in the green (I need to dig deeper into NextJS if I want to improve this further), but I’m very pleased with my accessibility score improvement.

### Performance

The improvement in my performance score does seem to have been led by the decrease in total blocking time and time to interactive. This was mostly achieved by reducing the size of some of my images and scripts.

![Performance scores after improvements](https://user-images.githubusercontent.com/7389546/156882742-85912af0-f024-4bb6-a1d5-f5914d9309ed.png)

### Accessibility

For accessibility, I made all of the suggested changes (bar one which didn’t work for the way I had set up my website), which were mostly around:

- Ensuring any links that used SVGs instead of text, had ARIA labels specifying what the link related to for screen readers.
- Ensuring that my unordered lists had child `<li>` tags.
- Improving the colour contrast ratio of my links.
- Basic HTML syntax improvements.

![Accessibility scores after improvements](https://user-images.githubusercontent.com/7389546/156882759-cd8f172d-5ea2-482d-b479-bf4b13de1d98.png)

## Summary

Though I didn’t set out to optimise the main landing page at [bionicjulia.com](http://bionicjulia.com), the improvements I made also affected my index page...where I’m pleased to say I got top marks. 🎉

![Summary scores for landing page](https://user-images.githubusercontent.com/7389546/156882772-f2ad5fef-bd65-4913-883a-5a6f140adca2.png)

There’s definitely still room for improvement though, and next steps would be to run this analysis on each of the individual pages of my site. Lighthouse is also only one such tool, but it’s a good start. 🤓

If you have any suggestions on how I might improve this post, please do also let me know. I'm at https://bionicjulia.com, [Twitter](https://twitter.com/bionicjulia) and [Instagram](https://instagram.com/bionicjulia).