This post is secret; you can only find it via my RSS feeds (and places which syndicate them). It's okay to talk about it or link to it, though. Thanks for being part of RSS Club!
I’ve soft-launched a bit of a redesign on DanQ.me: the old one was getting a little stale, and I wanted space to try out some new ideas!
A major “theme” to my new design has been technical simplicity and performance. WordPress is great as a CMS, but the fact that it’s so easy to install “just one more plugin” to solve a problem can leave some WordPress sites feeling a little bloated. Plus, heavyweight sites seem to be the norm these days, sadly!
So I’m proud to have –
- Almost halved the number of WordPress plugins in-use from 35 to 18. (Of those 18, two are mine.)
- Dramatically reduced the number of scripts and stylesheets injected into the frontend by plugins from 7 to 0. (Virtually all the plugins that remain are for backend functionality.)
- Halved the total Javascript payload of a typical page from 8.3kb (compressed) to under 4kb (uncompressed, with full comments).1
- Made the Javascript and CSS that remain so small that they can be inlined, in their entirety, into each page, and still fit into a typical TCP slow start window.2
- Re-encoded most of the images as WebP for browsers that support it.3
What else? Lots of things that I’d been meaning to do for ages, but wanted a clean slate for:
<details> elements, enhanced with a little stylistic CSS.
- Improved accessibility, especially with regard to colour contrast.
- Switched out the maps that appear on checkin posts so they’re precached images from OpenStreetMap rather than Google Maps.
- Made my HTML nicer to read in View Source mode.4
- Added some new static pages: a colophon to explain how the site works, a summary of the implications of the license I publish under, etc.
- Added a second font (oooh!), for headings. I’m still not 100% convinced by it.
- Made it easier to see how people can reply to my posts, including by email.
- Added code to discourage search engines from indexing “RSS Club” posts, like this one!
- And lots more!
My aim is not to deliver this new generation of my site and have it be “complete” for a few years, like on previous ocassions.
Instead, part of the reason I’ve gone for a blank slate is to try to make it easier for me to do some “personal website gardening” more often. Lately I’ve written a lot of content… but I haven’t done much with my code. My digital garden has been delightful to relax in, but unruly to cultivate. A fresh start makes it easier to work on new things.
Footnotes
1 All Javascript remains optional, and the site works fine without it. Progressive enhancement for the win! Specifically, the Javascript on this site (a) launches a service worker, to enable “smarter” caching and so improve performance, (b) fires up instant.page, to start preloading links when you hover over them briefly and so improve performance, (c) make 360° photography WebGL friendly, and (d) make some disclaimer text “dismissible”. That’s all.
2 This is a Web Performance 201 thing. Here’s the skinny: while a web server is working out how much data it can dump on a user agent at once, it’ll typically send out about 14kb in the first tranche of data and then wait for guidance from the user agent before it continues. If you send 8kb of HTML in that first 14kb window, and then the browser parses the HTML and realises it needs 4kb of CSS too, then the browser it has to make a separate request for that CSS. In that instance, it would have been more-efficient to include the CSS in the initial HTML! This flies in the face of everything you learned in Web Performance 101 because that CSS now can’t be cached and re-used for subsequent page loads, but so long as most pages (by popularity) come in under the 14kb window it’s always more-efficient to bundle them with some of their resources. It reduces the length of your request chains too. Same principle applies to other dependencies – even (small) images!
3 Even my image-heavy homepage would comfortably fit twice onto a 1.44Mb 3.5″ floppy disk, with all resources, nowadays. I mean: if that’s the kind of thing you’re into.
4 I learned to code on the Web with thanks to View Source, and while I respect that the (new-fangled) Inspector tool is generally more-useful, I still think we owe it to future developers to not obfuscate the kinds of code that we ourselves learned from.
It’s a lovely redesign! Great work!
Should the Colophon have links to Listmonk and Bloq btw? The latter seems rather tricky to find online and I was curious to learn more about it
Thanks Tulip. I’ve added a link to Listmonk. I haven’t open-sourced Bloq ‘cos it’s a damn mess, but if I do I’ll add a link!
Ahh, I wasn’t sure if it was a framework, or something you had built yourself. Seems like you’ve clarified on the Colophon page now too, thank you ^_^