How I managed to get a complete 100 score on Lighthouse

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 scores for every test.

Performance

Performance, one of the most important aspects of a good user experience. Therefore 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, set up 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 optimize 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 a complete 100 score. Unfortunately, this wasn't a fix to reduce the number of requests to the server. The number of requests increased by around 17% compared to the previous 30 days.

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