The heaviest thing on the page

A while back I had a bit of a tidy-up. Shrank some chunky .ico logos, swapped the RSS icon for an .svg, and felt very pleased with myself. ~29KB a page. Job done, small web achieved, etc.

Except...perhaps because I was focused on that one post, which had no images, I missed the very obvious thing to optimise. At first I thought that would mean just making everything a lossless .webp but sometimes (this panoramic photo is a good example) that makes them bigger than a .jpg, so I use lossless for things like screenshots but photos are q82 compressed. Across the site now, total image weight is down from about 10.7MB to 2.5MB. 8MB gone! You're welcome.

After that I was poking around at page weights and realised that now the single heaviest thing on that post was the favicon - now heavier than the HTML, CSS, logo and the RSS icon combined. 15KB on a post that's 13KB of actual content.

This chonky little fellow was a 16/32/48px .ico with the 48px copy stored uncompressed. I swapped it for a <1KB .webp favicon, keeping an updated 5KB .ico as a fallback for ancient browsers.

One thing I still wondered about was using .webp for the OG images, as I vaguely recalled that you had to use .jpg for these. Turns out that's an idea that's well and truly out of date, so they got an update too.

This success made me realise it was time I took Ben's advice and broke my addiction to huge banner images. I'll keep them on the full page for essays, because we all need a hobby, but I've redesigned the homepage so it looks ok without them. That saves me time making ai-slop images and chopped its size from 2.4MB to 21KB (and that's with the other changes, it would have been much bigger before 😱).

Anyway. The site's a few megabytes lighter - felt right on the homepage, the favicon's been put on a diet and that celebrated 29K post is now 13.8KB. Small web ftw.