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 (a wide panoramic shot 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. It's now a 437 byte .svg plus a 417 byte .ico, the .ico hand-assembled so both its frames stay PNG-compressed — point ImageMagick at one and it writes uncompressed BMP instead, ballooning it straight back to 5KB, which is the exact bug I was here to fix. I kept it as a fallback for ancient browsers and that turned out to be the wrong reason, because Safari does SVG favicons fine now. It survives because browsers probe /favicon.ico at the root whether or not anything points there, and with the file gone that probe serves my 404 page instead — four times the bytes of the icon it replaced.

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. They've since gone the other way entirely: there's one 2.7KB card for the whole site now, rendered from the same little mark as the favicon, and no per-post image at all.

This success made me realise it was time I took Ben's advice and broke my addiction to huge banner images. I redesigned the homepage so it looks ok without them, which 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 😱). I told myself I'd keep running them full width on the longer posts, because we all need a hobby. That didn't last either: the six that still have one now sit at the same width as the text, like any other picture, and the homepage doesn't carry a single image.

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.