Using Lighthouse to quickly improve web accessibility and performance
About Lighthouse
Lighthouse is a dev tool available in Google Chrome and other Chromium browsers like Brave.
It allows you to run an audit to test performance, accessibility, best practices, and search engine optimization (SEO).
Convert PNG images to webp
Mobile performance was pretty bad before image optimizations. I used the Figma plugin TinyImage Compressor to convert images to webp format.
Before image conversion
Mobile stats before image conversion.
After image conversion
Mobile stats after image conversion.
Desktop stats after image conversion, more in depth showing FCP (first contentful paint):
Accessibility and SEO
The next thing I did was listen to Lighthouse warnings to improve accessibility. This included small changes like adding alt
text to images and adding relevant meta
tags for SEO. These quick changes had a pretty big improvement on the Lighthouse score.
Before accessibility and SEO suggestions
Desktop stats before accessibility and SEO changes.
After accessibility and SEO suggestions
Desktop stats after accessibility and SEO changes.
Mobile stats after accessibility and SEO changes.
Room for improvement
I still have some room for improvement, for example with colour contrasting accessibility where text links don't have sufficient contrast to meet web content accessibility guidelines (WCAG).
Summary
With very little effort, one can significantly improve their Lighthouse score.