The Club Racer Treatment

In 2022, I wrote a post called The Lotus philosophy applied to blog design, in which I was trying to explain how the Lotus philosophy of lighter cars for improved performance could apply to web design, and to my blog in particular. I wrote:

For as long as I can remember, I’ve been a fan of Lotus. From the Esprit featured in The Spy Who Loved Me (1977), the one in the Accolade’s Test Drive video game from 1987, to my fascination with the choices made by the engineers with the 900 kg Elise (and later the Elise CR): Lotus is more than a simple car brand, it is a way to think about product design […]

The most acute observers probably noticed my mention of the Lotus Elise CR. This car is, to me at least, a fantastic example of what a company can do when driven by principles and a well laid-out order of priorities.

The Elise CR, which stands for Club Racer, was basically a special edition of the regular Lotus Elise, with various modifications aimed for better handling on the track, that was lightened by about 25 kilograms compared to the base car.¹

One may think that a weight reduction of around 3% is nothing, that it doesn’t matter, and that it may not influence performance that much. And to be honest with you, I don’t really know. I just know that I was always fascinated by the engineering that went into saving those 25 kg out of a roughly 900 kg car.

Compared to the regular Elise, the CR had its seats fitted with less padding, its floor mats were removed, it had no radio, no A/C, and even the Lotus badge on the back was a sticker instead of using the usual metal letters. The result was a car marginally faster, slightly better to drive, less comfortable, and less practical. If you planned to drive a Lotus Elise on regular roads, you’d be better off with a regular Elise. The Club Racer was a prize among purists, it was a demonstration of what could be done, and I loved that it existed.²

In its essence, the Club Racer was not about the results on paper or the weight itself, it was about the effort, the craft, and the experience. It was about giving a damn.

For a while now, I’ve been generally happy with this site’s design, which feels very much in line with this Lotus philosophy. But there was always an itch that I couldn’t ignore: a Lotus Elise was great, but what I really wanted was a Lotus Elise CR.

This is why, in the past couple of… checks notes… weeks, I spent hours and hours giving the Club Racer treatment to this website, for very marginal changes.³

Now that all of this tedious, frustrating, and abstract work is over, I don’t even know how much weight I saved. Probably the equivalent of the Elise CR’s 25 kg: meaningless to most, meaningful to a few. Like I said, it wasn’t really about the results, but about the effort; it was about getting my hands dirty. Today, I am quite happy with the choices I made and with what I learned in the process.

To make sure my project had structure, I needed to identify which were my top 3 priorities, and in which order they needed to be. Obviously, weight saving was one of them, but did I really want to put it above all else? The Lotus Elise CR was about performance and driving experience, not weight saving. Weight saving was just a means to an end. For a blog like mine, the driving experience is obviously the readability, but I also wanted my site to pass the W3C validator, and keep its perfect score on PageSpeed Insights (that’s the performance bit).

I ended up with priorities ordered like this:

1. Driving experience / Readability
2. Performance / W3C validation & PageSpeed Insights scores
3. Weight saving

Driving experience / Readability

I decided to stick to a serif typeface, to make this website as comfortable as possible to read, just like a page of a paperback novel would be. I have been using STIX Two Text for a while now, and I really like it: it feels a lot like Times New Roman, but improved in every way possible.

Not only I think it looks great, but it comes preinstalled on Apple devices, it is open-source, and if a visitor falls back on Times New Roman (via the browser default setting for serif), the site maintains enough of the typography to make it just as nice to read: line length, line height, size rendering, etc.

Also with readability in mind, I’ve decided to keep the automatic light/dark mode feature, along with the responsive clamp feature for the font size, as it makes text always nicely proportioned compared to the screen size. (Update: got rid of clamp too: turns out 120% is fine on all screens.)

Performance / W3C validation & PageSpeed Insights scores

I certainly could have removed even more than I did, but I wanted to keep the 100 score on PageSpeed Insights and pass the W3C validator. This is why I still have a meta description, for example, and why I use a base64 format for the inline SVG used as the favicon. I kept — for now — some of the “branding” elements for good measure, even if what I feel is the visual identity of this site mainly revolves around its lightness. Even a Lotus Elise CR has a coat of paint after all.⁴

I could shave even more bytes off this site if the default browser stylesheets weren’t being needlessly updated.

But a Club Racer treatment is only fun when talking about weight saving, so let’s get to the good stuff.

Weight saving

This is what I removed:

• Airbags: The <head> HTML tags, as I learned that they are optional in HTML5, as are the <body> tags: If you look at the Elements tab of the browser Web Inspector panel, both are automatically added by the browser, I think.

• Floor mats: The quotation marks in most of the elements in the <head> but also on some the permanent links (I didn’t go as far as reworking the Markdown parser of Eleventy to get rid of them in all href attributes, but on the homepage and other pages, each link is now 2 bytes lighter — at least before Brotli compression and other shenanigans).

• Power steering: The line height setting for headings.

• Foam: The padding left and right for mobile view. (Update: it’s back via a different margin value, see bottom note)

• Sound isolation: A lot of unnecessary nodes in the homepage, now leaner and lighter, at the expense of extra CSS: very worth it. This includes the summaries for Blend of links posts that felt very repetitive.

• Air conditioning: The little <small> tags around the “by” of the header to make it 16% smaller. I liked you guys, but you had to go.

• Radio: The highlight colour, #d92 used since 2020 on this site, mostly as the bottom border colour for links: it felt distracting and didn’t work well in dark mode.

• Metal logo: text-wrap:pretty for headings. This CSS feature makes titles look great, but for most of them it wasn’t even needed on desktop.

• And a bunch of other little things that I mostly forgot (I should have kept a log).⁵

To you dear readers, if you’re not reading this in an RSS reader, this site won’t feel any faster than before. It won’t even look better. If anything, it will look slightly worse and for that, I’m sorry. Well, not really: I’m actually very happy about what has changed, and I think it will make this site easier to maintain, and easier to be proud of.

On top of the weight-saving, I also worked on improving my local Eleventy setup, reducing dependencies and the number of node modules. I’ve mentioned this on my Now page, but the site now compiles in 1.5 second on my Intel-Core-i5-powered MacBook Air, which is roughly 2–3 times faster than before.

I guess this is when you have an underpowered engine that weight-saving and simplifications are the most noticeable. More noticeable than on the website that’s for sure. I hope that when I finally upgrade my computer, probably next March, I won’t get fooled by the hugely improved chips on the newer Macs, to the point of forgetting Colin Chapman:

Adding power makes you faster on the straights; subtracting weight makes you faster everywhere.

Happy holidays everyone.

・・・

20 Dec update: You may also notice that the text column is no longer centred: it’s on purpose. I like this new left-anchored, edgy look, at least for now (and it doesn’t even matter on mobile). Only 2 bytes shaved in the process, but it feels less “imposed.” I may have been influenced by Christopher Butler’s blog for that one.