The heaviest thing on the page

A while back I had a bit of a tidy-up. Shrank some chunky PNG 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 of optimising those. 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 3.6MB. 7MB 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 - which was now heavier than the HTML, CSS, logo and the RSS icon combined. It was 15KB on a post that's otherwise about 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 JPEG for these. Turns out that's an idea that's well and truly out of date, so they got an update too.

This success led me to really take a good look in the mirror, and 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.