Website Optimization Measures, Part XVI

Published on November 12, 2022 (↻ October 21, 2024), filed under Development (RSS feed for all categories).

Just five weeks after the last episode, here’s the next collection of refactoring and optimization ideas. My last nights and weekends were busy.

1. Removing trailing tabs and spaces. Right on the train when I wrapped up Part XV of this series, I caught the refactoring bug and probed into whether in any of my repositories, trailing tabs or spaces had snuck in (despite settings to prevent that). They had. And so I cleaned up, and reviewed IDE settings, and set a reminder to check on this on a regularly (but infrequent) basis.

2. Reviewing HTTP headers. In one of those coincidences that one hates, I checked HTTP headers for a blog category, only to find the following:

   # curl -I https://meiert.com/­en/blog/categories/development/
   
   …
   link: <https://meiert.com/en/>; rel=canonical

   Yeah. That was actually not trivial to fix because of the system in use, having me resort to an emergency fix “unsetting” this header for some pages. I’m testing and refining—and passing this on as something to be aware of. This stuff happens.

3. Adjusting handling of site generator exports. I put my site generator exports under version control—for one, to have a better sense for what changed, for another, to make it faster to roll back if there are any issues. My setup so far has meant to store these exports in a monorepo in Bitbucket—but as the source repositories exclusively live on GitHub, and not to “pollute” said monorepo, I created an “exports” repository on GitHub, just for this purpose. I love it.

4. Making more use of cite elements. Having a way to mark up (or down) cite elements is my most-missed feature in Markdown, because I point to other works, using their titles, all the time. I noticed that on Frontend Dogma, however, I could but weren’t using cite to mark up all the various articles being pointed to—and changed that. (Now I’m thinking about not styling them in italics… but that, as you know, is now a formatting question, and not a semantics one.)

5. Experimenting with variable fonts. After running into v-fonts.com I felt I finally had to play with variable fonts. Frontend Dogma, again, looked like a great playground for that. The first tests were promising—until I found that the fonts I needed weighed 10 times as much as the ones I was using (Times, and you read that right). So, yes, no. I’ll play again, and probably write about that, too, but playing isn’t worth a tenfold font payload increase to me—the cost of problem isn’t high enough.

6. Adding “social logo” variations. Admittedly, on this site, the “brand” color (#c08) is a fairly… strong one. The meiert.com palette, however, works with much softer tones. I thought about this and wondered, why not use these softer colors on social media… and even rotate them? So I created four soft-color social logo variations, through which I now loop for every (English) blog post. As a test. What do you think, when scanning my Twitter timeline? [I wrote this before I moved to Mastodon.]

7. Refactoring no-break spaces. For the longest time I’ve used   for no-break spaces. Not anymore—for one, I learned to key in no-break spaces by hand (macOS: ⌥/option + space); for another, my editors, particularly IntelliJ IDEA and WebStorm, display no-break spaces so sufficiently, that that there doesn’t seem to be a need anymore to work with these characters by means of an entity reference.

8. Reordering metadata. I had run into Harry Roberts’ Get Your Head Straight presentation before, but some details escaped me—most notably his preferred elements order in the document head. I went for it—and reworked my projects to go by this order. I’m still testing, but also happily heeding Harry’s advice.

   During this refactoring, I also removed all meta elements declaring an encoding: All servers had always been set up to deliver everything as UTF-8—and because UTF-8 is the default.

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. (Please be critical, interpret charitably, and give feedback.)