Lighthouse Revisited

One thing about this site that I’m not happy with is I don’t have the necessary tests in place to ensure changes meet the standard of quality I want. Case in point, a few months back I got the site to a good lighthouse score. Not just good, the site was at 100% for performance, accessibility, best practices, and SEO on desktop. Mobile had 95% for performance and accessibility.

Desktop (original)

Mobile (original)

I had not rerun the lighthouse test in a while. The recent run was not good as pictured below.

First thing that jumps out, and maybe it’s because it’s in red, is the “Largest Contentful Paint element”. My face apparently is just too big. To address this I resized the image to match the dimension it will be displayed. Just to be sure I introduced a little bit of lossy compression using cwebp in the command line. Not enough that you should notice but just enough to reduce the file size a little more.

cwebp -q 85 new-face-325x325.webp -o home-face-325x325.webp

From there I got a lower score than before with the report saying the image was low resolution and it was expecting something around 488 pixels square. I ended up resolving this issue by starting over and providing an image of 650x650 for the 325x325 square. This appears to be a requirement for serving to higher density screens.

One thing I did find interesting is that it appears lighthouse is using the light mode as a default. This of course exposes that I did not do enough testing of color contrast when setting up the light mode. Based on the feedback from the contrast test I’ve updated the light mode to the following.

As you may expect the dark mode which existed first and was used in the original test meets the contrast requirements.

One more thing I did was to shift some css styling to a sheet that is loaded asynchronously versus the inline critical styling. This has been a bit of guess and check on my part and I’m not sure I have everything where it needs to be just yet. If you see any jumps or restyling when a page loads please let me know.

One thing slowing down the site was font awesome icons for email, mastodon, bluesky, RSS feed, and github. I tried a few different ways to speed this up but ultimately went with doing away with the icons altogether. For now it’s kinda nice not having a company’s logo on my site.

I worked through the mobile score first as this is usually the most difficult to get right. The standards are understandably higher due to the variety of devices and connections. The main issue here was the picture of my face which was either too large of a file or low resolution. These things seem like opposites but there is a balancing act between quality images and file size. Ultimately I ended up recreating the image from its source and working with the compression of cwebp to get to a high enough quality image while having a low load time in the browser.

Here are the results of these efforts!

Desktop

Mobile

After a bit of trial and error both the mobile and desktop versions of the site have 100% for all four categories! 🎉

There are some optional items on the lighthouse page that I would like to pursue as well so this will likely get revisited again. For now things are faster and more people can interact comfortably with the site.

This is day 11 of #100DaysToOffload.