Website Optimization Measures, Part VIII

Post from August 8, 2017 (↻ August 10, 2021), filed under Web Development.

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, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. 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 a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!

Read More

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

• On Adventure
• Living Websites, Living Books

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