Website Optimization Measures, Part VIII

Published on August 8, 2017 (↻ September 20, 2023), filed under Development (RSS feed for all categories).

Eight years. Eight years has it been since the last episode of this series, “Website Optimization Measures.” In October of 2009, I last talked about more or less random things I did on my own websites, back then covering unquoted attribute values, the q element, custom feed styling, work/life balance, and—Google Friend Connect. When was the last time we even heard about GFC.

• Moving to HTTPS. You can tell by last December’s tweet that this is a change long executed—a change to switch to SSL on all my websites. This has also been a very important change, notably because, to quote the EFF, standard HTTP makes us “vulnerable to eavesdropping and content hijacking.” And it was an easy change, too, thanks to the Let’s Encrypt effort and seamless integration by many providers. (I use ALL-INKL in Germany and DreamHost in the United States. I’m happy with both. Still.)

• Upgrading PHP. Involuntarily. Configured on PHP auto-update in DreamHost but with somewhat fixed settings with ALL-INKL I was forced to manually update to at least PHP 5.6. A no-brainer for pretty much all of my websites—except for one, this one, meiert.com. The reason dates back to a mistake made in 2007 (did I explain in my site meta post?), yet I won’t go into details here. Suffice it to say, I’ve made sure all sites work on PHP 7.0/7.1 and to put that one exception on a better defined upgrade path—to finally address the effects of that decade-old bad decision of mine.

• Removing all favicon references. I mean that old link element of an icon type. Many browsers have automatically checked for a favicon.ico in the site root for many, many years; for many years now all of them do (the most popular browsers, that is). Favicon references are not needed anymore, so there’s one more thing to leave out in our HTML.

• Aligning attribute order. After finding something like this on UITest.com—

  <link rel=alternate type=application/rss+xml href=/en/index.xml title="New Tools (RSS)">
  

  —I was shocked 😊 I found the order not to make sense. @rel first, yes. But @type next? No; @href seemed next important. Then @type. Last @title.

  <link rel=alternate href=/en/index.xml type=application/rss+xml title="New Tools (RSS)">

  This meant an order I made sure to follow in all projects. Yet, it also represents an overall interesting issue: Does attribute order matter? Should we standardize it? How? And I feel like this would open yet another Pandora’s box of standardization.

• Improving website responsiveness, through smarter use of breakpoints. Actually a tricky matter: The fewer breakpoints, the better (also to keep CSS DRY)—but as many breakpoints as necessary. I found that on meiert.com and uitest.com, additional breakpoints could help make the experience a little better. Done. (Side note: I’m a fan of limiting line length for readability purposes—and not a fan of blowing up font sizes. As such I still limit the width of the sites I’m designing.)

• Removing dates from URLs. Now this is something I used to be skeptical about, but after getting the suspicion that people may not even visit posts on this site when labeled with a long past date, even though I regularly review all writings, and then in order to keep URLs cleaner and shorter, I decided to take the post date out of blog URLs. You see what I mean with this post’s path: /en/blog/optimization-measures-8/.

• Pulling through on removing analytics code from all sites. I had spoken about removing analytics code when it’s not used. I had Google Analytics running on this site for a long while after. But as it only slowed everything down, and as the few looks at the data I took were of little value (to me—I know analytics to be invaluable, even critical, for other sites), I removed it here as well.

• Evaluating script execution order (and making better use of @defer). Confession: I would have sworn that @defer was not part of XHTML (and you know why that DOCTYPE is still used on meiert.com). But @defer is—@async isn’t. And so I reviewed the use of all scripts on all of my sites to optimize performance through both attributes, where possible (again, except for not using @async on meiert.com because of its DOCTYPE).

Speaking of swearing, I could have also sworn I’ve done a lot more on my sites lately—as you probably did on yours, too. But these things stood out, and I found them to justify reviving the series:

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

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m somewhat 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 (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!