Website Optimization Measures, Part XIII
A fresh installment of the series, today some notes and observations on improving SVG and HTML, styling emphasis and code, and making better use of images. (If you’re new to these entries, here is where I casually share improvements to my personal projects.)
titles to SVG files. Quite randomly poking at and optimizing SVGs in my projects, I noticed how many of them had no meta data, no nothing about their contents. That looked like a missed (accessibility) opportunity, and after validating a few tests I decided to make sure each SVG, starting with logos, had a
titleelement that could represent the image. Is it good practice? I believe yes.
Revisiting html-minifier settings. I have a standard config for html-minifier, however as I’m constantly studying HTML (I completed the pilgrimage!), I questioned and reviewed the old setup. You can check my latest setup in the Eleventy config for Frontend Dogma. (I’m taking note to talk more about special cases, like not removing all quotes, and not always minifying HTML.)
Reviewing use of
@autocomplete. I’m collecting string for these posts for months, and in this case I don’t know anymore what I did 😂 But, I’m sure, it led to better use of the
Adjusting styling for
strongelements. As a great exercise in semantics, I’ve run a few projects where I styled
strongelements the same way. (This way, you can’t go by appearance, you have to go by meaning.) But for design reasons, on this website, I changed this, so that both
strongare still using italics, but
strongemphasis also gets a background color. What do you think?
Styling code blocks! I thought about this for many years but couldn’t get myself to add the needed code (minimalism). Then, running into highlight.js (and “inheriting” Prism from my Eleventy projects), I thought about it again. And I added highlight.js to meiert.com, injected only when a code block is actually present, and leaving it to highlight.js to figure out the type of code. That finally reconciled my preference for minimal code with the added usability of syntax-highlighted code samples.
Adding back favicon markup ☠️ How ironic, no, given how I had written that the ideal favicon markup consists of nothing. But the user agents you yourself are using are powerful, and Firefox on Android has this issue of not using (or discarding) smaller-size favicons. Yet favicons serve a purpose and they’re useful, and therefore I grudgingly and—oh please, dear All-That-Is!—temporarily added
linkelements to my projects, pointing to each of their favicons.
Switching to large social images. For every personal project, I prepare one large “social logo.” For historic reasons, however, I used markup—the most minimal social markup I could identify at the time—that didn’t take advantage of that. At first suspecting problems with the specific dimensions of these images, it turned out that, for Twitter, all I had to do was to switch from
<meta name=twitter:card content=summary>
<meta name=twitter:card content=summary_large_image>
Done. You can see said “most minimal social markup” in action on any of my projects—like in the Eleventy base template of Frontend Dogma.
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 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!
Maybe this is interesting to you, too:
- Next: What Makes You a Professional Web Developer
- Previous: 25 Additional Web Development Terms You May Not Have Heard Of
- More under Web Development, or from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.