Jens Oliver Meiert

HTML and Performance: Leave Out Optional Tags and Quotes

Post from January 29, 2019, filed under .

Let’s start right with the (simplified) central argument.

P.1 The smaller the HTML payload of a website, the sooner the website will be displayed.
P.2 The sooner a website is displayed, the faster it will be (appear).
P.3 Leaving out optional tags and quotes makes HTML payload smaller.
C Therefore, leaving out optional tags and quotes makes a website faster.

This is an old argument (I myself have argued this way at least since 2008).

Contesting the Premises

The argument is at times contested through doubting premise P.1:

P.1 The smaller the HTML payload of a website, the sooner the website will be displayed if compression (like GZIP or Brotli) doesn’t happen to work more effectively with the larger payload.

It can also be contested through attacking premise P.2:

P.2 The sooner a website is displayed, the faster it will be, unless inserting back the omitted DOM nodes takes more time than is saved through the decreased payload.

I’ve usually dismissed the concern around P.1, because in various tests at Google, I had observed about 10-20% markup savings and nothing in compression to outweigh these. I actually haven’t heard anyone raise the one around P.2, but even though small, it looks like a valid concern to me.

Saving the Premises

There are two, incidentally the same, problems with both attacks on the premises:

  1. They’re conditional: if compression is more effective in reducing the payload, and if node re-insertion is slower than the wins made through payload savings.

  2. They lack data: Both cases are, to my knowledge, barely researched.

The second problem is on the one making the case, here me, to deal with effectively. We who are researching HTML performance will need to gather and publish more data on the effects of the different ways of writing HTML.

The first problem, however, is grave in that there are websites that don’t employ any compression (many sites, in fact: as of January, 2019, 22.6% of all websites), and then sites that will not be slower than before through node re-insertion.

Although we’re still left with a lack of more data, the central argument appears to be cogent. (My view, disassemble it.)

Leave Out Optional Tags and Quotes

With this said, the original argument suggests one course: At a minimum, in our production markup we should leave out all optional tags and quotes in order to reduce payload and thus make respective sites faster.

What HTML tags are optional is documented for HTML 4 and easy to tell for living HTML, for what can be omitted is described for each element (see e.g. the html or p elements).

For quotes, the HTML spec is clear: As a rule of thumb, unless an attribute value contains a space or an equal sign, the quotes should be safe to be omitted.

Leaving Out Optional Markup in Practice

Ironically, some developers seem to have an inclination to refuse to omit optional tags and quotes, out of hand. I’m not here to judge, but this is ironic for two reasons:

  1. Omitting optional tags makes markup more readable. There’s no shorter valid document than <!DOCTYPE html><title>␣</title> (gist), and nothing more readable and understandable once the first contents go in. (I’d love to see a cogent argument how including everything optional made HTML more readable and understandable. We omit and simplify, for good reason, in a great many other languages—although a bit different, JavaScript’s ternary operator looks like a nice example. It’s obscure AF and yet it represents an absolute minimum, just like markup stripped of optional tags and quotes.)

  2. Optional tags are already and quite consistently left out for tables, as the tbody element may demonstrate the nicest: It’s almost always left out even though it’s put back in by the browser just as those optional html and body and many other start and end tags would.

Personally and as a fan of us being capable of writing production-ready code by hand, I wouldn’t want to be too pushy here to adjust our individual development practices.

Our best bet may be something else: If we choose not to write efficient and fast code by hand, as with leaving out optional code, we absolutely need to generate that code. As barely any tooling so far leaves out optional markup (anything solid other than HTMLMinifier?), what we should rather emphasize and prioritize is to improve our tooling.

Put another way, as experts and unless there’s strong reason to do differently, I believe we should know what code is optional and leave it out. At the same time, our production systems should do a better job assisting us with that. After all the years of neglecting basic HTML optimization, let’s think about taking the next step and not ship optional HTML markup.

Controlling his fiery pride [Val] sets about his duties with a will.

Figure: What in a craft is duty? (Copyright King Features Syndicate, Inc., distr. Bulls.)

I’m sure to have overlooked data and tools—please share anything major, if you’d be so kind (Steve, Ilja, perhaps Harry?). When it comes to walking my own talk, as I intentionally make my developer life difficult I do run several projects that make use of the practices recommended here: see e.g. entirely static UITest.com, or statically generated HH Kaffee and its source (this very site is a documented exception). Just like using declarations just once in CSS, it works.

About the Author

Jens Oliver Meiert, photo of December 23, 2018.

Jens Oliver Meiert is a tech lead and author (sum.cumo, W3C, O’Reilly). He experiments with philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Goodreads. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Read More

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

Say hello on Twitter or LinkedIn.

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

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2019 → HTML and Performance: Leave Out Optional Tags and Quotes

Last update: January 29, 2019

Awareness, honesty, responsibility.