Jens Oliver Meiert

Website Optimization Measures, Part XII

Post from June 21, 2021 (↻ August 10, 2021), filed under .

“Website Optimization Measures” is my super-old series on random things I do and improve on my websites (like meiert.com, but also 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 shaping the security footprint 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 point to 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 offered only one channel, 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 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 half a 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:

    WhatsApp link preview on Android, lacking an icon.

    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.

    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!

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2021 → Website Optimization Measures, Part XII

Last update: August 10, 2021

Professional frontend developers produce valid HTML and CSS.