2024 Refresh
It’s October, I’m on vacation after a very long, arduous stint building a new Theme for Shopify. Staying in a small single room cabin on the edge of the Pacific Ocean with a limited internet connection, what better place to catch up on sleep, reading, and putting some of those readings to practice.
For context, building a theme for Shopify Theme Store is a large task, there are infinite variables to consider, and choices to be made. There is no knowing what a merchant will actually want or try to do, so the code needs to be stable, resilient and incredibly flexible. This has given my skills in HTML (Liquid), CSS and Javascript a real world push, mastering the new (baseline availability) techniques available.
At the outset of this refresh, the goal was to apply more modern CSS approaches to last year’s design, removing anything that isn’t necessary, and cleaning up the design. It should still be the same old design, where decorative elements are replaced with space, JS replaced with CSS, and HTML rigorously refined to be the bare minimum required to represent each page.
Collecting Resource
I started thinking about an update back in July. Roman Komarov wrote a post on how to achieve text that scales to the container width1. The header of gregdaynes.com site uses Fitty2 in the header for the title and subtitle. Fitty works, but requires Javascript, and has a flicker on load when rendering. So this technique kicked off the whole thing, but I wouldn’t get around to trying it out until yesterday.
Throughout the year, reading posts, books, toots, newsletters, anything around current frontend trends. There are were definitely a few stand out pieces and tools.
Layout
I finally got around to reading through Every Layout3 from Andy Bell4 and Heydon Pickering5. It’s definitely worth the money, and time to catch up on modern approaches to layouts. The book-site has generators, and the applied / practical approaches laid out are fantastic.
This refresh utilized the Sidebar layout this year, and abandoned the Stack approach from last year (also from Every Layout).
Similarly continuing use of Utopia6 generators to produce spacing, and typography, though I found I didn’t need much of the spacing custom properties.
Markup
In my spare time, I’ve been working on a SaaS idea (that I won’t go into details about now). I set out a goal there to move fast (it’s been anything but), however the UI is where I’ve been the most productive. It started out with Tailwind (Yes, I know. It was for the component library). Then onto Bootstrap (because it’s familiar, less annoying than Tailwind, and had all the components I really needed). Both being chonky and unfriendly to write, I did some bespoke CSS, but realized it was slowing me down. I landed on Pico.css7, I have to admit it’s fantastic. The classless approach to using semantic markup to produce a MVP UI is definitely worth it.
Huh? What does some SaaS and CSS frameworks have to do with the refresh?
Pico.css got me into the groove of writing less selectors, less divs, less everything.
Coincidentally, I also sat down to read all of Jens Oliver Meiert8 Upgrade your HTML series9. They’re quick little looks at writing HTML and how to rethink old practices which you may still be stuck on. These tips all reinforced the idea of removing as much as possible from the markup, until it is lean.
Which was the first optimization for the refresh - Remove everything that doesn’t matter.
This means I got rid of all the selectors I didn’t need (most of them, I think there are 3 or 4 left, that could also be removed now that I think about it).
Then I got rid of all the decoration elements, all the <hr> I use for headings and delimiters.
Speaking of decoration, I hate favicons. At least there’s no need for my website. If it was a PWA or a branded entity, yes, use them. Otherwise, no, it’s a request you don’t need, it is not always visible, so why? I stubbed the favicon out with
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Jekyll SEO was a good idea, at one point in time. But we’re in the age of bad AI and LLM everything. Google and Bing do everything they can to not crawl websites anymore. I was mostly using it for Open Graph and metadata generation. Jens once again to the rescue with a look at Minimal Social Markup10. Going from 15-20 metatags to 5 is great. But I also lost <title> and description, so those were added manually.
After that, I looked at all the elements in use, and systematically removed or replaced the ones that didn’t matter anymore.
On the home page, this brought DOM count from 151 to 113. Heck yes!
Styling
Next up, I took a very-dull metaphoric axe to the CSS.
Without class selectors in the markup, those could all be removed.
CSS reset? Gone. No need for many of the rules in most/all resets. Even Andy Bell’s Modern Reset11 (which is great, and you should review it).
I did keep the colours from the previous design. Though it could still use work to reduce the contrast.
text-wrap: balance made an appearance now, simplifying places I’d use flexbox to wrap reasonably. No need to manage the box model now!
Font stacks were removed, not replaced. sans-serif and impact are viable enough for everywhere.
Table of Contents with its fancy dotted lines between the link and the created/published date, replaced with an approach using less markup, even if less reliable for all layouts. I felt this was a tradeoff worth making.
Every Layout3 - Sidebar layout gave a minimal, but capable 2 column layout (or main with sidebar). Like the previous design, but less overhead of markup and styling to achieve the same effect.
After all the work refactoring the CSS, the home page went from 18.09 kB to 8.94 kB. I’ll say 50%.
More on page size
50% request transfer reduction is great. Getting to less than 14 kB12 is important and a great achievement. Now we have single HTTP Request with a single packet response. Think of all the routing infrastructure between your device, and this site’s host. Now it’s only got 1 packet to loose (bad) but only 1 packet to retry (good).
But what about Gzip / Brotli?
The previous design, of course fell into the 1 packet threshold before, at ~9 kB compressed. But the new design is starting at under 9 kB? it’s now 3 kB (2.3 kB with Brotli). We’re under 1/4 of the available space in the packet, meaning we have a lot of room for content. My article on Minitest which is the largest on the site comes in at 11.5 kB transferred. Still within the 1 packet. My Resume complete with the silly SVG icons that should be removed, comes in at 6.62 kB. I might even be able to squeeze a headshot into the leftover space.
What else?
That’s pretty much it.
I made some miscellaneous changes to data structures for other refactoring, reuse of liquid snippets. Bumped Jekyll, and fixed a bug in my gems used to build and optimize CSS and HTML.
One thing I haven’t done yet, other than this post, is revisit the content. It’s time for a new Bio and introductory text, and some new posts about things that have been in my mind. But for now, vacation should be the only thing on my mind (this is not reasonable).
Reach out to me on Mastodon, or email with questions feedback or comments. I want to hear what you think. Is this optimization too much?