Web Performance Calendar

The speed geek's favorite time of year
2021 Edition
ABOUT THE AUTHOR
Jens Oliver Meiert photo

Jens Oliver Meiert (@j9t) specializes in HTML and CSS optimization. He's the author of several books about web development (like “Upgrade Your HTML” and “The Web Development Glossary”), and works as an engineering manager for LivePerson. For thoughts about the craft of web development as well as googley engineering management, follow Jens's work on meiert.com or on Twitter.


As a rule of thumb, you can say that the smaller the payload of a website or application, the faster it is. While we are used to reducing payload by identifying critical and minifying all code, compressing files “at rest” and in transit, and bundling resources, we don’t pay that much attention to HTML payload. We miss that, even though an overly large HTML payload unnecessarily delays subsequent requests.

Fortunately, HTML comes with a great option to reduce its weight: Not all of the tags, not all of the quotes (around attribute values), not all of the attribute–value combinations are needed.

Tags, Quotes, Attribute–Value Pairs

There are about two dozen tags that can be omitted. In large documents this can lead to a significant payload reduction. (“10–20%” was an early number, and we still need a larger study to provide mean and median of to-be-expected savings.)

For quotes around attribute values, you can apply a rule of thumb: When an attribute value doesn’t contain an equal sign or a space, it’s likely okay to skip the quotes. (As always, the devil is in the details.)

There are also more than a dozen attribute–value combinations that can be omitted, too. type=submit on button elements, for example, or method=get on forms—that last one may be the most popular unneeded attribute–value pair there is.

HTML Minimalism

An HTML professional and purist would argue that one should know all of this by heart. They might also argue to write production HTML like this, because HTML documents can be amazingly concise:

<!DOCTYPE html>
<title>Hello World</title>
<h1>Hello World</h1>
<p>This is only an example.

This is a perfectly valid document. It’s much easier to learn and write HTML like this—but many have learned HTML “the XHTML way” and are not aware of how much of it isn’t actually needed. (The author is writing a book about learning HTML this easier way. Stay in touch!)

Tooling

If you choose to use less HTML but don’t like to do that yourself, there’s of course tooling available. The go-to solution is html-minifier (free input version) by Juriy Zaytsev, which allows for removal of all this optional markup, and more.

The “MVP” approach is to use tooling like html-minifier to automatically remove all optional HTML from your output. If you want more, you remove optional HTML also from your development code. And if that isn’t enough, you can also adopt using only required HTML, by writing it by hand.

Whatever your preference: Removing optional HTML helps you build faster sites.

2 Responses to “Faster Websites by Using Less HTML”

  1. Eroan Boyer

    Hi, thanks for this focus.
    BUT with gzip/brotli compression is it really faster ?
    There are many downsides to this pratice :
    – code readability
    – resilience / update-proof
    AND how does browsers manage this when building DOM tree ? Since they add missing tags, I wouldn’t be surprised if it was (a tiny bit) slower.
    In modern JS-driven websites/apps, what matters is DOM size and removing quotes and closing tags doesn’t change that.

  2. Jens Oliver Meiert

    Hi Eroan—even with compression it’s faster (smaller), though the effects can be marginal depending on the document. (We do have data, including edge cases. Leaving out optional markup is not a new technique though, so I’m looking into retrieving past work on it. Will update.)

    Code readability should be better (note that leaving out optional code, like an </p>, is different from so-called “magic code”). It’s normal that for developers being used to the XHTML way of writing HTML, this seems unusual.

    The last point, on DOM tree construction, is fair as it’s least researched. The argument assumes that DOM tree construction is faster than the alternative of writing, maintaining, storing, and transferring larger documents.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
And here's a tool to convert HTML entities