Website Optimization Measures, Part X
Post from August 30, 2020 (↻ December 14, 2020), filed under Web Development.
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 on 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 with indie content owners, but in a way in support of everyone trying to making a living online with honest work—ad-blocking makes life quite a bit more difficult for content owners. Yet even in empathy with 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 (or any) 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
bodybackground color compounded, and feedback from Michal Čaplygin, who had noted issues before, led me to the conclusion that the
filtersolution 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 exactly not-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 were mostly 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 rather very 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.
Header setdirectives. I never really looked into this
Headerdirectives, until I learned it matters and found that I had it set up inconsistently (some directives used it, others didn’t).
alwaysis 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 the tenth part of an open article series. There are ten additional articles on website optimization, part I, part II, part III, part IV, part V, part VI, part VII, part VIII, part IX, and part XI.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.