Website Optimization Measures, Part X

Published on Aug 30, 2020 (updated Sep 20, 2023), filed under development, optimization (feed). (Share this on Mastodon or Bluesky?)

This is part of a series about website improvements. How it works? I casually talk about some of the latest changes to my personal websites, to share ideas but also to validate assumptions. Let’s go: There’s always something to do if you run your own website.

• Removing more optional markup. This site has a long history. As I walk my own talk I iterate on it constantly, and usually test here the optimizations I advise and write about. In this optimization step I used my own primer on optional markup (and some tooling) to remove technically unnecessary HTML. As opposed to projects like UITest.com, the optional HTML is not all gone now—but, with this site’s roots lying in past XHTML times, it’s become less once again.

• Adding a fallback for ads. I respect ads, and I don’t block ads. I do this in empathy especially for indie content owners, but in a way in support of everyone trying to making a living online with honest work, because ad-blocking makes life quite a bit more difficult for content owners. Yet even in empathy for those who like to protect their privacy I do see severe issues with the whole idea of ad-blocking. For that reason I haven’t put my websites behind a paywall—I think little of these, and may not even be able to afford a commercial one—, but put up a fallback that reminds of the twist: Blocking ads prevents content owners from providing more good content.

• Enabling dark mode. Although a dark mode skeptic, minimal code attracts me. filter: invert(100%) hue-rotate(180deg); really attracted me, bad, back in June. And so I implemented it on meiert.com and uitest.com as well as in my “Transparency” theme on Style Stage.

• Disabling dark mode. A few weeks after enabling dark mode, the problems I had observed around some user agents requiring to be explicit about, say, a body background color compounded, and feedback from Michal Čaplygin, who had noted issues before, led me to the conclusion that the filter solution was not robust enough. Yet. I still need to investigate further, but for the time being built back that otherwise neat (almost) one-liner dark mode.

• Tweaking branding (colors). A matter usually of redesigns, I was drawn into the topic of color optimization for my Meiert family logo. For about 14 years I’ve used it in black; then it hit me that that could be too crass even in contrast to the not-exactly white and the light grays otherwise used on this site. So I experimented and, off the top of my head, quickly converged on #333, then tested against #222, then compared both against #111, which I kept. What do you think?

  (I do have a thing for three-digit hex codes, but I don’t use them exclusively.)

• Implementing a CDN (again). I’ve been running websites since 1999, when there was no “cloud computing”; and as these sites have mostly been small there hasn’t been much of a need for any “cloud hosting,” either. However, most of my sites are international, and with shared hosting you face an ugly truth: The further away you get geographically, the slower your sites will appear, no matter how else you optimize for performance.

  At first I contemplated moving all my sites over to AWS or Google Cloud Platform, however that seemed like overengineering the solution and making it expensive—it would have meant to revisit the whole process of how I work with my sites, maybe even changing the tech stack of some of them. Then I looked at different CDNs, which I hadn’t for some time, including some of the top players like Cloudflare, Fastly, Varnish, and KeyCDN. The one that caught my eye, however, was BunnyCDN—great coverage, easy to set up, affordable pricing. I tested BunnyCDN on smaller sites for a few days before rolling it out to all my international sites. The result has been a significant boost in performance for international visitors, and I’m very happy with this step as an economic and efficient optimization measure. It’s strange now to think that I had done without a CDN for so long: Last I worked with them for my own projects must have been around 2008. Try BunnyCDN by the way—I’m a fan now.

• Preconnecting to the CDN. To improve performance further I also made sure to preconnect to the CDN, through, which is often preferable, an HTTP header. For meiert.com, for example, I set it up like this in the main .htaccess (remember, shared hosting):

  Header always set Link "<https://meiert.b-cdn.net/>; rel=preconnect"
  

• Enabling and optimizing Content Security Policies. Last year I implemented CSPs for some of my projects; over the last weeks I’ve implemented them for almost all of them, and used Sentry to refine the policies. You can tell that still not all projects work with a CSP, and that some more tweaking may be required, but I won’t add such updates to future posts of this series. Promise.

• Reviewing Header <ins>[always]</ins> set directives. I never really looked into this always condition in Header directives, until I learned it matters and found that I had it set up inconsistently (some directives used it, others didn’t). always is there to indicate a header to be issued on every response, instead of onsuccess; I used that to evaluate and edit respective directives, to make sure they are indeed set when they matter.

This is it! And:

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

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)