Website Optimization Measures, Part XII
“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.
upgrade-insecure-requeststo 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-requestsdirective. That was so useful, I made it a standard ingredient of all my own projects, too.
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.
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.
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=()
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
relattributes? Not now, but they are worth keeping an eye on.
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.
“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:imageHTML 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!
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: Use the “i” Element, and Use It Appropriately
- Previous: HTML Concepts: The “Nothing” Content Model
- More under Web Development, or from 2021
- 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.