01/09/26 23:53
I want this site to be fast, but I also want lots of web badges. At the time of writing I have about 60 and plan to keep collecting/making them. This resulted in the homepage getting quite bloated (compared to it's prior size), so I optimised the images to reduce the page size.
For nearly everything except animated GIFs, I converted them to .avif images with avifenc, which are often smaller for no visual loss of quality. This was straightforward for .png, but avifenc can't convert static GIFs, so I made a simple script which converts the GIF to PNG with imagemagick's convert, then avifenc to convert that to AVIF, and then it prints the size of all three files for comparison - sometimes GIF or PNG wins out, so I kept whatever was smallest, even if it only saved a few bytes. I also re-sized a few oversized images down to a real 88x31, rather than just specifying the image size in the HTML.
This has reduced the size of the homepage back down to about 150kb over the wire. Still ten times what it used to be, but good enough. It currently loads in about 2-300 milliseconds (though you'll likely see higher due to latency). I'd like to get it under 100ms, but I can't really do anything about the network as I'm not exactly running on a global CDN, so I just have to tweak the page itself. The web badges now actually only add about 30ms - for some reason the CSS and favicon are by far the slowest things to load, accounting for about 80% of the waiting time. I'm not sure why that is just yet, but I'm researching the topic.
My fallback goal is to stay smaller and faster than the Google homepage, which I figure must have quite a lot of thought put into its performance. So far, I'm beating it by about 2x on size and roughly matching it on speed, if you count loading the DOM (otherwise the google homepage is dynamic enough it never really 'finishes' like a static page).
Was it worth tinkering with images for a few hours to save a few hundred kilobytes? Well, I learned some stuff from it, which is really the point. If you enjoyed wasting time, it wasn't really wasted. The time will pass anyway and all that.