Improve your Lighthouse score with these hands-on tips

At Yummygum, with everything we make we always strive to deliver excellence, from the concept phase all the way to the delivery phase. Not only do we try to set an example for the industry. We also see it as our duty to deliver an excellent user experience. And I mean experience in the broad sense of the word; ensuring that the website is accessible, fast and optimized for search engines is an often overlooked yet important part of the development workflow. We use Lighthouse for this as it allows us to continuously measure these key metrics.

What is Lighthouse?

Lighthouse is a tool that we use to measure web vitals, which are scores made by Google according to an automated test in order to determine the following things of a webpage:

• performance,

• accessibility,

• best practices,

• PWA

• SEO

Today we’ll dive into each of these.

Lighthouse is built into the Chrome browser devtools but is also usable at PageSpeed. While these two function very similarly the benefit of using PageSpeed is that it will show the web vitals that real users are experiencing. Achieving a high score in each category indicates a website is meeting industry standards and is providing a good user experience.

Alright, so should I aim for 100 in all categories? No, the goal of Lighthouse isn’t to get a 100 in all categories. You should strive to get as high as a score in each category as possible, but the score you should try to get also depends on the product you are making. It might not make sense for you to make a website a Progressive Web App (PWA) if it’s not meant to be used as a progressive web app. In general you should try to get a 100 in each category except performance. However,... while hitting a 100 in performance would be a great thing to achieve, actually getting to a 100 is often hard. There is a point at which there are diminishing returns for your effort. So instead, aim for a score of at least 90 and at least 95 for key pages.

Automated Lighthouse testing

You can bring Lighthouse testing to the next level by automating it. By using Cypress we can also set up automated Lighthouse testing on each commit and we can even run this on pull requests to ensure that we prevent issues before they end up in the main development branch.

One way to setup automated testing using Cypress is using the following code:

Accessibility

One of Lighthouse’s measurement categories is accessibility. This category runs a bunch of automated accessibility checks. One important note; having a score of 100 here should be seen as a baseline. It doesn’t actually mean your product is accessible. That is of course because there isn’t a way to accurately test accessibility with automated tooling. I highly recommend using a screen reader to navigate the website yourself and identify and fix any issues you find. Additionally make sure that any animations you make respect the reduce motion preference of your users.

You might think; well my target audience doesn’t have any issues that would require me to make my website accessible. But chances are you’re wrong since around 20% of the population either has a temporary or permanent impairment of some kind. And even if you personally don’t care too much about accessibility, ensuring your website is accessible also makes it easier to understand for search engines. This, in turn of course has a very positive effect on your search engine optimisation.

If accessibility is essential to your digital product (think: a government website) you should seriously consider getting an audit done by a specialist team.

Performance

Performance is arguably the hardest, yet also the most important category of all the categories that Lighthouse measurements. Ensuring you have a fast website is key to delivering a good user experience. Not only is it a win for your user experience, it’ll also definitely drive your conversion rates up. But you don’t have to take my word for it, take the word of experts in the field. 

“A site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds” (Portent, 2022), 

“Nearly 70% of consumers admit that page speed influences their likeliness to buy.” (Unbounce, 2019).

So now that you know *why* performance is important, you can start taking action to improve upon it. But before you do, you need to understand how Lighthouse measures performance. Lighthouse does this based on 6 metrics, of which the 3 most important ones are 

• Largest Contentful Paint (LCP), 

• First Input Delay (FID) and 

• Cumulative Layout Shift (CLS).

LCP measures the time it takes for the largest element in the viewport to load. FID measures how long it takes for a page to become interactive after a user first interacts with it. A good example of this is how long it takes for the page to respond when a user first clicks a button. CLS measures the shifts in the layout of the page. You’ll want this score to be as low as possible, as large layout shifts can be very disruptive for users.

Images and performance

For a lot of websites the main performance impact is caused by images. To solve image related performance issues it’s important that the different departments at your company are aware of image guidelines. At Yummygum we solved this by adjusting our workflow to make everyone aware of three things:

• Image optimization

• Deliver assets in WEBP when possible

• Create and use target image size guidelines based on the size of an image on the page. For example: an image on a 12 column grid that spans one column in width we would limit to 20kb while that same image that would span 12 columns easily ‘weighs’ up to 200kb.

When using images on your website be sure that any image or video below the fold is lazy rendered, meaning you only request the asset once it’s (nearly) within the user’s viewport. This ensures your website loads significantly faster and also saves bandwidth both for the end user and for your servers.

JavaScript and performance

After images and videos the thing that will most likely impact performance is JavaScript, especially if you use frameworks like React. At Yummygum we use React for almost all projects, so making sure we’re able to deliver these projects while still delivering great performance is crucial to ensure that we also deliver a good user experience. To achieve a great performance while using React we typically do a couple of things. 

First we integrate NextJS into our workflow and use the static export to ensure that we have pre-rendered all pages during export. This way pages don’t need to render on the client side. Besides that we use Preact instead of React. Preact is significantly smaller than React and was developed with performance as the main goal. Furthermore we defer loading of scripts that are not critical to the initial render of the page. By default the loading of scripts blocks the rendering of the page. Adding async or defer attributes to script tags prevents these scripts from blocking the rendering of the page.

The final part of optimizing performance is ensuring that you properly compress and minify all assets and that you set up your server properly for serving the assets. Double check to make sure you enable Brotli (or alternatively Gzip) compression on the server to ensure properly compressed assets when sending it over the wire. Set up proper caching rules for all assets on your website and set up the server to serve requests over HTTP/2 or HTTP/3.

SEO

The SEO score is primarily based on whether or not your DOM structure is logical. To improve your SEO score be sure you follow HTML5 best practices. What that basically means is write semantic HTML. Semantic tags provide context and meaning to your webpage making it easier for search engines to understand the content of your page. This also has the added benefit that it makes the page easier to navigate for assistive technologies. Furthermore it’s important you add the proper meta tags and that you have a robots.txt that allows crawlers to crawl the website. Don’t forget to add clear descriptive alt text to all images on the webpage to allow search engines to understand the context of the image (which it otherwise would not be able to do).

Best practices

This category mainly focuses on simple best practices such as using https and serving images with the correct aspect ratio. It should not be difficult to achieve a score of 100 in this category. Some important points from this category are:

1. Use HTTPS on all requests

2. Allow users to paste into password fields

3. Do not request permissions on page load, instead request them as a response to a user interaction when it is logical to ask for it.

4. Display images with the correct aspect ratio

5. Avoid using libraries with known security vulnerabilities

6. Avoid using deprecated APIs

Progressive Web App

When developing a website that could be used as a Progressive Web App (PWA) this Lighthouse category can be used to check if you have set up everything that is needed for a PWA. A PWA is a website or web app that you can install onto your device similar to a native app. 

Expert tips for PWAs

When creating a PWA there are a few things you need to keep in mind.

1. Create a manifest.json

2. Setup a service worker*

3. Setup a theme color

4. Configure a custom splash screen.

*A service worker makes your website significantly faster but it also makes your website a cache-first approach where it is possible that a user does not receive newer versions of your website. Especially if the service worker is configured incorrectly. When setting up a service worker it’s key to have a proper way to invalidate the service worker. And ask yourself if it’s okay if some users run on an older version of the application. 

Quick wins

Want to improve your Lighthouse score, but finding it difficult to convince your client or manager? Here are some quick wins you can implement in nearly every project that will greatly boost your Lighthouse score.

1. Export assets at the right, and reasonable resolution (A image that is displayed as a 400x200 doesn’t need a 1600x800 image)

2. Convert your images to WEBP (The designers at Yummygum use WEBP converter, for this tool we use the following settings; quality: around 85, method: 6 (slow/high quality), keep color profile: enable

3. Minify your assets (CSS/HTML/JS)

4. Lazy load images that are below the fold, you can easily to do this by adding loading="lazy" to an <img /> tag.

5. Async and defer scripts when possible

6. Add proper caching to all assets

Why should you care about your Lighthouse score?

Having a good Lighthouse score ensures you follow industry standards and that the website you make provides a good user experience. And if that’s not enough of a motivation, then the fact that google actually uses the key metrics shown in Lighthouse to determine the position they show your website in search results might help motivate you.

Focussing on a high Lighthouse score gives several competitive advantages for digital products:

1. Improved user experience — A website or app with a high Lighthouse score is likely to be quick, easy to use, and accessible. Better user experience as a result may boost customer happiness and loyalty.

2. Better search engine rankings — Search engines like Google frequently use a Lighthouse score as a ranking factor as it’s a significant indicator of a website’s quality. A website with a high Lighthouse score has a better chance of showing up high in search results, which of course helps improve traffic and attract more potential customers.

3. Increased conversions — Research shows users are more likely to finish a job or make a purchase if the process is quick and easy. As a result, websites that are fast and have a good user experience are likely to boost conversion rates.

4. Enhanced reputation — Because of the way Lighthouse tests are structured, improving your Lighthouse score will lead to a higher quality experience. Which is likely to improve your reputation. This can help you stand out amongst competitors and gain the trust of potential customers.

Interested to see what we can do for your project? Or are you interested to know more about our development processes, learn more about how we go about development at Yummygum, or set up a call!