DEV Community

Joost van der Schee
Joost van der Schee

Posted on • Edited on

How to get a 100% Google Lighthouse score

Google will soon shame slow websites. A good reason to take a good look at your Google Lighthouse score right now. A good reason to take a good look at your Google Lighthouse score right now.

You might feel that it is nearly impossible to get to a perfect 100% score. You minified your Javascript, properly scaled your images and even combined some requests, but that did not help nearly enough. The problem is: you might be looking at it from the wrong angle.

I build 100% scoring websites on a daily basis, so obviously it is very well possible to get a perfect score on all your websites with little effort. I will try to explain what we want to achieve and how we can achieve that.

There are some basic facts that a lot of people get wrong when it comes to speed and performance. Minifying does not beat gzipping, image scaling does not beat JPG compression and combining requests is actually counter-effective over HTTP/2. These are probably the reasons why your earlier efforts had so little effect. Another important thing to know is that Google Lighthouse simulates a slow connection. This emphasizes the importance of a low 'page weight' or 'total size' over fast infrastructure, as a small page is delivered significantly faster over such a narrow connection than a large page.

Before we look at the actual steps we need to take, let us look at some websites that score (nearly) 100 points on all four categories. It will give you an idea of what the end-result could or should look like. For each site I have listed the weights: the Javascript, CSS and the total page weight. You can also see the number of requests, as well as the time it takes the server to respond (TTFB) and the site to load. Note that these results are results from my computer. Finally, I listed the host, the company that built the website and the Google Lighthouse score. Note that the comma separated numbers stand for Performance, Accessibility, Best Practises and SEO.

 

debabywegwijzer.nl
Javascript: 0kb
CSS: 9kb
Total size: 120kb
Requests: 9
TTFB: 22ms
DOM loaded:     274ms
Loading time: 596ms
Hosted on: CloudFlare (CDN)
Built by: Usecue BV
Score: 99,100,100,100

...

[article truncated]

 

Do you like this? Read the full article on How to get a 100% Google Lighthouse score at www.usecue.com.

Top comments (0)