I’m currently in the midst of building a site for my band, the Astronauts.
Band websites seem to be very image-heavy, and ours is no exception. We’ve got a hero image, background images, album art images, show photos… the list goes on.
With the site mostly done, I decided to try and optimize. I ran my site through Lighthouse.
And oh. My. God.
Performance was abysmal, in the 50% range (sometimes even dipping into the 40s 🤮). Google kept complaining that my images were not sized properly: by this, they mean that a rendered image must be within 4kiB of its actual size.
Another complaint I kept seeing from Lighthouse was “images don’t have explicit height and width”, or something to that effect.
It turns out, Google wasn’t complaining for nothing: I was loading huge images, only to display them as thumbnails. So, my first step was to figure out what the max dimensions of my thumbnails were (and I found they never got bigger than 640px). Next, I would have to do a bit of extra work: process the thumbnails, add a column in the database for the thumbnail files (I don’t have a CDN 😭) Then, I set
width=640 on my
With this, Lighthouse is markedly happier. I get 83% on mobile and 99% on desktop (though it seems to fluctuate a fair bit). It’s still unhappy that I’m not using “next-gen” image formats (I’m using
.mozjpeg and not
.webp, get off my case)
I’ve learnt a couple of things:
- Working with images is tedious and rough
- Image sizes really don’t need to be that big. 300kb is plenty for a thumbnail (some go all the way down to 60kb and look totally fine!). Compressed images only need to be a few hundred kb and still look good expanded
- I could really do with a CDN
Also, I need to look into
srcset at some point, but that’s a problem for another day.