Website Optimization Measures, Part XV

Published on October 4, 2022 (↻ July 1, 2023), filed under Web Development (RSS feed for all categories).

You can (and really should) update your websites on a regular basis, because web design is a process and because you grow more and can balance cost and priorities better. But this old article series isn’t about what you “should” do, but what I recall from having done on my own, largely personal projects. If it benefits your own projects, too—perfect!

1. Upgrading to Imagemin Guard! I hadn’t even published Website Optimization Measures XIV when I took note on this—after Merlin didn’t seem to get maintained anymore, I forked the project to get it updated and add more features—and make sure there’s a maintained solution to ensure automatically, losslessly compressed images in every repository. I upgraded from Merlin, and suggest you to give Imagemin Guard a try, too. (Let me know how it works for you!)

2. Falling for the promise of a mini dark mode. Yes, again, and I won’t say more… well, actually, this time it works though! It took Heydon Pickering’s Inclusive Components to lead me into the right direction. Thanks.

3. Removing favicon references. The eternal favicon dance! Favicon markup should be simple (none), but Firefox for Android was one of those browsers that needed it. No more! That allowed me to remove (first, comment) this markup from all my properties. Fingers crossed 🤞

4. Moving prerenders to the server side. Removing prerender, for now. I’m a fan of resource hints, and have been working specifically with preconnect (for CDNs) and prerender. But prerender is hard to test, and when I wanted to move this from the client to the server side, I ran into a few issues. My tweet from that time has some context; Dan Shappir tipped the scale for me to drop prerender—for the moment, until it’s stable, until I can test it. And configure it on the server side.

5. Ensuring a stronger separation of “global” and “local” images. For small to medium-size projects, I found a flat structure for images and media contents to work well: Store them all under /media. (This has proven useful over nearly one and a half decades.) But—media that are used by only one article, are better to be stored alongside that article. This way, the global media folder isn’t being polluted, and article refactorings are easier, too. In this optimization case, I went through my global folder and found some images that were used only locally—so I moved them there. That’s it.

6. Reworking promotions… There’s a fine line, it seems, between making your work visible and sharing it with others, and rubbing it under their nose and annoying them. I wasn’t sure anymore where the scale was with respect to some promotions on this site—like for my books—, so I reviewed and rephrased them, to make their value more clear. You let me know whether this worked, please.

7. Reworking WordPress functionality—like shorter month formats and additional page navigation options. Once you’ve been blogging for 100 years, your archives will get extremely long, and so do lists of archive links. The meiert.com archives cover more than 150 months by now, and as I like to spell out months (as in “October 2022”), the respective lists get unwieldy. To keep it short, I optimized this by moving to a three-letter spelling (“Oct 2022”), and then got caught in testing and tweaking other site navigation options. All directly in WordPress templates, per one of my oldest and biggest blunders as an engineer… a story I’ll tell you another time.

8. Adding theme colors—despite their messiness. Support seemed okay and I was curious, so on pretty much all of my websites, I set a theme color. Not in the way I would like—through CSS, which could also offer a valid and maintainable way to address both light and dark mode—, but in a way that just barely overcame my preference for HTML purism. A test. Don’t judge me.

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 close to W3C and WHATWG, 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 views and experiences.

If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback for me to fix issues, learn, and improve. Thank you!