Website Optimization Measures, Part XXVII

Published on October 24, 2024, filed under Development (RSS feed for all categories).

¡Hola! to part 27 of that series that started in 2008 and that I use to share improvements and lessons from the work on my personal projects, allowing you to pick what you think could benefit yours. 👋

1. Optimizing Eleventy performance (a continuation of what I described in the last episode). After suspecting Eleventy export time for Frontend Dogma to have tanked over the previous weeks (from about 45 to 60 seconds on a sluggish 2019 Intel iMac), I spent a few hours tweaking my Eleventy configuration as well as my Eleventy templates. Template optimization led to some improvements, but the biggest one was tailoring my html-minifier config. One of my toots shares the perspective back then. If you use Eleventy and perf is good, probably nothing to concern yourself with. But if it’s slow, this may give you some pointers.

2. Upgrading to Eleventy 3. Not usually an “optimization” to call out, but I do so here as an unsolicited reminder that keeping dependencies up-to-date is mandatory (and typically easy with common dependency management tooling). In my three Eleventy projects, I used the Upgrade Helper to check on any issues—of which there were none. In the end, a manual update, but not one where I faced breaking changes. (I used it also to upgrade Eleventy’s RSS plugin, which wasn’t possibly over that having been rolled out… early.)

3. Switching to Lightning CSS. I have a custom setup for my multi-repo projects, doing some optimizations through a global projects umbrella. Through that, I perform supra-project activities like minifying HTML, CSS, and JavaScript. On the CSS side I worked with PostCSS, cssnano, autoprefixer, and all that jazz. That felt both too complicated and dated, and I decided to clean up and switch to Lightning CSS instead. First impressions: Performance is noticeably faster, and I love that I could axe the browserslist dependency, too (Lightning CSS can pick this up through an entry in the package.json). On the other hand, some style sheets actually became larger, and I missed more configuration options.

4. Stopping to use the url filter in Eleventy. Accidentally I learned that I might not need the url filter I think I’ve been using ever since I started working with Eleventy—and that it only (but significantly) slowed export times down. On removing it, there was no effect other than improving performance (again!). I hate–love this stuff, and am just happy I bumped into this!

5. Re-compressing all project images. After a significant update to Imagemin Guard, I ran the tool over my entire code base to test but also catch any images I could compress further. I managed to save a few MBs of image payload, which, given strong habits and automation for image compression, I hadn’t expected.

6. Unsuccessfully testing Apache support for “early hints.” My shared hosting provider has something turned off, so that my server exploded.

7. Removing ads again. For a few months I tested EthicalAds. The income was not nearly what I used to earn through Google Ads, which I had removed about a year ago, and ultimately not enough to warrant the tax on user experience.

8. Adding Fediverse creator metadata. I decided to test “creator” meta information for Mastodon &c.:

   <meta name="fediverse:creator" content="@j9t@mas.to">

   If you’re following suit, make sure to update your settings…

9. Customizing Google CSE (custom search) settings. I know, I should say “PSE” or “programmable search engine” instead—which I use on meiert.com, on WebGlossary.info, and now also for Frontend Dogma. Keeping the not-so-long story short, I reviewed and tweaked all sorts of settings, of which there are many, and of which some are pretty cool—it’s worth going through them if you use CSE/PSE, too.

This is a part of an open article series. Check out some of the other posts!

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Be critical, interpret charitably, and give feedback.)