Website Optimization Measures, Part XII

Published on June 21, 2021 (↻ October 8, 2023), filed under Web Development (RSS feed for all categories).

“Website Optimization Measures” is my super-old series on random things I do and improve on my websites (like meiert.com, uitest.com, frontenddogma.com, hhkaffee.com, and others). Here are some of the things I worked on over the last few months.

1. Adding upgrade-insecure-requests to all content security policies. I like CSPs! They require managing, but they’re a useful tool for setting security guardrails of a website. Although I had acquired a good level of working knowledge of CSPs, with Jimdo I ran into the situation where we couldn’t easily upgrade a number of resource references from http to https. Having initiated the introduction of CSPs for jimdo.com, I researched a bit and found that there was a solution for our problem: the upgrade-insecure-requests directive. That was so useful, I made it a standard ingredient of all my own projects, too.

2. Making promotions more useful. I’ve been writing for O’Reilly, and I’m writing independently. As such it makes sense for me to showcase my writings. However, the way I presented my titles (see the blue boxes on many pages) wasn’t that useful—they didn’t link to more information, and also pointed only to one seller, one that potential readers wouldn’t necessarily use. I reviewed the respective promos, made it easier to find more information, but also to visit the main sellers. Win/win—I hope.

3. Avoiding and editing out a number of words and phrases. My editor is awesome. She helps me identify and fix issues in my publications. In our work, I also learned to pay attention to words I could avoid. (A PDF from the Plain English Campaign gave me a good overview.) Over the course of a number of weeks I used a reminder to edit things like “quite,” “really,” or “very,” also in my books, and to improve the respective writings.

4. Opting all websites out of Google’s FLoC (Federated Learning of Cohorts), as also mentioned on Twitter. There’s a lot of criticism for FLoC, and easy ways to opt out, both which I used to add a one-liner to my Apache configurations:

   Header always set Permissions-Policy: interest-cohort=()

5. Making more use of link types. Connected with (and explained in) chapter 6 of Upgrade Your HTML III, I focused on meiert.com’s use of link types. For the search fields, which have a fallback to the underlying Google CSE, I added rel=search. Whether I’ll add more rel attributes? Not now, but they are worth keeping an eye on.

6. Reviewing and refactoring meta information. Part of regularly reviewing all my websites (this is a lot of work! I love it more than I loathe it), I noticed inconsistencies in how I handled talks and interviews featured on the German part of this website. This led to a thorough review of how I wanted to present where I gave a talk and with whom I had an interview, and reflecting that in page headings and titles. You get an idea of where I came out on my Publikationen page—I adopted the system I’ve been using for pro bono translations.

7. Adding VG WORT markers. The VG WORT is a German organization that manages and distributes royalties for authors and publishers. As an author and publisher, the VG WORT helps sustain my work. As the privacy policy explains, some articles are counted—anonymously—to allow for fair royalty distribution. I’ve reviewed my VG WORT setup.

8. “Fixing” social markup for WhatsApp (and not doing similar for Firefox Android). In a chat with a friend I noticed how WhatsApp was not showing preview images for my sites anymore:

   

   Figure: WhatsApp preview for HH Kaffee.

   That looked little appealing and desirable. I investigated and found that WhatsApp failed to display the preview icon when the respective og:image HTML code was not put in (optional) quotes. Temporarily, I added quotes back, but I also contacted WhatsApp to get this fixed: Not only does the issue look like a regression (I could swear this used to work), the cases in which the preview didn’t show also all used perfectly valid HTML. Valid HTML should work, also in WhatsApp. [I took all of this into account when sharing how minimal social markup would look like.]

   As for Firefox Android: That browser appears to need an explicit <link> reference to a favicon in order to display one, even though other Firefox browsers don’t need that, and even though the spec suggests to look at /favicon.ico for a fallback. In this case, I didn’t make any changes to my sites, but updated an existing bug report.

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

About Me

I’m Jens, and I’m an engineering lead and author. 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.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

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.