Document

A Perfect Google Lighthouse Score – But At What Cost?

“The Magic 400”, a mythical mystery that many strive for, but few succeed in finding. A perfect Google Lighthouse score is often a target set by marketing and SEO professionals as an aspiration for a new website, but rarely is this perfect score seen on the web. Is it too difficult for most to achieve? Or actually, is it simply not worth the time and effort?

For my latest website build I set a personal target of achieving a perfect score, with the aim of documenting the path to 400 and explaining what blockers and difficulties you will often find. Read on to find out more!

The Google Lighthouse report is split into 4 categories, and some are far easier to perfect than others. Performance often causes the biggest frustration, as it can vary wildly depending on the page on the website, and server performance. It is important to note at this stage that sometimes a 100 performance score simply isn’t possible, either due to the nature of the site build, poor hosting, or the use of technology that cannot be offset to initialise after the page load. Accessibility is simple enough to master, but it can lead to workarounds and often the removal of elements and styling decisions that are simply not built with accessibility in mind. SEO and best practices are the easiest 2 to ascend to the perfect score, and should always be achievable in a new website build regardless of the journey or process used.

For my latest website build, I focused on a lightweight and performant solution from the very beginning to make this journey easier. I used the excellent Picostrap base theme which I highly recommend. It is lightweight, comes with a Sass compiler built in, and uses lightweight variations of popular libraries such as Bootstrap to keep the bloat down. My page builder of choice is LiveCanvas. A page builder here is totally optional, and not using one will often improve scores. However I know that LiveCanvas exports plain HTML and does not add its own container classes and tags, so this will not slow the site.

Upon completing my website release and running the report for the first time, I was pleasantly surprised; all scores were green. This meant that each score was at least 80 or higher. SEO needed the least work, simply adding appropriate meta tags to the site, and some images. This was quickly done, and SEO was at 100.

Best practices required me to add an SSL certificate to my site, and this can either be free or expensive dependant on hosting setup. I use WPMU Dev for my hosting, and I bought my hosting package knowing that Lets Encrypt provides an SSL certificate for free on the server. I also had some warnings for imagery being shown at a lower resolution than their size on the page. In my case, I just needed to re-export my logo and some app iconography at a higher resolution. Job done.

Accessibility proved frustrating as expected, mainly due to it’s strict use of colour contrast ruling throughout the site. I had some CSS that made links on the site show as “Electric Pink”, but as per accessibility rules go, this does not provide a high enough contrast. This was the first moment in which I needed to actually alter the appearance of the site and differ from the original design, in order to satisfy Lighthouse. The links (including the footer copyright) are now a deep purple tone. A minor inconvenience at best. I also needed to give iframes around the site title meta. Meta can be a pain here, but Google what warnings you get and often you need to simply add extra lines into your headers.

And this leaves performance, “My Everest”. The key to a great performance score with Lighthouse usually revolves around “First Paint”. The whole site does not need to load quickly necessarily, providing that the first content to show “above the fold” does. The first action should focus on looking at all resources that load when the page loads, and moving any that are not a necessity for the styling of the content above the fold to be deferred and to load when they are ready, rather than delaying that crucial first paint.

My score improved from 80 to 91 after deferring some JavaScript to load asynchronously, but there was still a fairly heavy resource that couldn’t be shifted, and this was my master stylesheet. This file contains everything essential for the site looks and feel including fonts and colours, so this file cannot be moved elsewhere. The focus now moves to condensing what is there.

Gulp is a great tool for the job, and I used this to purify and minify my content. Purifying the CSS involves deleting any styling that is not used by the website. As my site is minimal, and the stylesheet contained quite a lot of generic styling that was not used by default, this made a big difference.

Minifying the end result shrunk the file size further, and the score increased again to 97. We are almost there!

My final act to reach the summit, was to take local copies for jQuery and jQuery UI (both used by my site) and in doing so remove any CDNs that I was using for ease during development. CDNs are usually fast enough, but avoiding them means a couple less networked actions tied to our website. 100 says Lighthouse, we made it!

The console fires off little firework animations when you reach the Magic 400, a nice surprise!