How I managed to get a complete 100 score on Lighthouse

Published 07 January 2020 12:00 (3-minute read)

By the end of September 2019 I challenged myself to get a website to a 100 score in Lighthouse. But why is this important?

"Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more." ~ https://developers.google.com/web/tools/lighthouse

With the outcome of the Lighthouse tests I wanted to improve the user experience for loading the website as fast as possible. The site that i've used in this experiment is a simple website built with Laravel. It serves dynamic content from the database. The content might be changed multiple times per hour so it's really important to show the up to date content.

After the first test the website scored around 50-70 on the different categories. That's not good enough for me, I wanted to get to the 100 score for every test.

Performance

Performance, one of the most important aspects of a good user experience. Therefor I decided to use TailwindCSS, it's easy to learn and use. By default it's already fast, but when you add PurgeCSS (the company Spatie made a package for this, called Purgecss wrapper for Laravel Mix) to your project it's even faster. The next thing is to make images in different sizes and use the srcset attribute on an image tag.

<img 
class="float-left w-1/3 mr-4 md:w-full rounded" 
loading="lazy" 
alt="Image description" 
src="/images/my-image.jpg?id=cb6b1ffb01c1439f0c87"
srcset="/images/4x/my-image.jpg?id=uch98sh8iunjnjhnbjhk 1300w,
/images/3x/my-image.jpg?id=892bnujn2nmjim2nkm22 1000w,
/images/2x/my-image.jpg?id=cb6b1ffb01c1439f0c87 700w,
/images/1x/my-image.jpg?id=311459af440f9d9a3d24 400w"
>

Last but not least, setup good caching policies. This lets the browser cache the files locally and doesn't request them on every page load.

It can be useful to use a CDN, like Cloudflare, they will serve all the static files (for example all the css, js and images) and this will decrease your server load. Another benefit from this is that a CDN usually has multiple locations around the globe, they will use a server that's the closest to the user what means it has a lower latency.

Accessibility

Coming soon...

Best practices

Coming soon...

SEO

These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking.

It's really simple to optimise your page for this, add a title, meta description, ensure every image has an alt tag and check if the url can isn't blocked by your robots.txt. Nothing special to do with this action.

Final result

After all this work, I've made this site to a complete 100 score. Unfortunately this wasn't a fix to reduce the amount of requests to the server, the amount of requests increased with around 17% compared to the previous 30 days.

But the mean benefit became in the amount of sales we had. We saw a drop in load time (from 1.7 to 0.7 seconds) and an increase in sales with at least 38%!!! The main reason was that more user continued on the site and didn't exists it after opening the page from social media or search engines.

Robin Dirksen
Robin Dirksen

Follow me on Twitter, there I post web-related content, tips/tricks, and other interesting things.

On my blog, you can find articles that I've found useful or wanted to share with anyone else.

If you want to know more about this article or just want to talk to me, don't hesitate to reach out.

Legal