Website Optimization Measures, Part XV
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!
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!)
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.
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 🤞
prerenders to the server side.
prerender, for now. I’m a fan of resource hints, and have been working specifically with
preconnect(for CDNs) and
prerenderis 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.
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.
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.
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.
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!
I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, 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, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Maybe of interest to you, too:
- Next: A Short Story of the Google Error Page
- Previous: HTML Concepts: Browsing Contexts
- More under Web Development, or from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.