Website Optimization Measures, Part XIII
Published on March 5, 2022 (ā» August 27, 2023), filed under Web Development (RSS feed for allĀ categories).
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.)
-
Adding
title
s to SVG files. Quite randomly poking at and optimizing SVGs in my projects, I noticed how many of them had no metadata, 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 atitle
element 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 (and completed the pilgrimage!), I questioned and reviewed the old setup. You can check the latest 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 theautocomplete
attribute. -
Adjusting styling for
strong
elements. As a great exercise in semantics, Iāve run a few projects where I styledem
andstrong
elements 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 bothem
andstrong
are still using italics, butstrong
emphasis 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
link
elements 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>
to
<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 [and in a later article].
This is a part of an open article series. Check out some of the other posts!
About Me
![Jens Oliver Meiert, on September 30, 2021.](https://d3rdtowr0c5lpf.cloudfront.net/media/meiert-20210930.jpg)
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 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 for me to fix issues, learn, and improve. ThankĀ you!
Read More
Maybe of interest 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
- More from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled,Ā unfortunately.
![Cover: The Web Development Glossary 3K.](https://d3rdtowr0c5lpf.cloudfront.net/de/publications/books/the-web-development-glossary-3k/cover-s.png)
Get a good look at web development? Try WebGlossary.infoāand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, andĀ Leanpub.