Of how I pushed my personal website Lighthouse Audit score to the max (possible)

There was once a nice game called Nibbler (well, actually it’s still there if you search it) to test your website and gain score towards, according to some “best” practices. It was mainly focusing to SEO and social stuffs. I liked spending time to improve all the possible scores and push it to a respectable score.

But now there’s something better, something more useful for real (sorry Nibbler) and that every site owner should take care about: Google Lighthouse aka Audit in your Chrome DevTools.

It’s something that you cannot ignore if you care about speed, performance, user experience, accessibility and search optimization.

I like challenges.

I don’t really like to compete with others but I like to compete with myself because there are often good chances to win.

So, I wanted to re-submit my site to another test. 😏

Foreword: my personal website it’s nothing so complicated. It’s just a one page website, localized both in Italian than in English, recently re-build in Laravel with just a sprinkling of Vue.js. So you may think: which kind of performance problems could it have?

Well, this was my starting point:

Not such a high score, uh?

As you can see, it doesn’t matter if it’s a onepage or a thousand-page website, Audit will get you. If it’s a smaller one, it’s easier to solve problems maybe or less time consuming to start to get to know Lighthouse and find the right tools that could help. So, it’s a perfect testbed.

Therefore, how I helped myself?

First of all, my website wasn’t under https, and this is something, you know, that Google does not like anymore. So for this, it helped me CloudFlare.
I totally forgot it was already under CloudFlare (I activated it years ago and totally forgot 🤣 it means that it was doing his job). So it was just a matter of reviewing some settings.

My SSL setting was already ON on a flexible status, which I left, but I set “Always Use HTTPS” and “Automatic HTTPS Rewrites” to ON.

Then, as my website is under a third-domain level, I also needed to add it as a DNS record.

The orange cloud means that the traffic is going under CloudFlare, so https is now my thing!

This already solved most of the problems. But there were other things to do.

Following what Lighthouse was suggesting, that, by the way, they’re the most common problem in every website, it led me to:

• Fix font-display issues. I don’t know why, but the fonts I’m using (which I bought it somewhere around the web I don’t remember where now) seem to be very heavy and always take some time to load so the page flashes and readable content is deferred. But I don’t want to give up these fonts for the moment so I add the font-display rule and set it to block.
• Prefetch external resources. Adding what Audit was suggesting to me, like this:
  <link rel=”dns-prefetch” href=”https://www.googletagmanager.com" crossorigin>
  I chose dns-prefetch over preconnect after reading this.
• Use responsive images. Just for my picture because its dimensions vary among viewports.
• Fix font size on mobile. This improves accessibility issue, some fonts were under 12px and this is not good.
• Update jQuery version. I also had to update the jquery version because it had some vulnerability issues. Lighthouse tells you also this 😍so cute!
• Remove external plugin. Ok, this is not a great tip, I know, but in my case, I can do without them. In particular, I was using Iubenda widget which however added best practices issues because it was using document.write :/ This is something that third-party widget developer should take care of as well now. Because you cannot solve Audit issues that are not on you’re website unless removing the third-party widget which in most of the cases it’s not possible. Another widget I removed was AddThis because it was using the same tabindex value over the social links decreasing my accessibility score.
  As I said, my addthis widget wasn’t so vital and my Iubenda policy is now just open in a blank page instead of using their in-page modal, but in other cases these would be unresolvable problems unless the widget comes with an update.

After these fixes, my new score was:

which is something I can really be proud of. Good job, Lori, you won! 🤪

The accessibility issue that’s still there is something that ehm.. 👉👈 it’s about the less color contrast due to the color palette I used but as I like it, therefore, I’m not gonna fix it now. I say now because I plan to redesign all the website so it will be something I’ll take into account during this rework.

Another thing I omitted to do is lazy-loading the images but there are just three images on my website so I don’t think they have a great impact. But I’ll probably do it later, out of curiosity.

Also, render-blocking resources are one of the hardest things to solve, even in a little project with very small css and js files. I think it’s mainly due to inline css. I’m gonna try this laravel-mix criticalcss and will let you know if it’s getting better. There are also some interesting suggestion here like

consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link

which will be interesting to test.

Anyway, this journey has been amazing and full of new concepts and now I’m ready and can’t wait to test all this out on more complex projects 💪

Conclusion

This was just a veeery little project on which to test Lighthouse but it already took me some time to fix them all so 😏 it’s probably wiser to always run the audit test since the beginning of a project in order to amend errors as soon as possible instead of fixing them all, maybe in a rush, before deploying in production.

Yes, I know. A never heard advice.