I’ve made a few more changes to the site lately, after some much-needed therapeutic messing about. Firstly, the fonts and body container both scale to the viewport. I started with how it looks on mobile as a baseline, and tried to keep that roughly the same while making everything all a bit bigger on desktop screens. I haven’t seen any glaring inconsistencies in sizing yet so I’m quite pleased with how it turned out.

The main thing is responsive image generation, using the Jekyll Picture Tag plugin. I’ve set it to generate images at the following widths:

You can probably see these are deliberately chosen with particular aspect ratios in mind. The plugin also generates images in webp format, and I would prefer going further to use avif but I’m getting errors with libvips. Either this will sort itself out over time (as libvips comes to support avif natively?), or at some point in the future I can have fun wiping my vips install and compiling everything + the dependencies from scratch.

I resisted going down the responsive image route for a long time because webp has become almost universally supported and it’s only a matter of time before avif reaches the same level of adoption. Why do all this work to fallback to jpegs which are no longer the most preferable image format?
At least this is a more systematic way of dealing with compression, and it allows me to link to full-quality original files. Gone are the simple days of manually compressing everything in a directory and then just linking to the images directly.

I’ve added native lazy loading to the picture tag, and I’m not sure it’s a good idea. I used to be dead against javascript lazy loading because I felt it compromised users on wobbly internet connections. When you open a web page to your browser, the expected behaviour is to download the whole thing, not just the bit you can see on screen. I’ve had countless frustrating experiences with script-laden pages which never fully load. On the other hand, it does speed up the initial page load. Does anyone else have strong opinions about this?

Finally, image dimensions are automatically added to the image tag. Giving the dimensions should help the browser reserve space for images before the files themselves load in place, thus cutting down on ‘cumulative layout shift’.

Here’s a selection of relatively recent pictures from the camera folder on my phone.

UCU placard

malcolm arcade

peoples assembly london

Maybe you didn’t notice these pictures loading quicker than before, or you would have noticed if they loaded slower.

Caching

I changed the default Cloudfront caching rules to keep files in edge caches for longer. The default is that everything stays in the CDN 24 hours or less, I’ve pushed that up to 10 30 days maximum. In any case I usually update the site every week or so, and I like to manually trigger a cache invalidation after any changes.

I initially thought of a CDN as a ‘nice to have’ extra, with limited value due to the fact that this site is not nearly popular enough to make use of it. At a glance, last month the site got around 700 requests per day. I’m on the wrong side of a tradeoff between the rate of requests, the number of caches, and the rate at which files are rotated out from the cache. The best case scenario would look like a specific post experiencing a rapid burst of popularity in an area far away from EU-West-2 (London).

I have the impression my change to caching rules has shifted the overall balance of hits and misses, I noticed that for a few days hits overtook misses. Although, without having actually measured anything it might just be me looking for the trend I want to see.

The more complicated caching strategy is browser caching, which I can define as part of the AWS S3 metadata, which then gets passed on to the http header.1 This kind of caching requires careful judgements around content, it’s difficult to set automatically, and it’s liable to trip you up if you make changes and forget to disable the cache on your browser.2 There are some files which change regularly, which I want the browser to always check (the blog homepage), and some things I want the browser to cache for a long time (styling, fonts, favicon). So far I’ve only set browser caching on a file-by-file basis and I’m leaving it at that for the time being.

Other changes

  1. There’s a lot of other metadata I want to pass through S3 as part of building the site, like MIME types, and utf-8 character encoding for HTML files. Again it’s a process which needs careful attention. 

  2. Everyone who does web development has at some point been caught out by failing to disable the cache. It’s a learning moment. 

  3. Hello there.