What Is HTML Optimization? What Is It Not?

Published on December 5, 2024, filed under Development (RSS feed for all categories).

What is HTML optimization?

How do you define it? How do others define it? How do I define it?

Existing Definitions

According to the first (apparently AI-generated) Google result [a few months ago, when I pulled the definitions]:

HTML optimization may include such tasks as: minimizing the file size of images and files; adding appropriate META description tags; using valid HTML code; limiting the number of redirects; and making sure the page loads quickly. All of these tasks will help to ensure a smooth user experience.

Per the next usable Google result:

Use semantic tags […]

Organising your HTML code […]

Minimise code size […]

Image optimisation […]

Using CSS sprites […]

Combining and minimising CSS and JavaScript files […]

Caching static files […]

Using Content Delivery Networks (CDN) […]

Using asynchronous or deferred charging […]

Optimising metadata […]

ChatGPT, shortened:

HTML optimization involves improving the structure, code efficiency, and performance of HTML (HyperText Markup Language) documents. The goal is to make web pages load faster, be more accessible, and perform better on search engines.

(Do you second any of this?)

Another Definition

Identifying as an HTML optimizer (my Upgrade Your HTML book series is about nothing else, and so are many articles on this site), this feels like something I should have a clear idea about:

What HTML Optimization Is

• First and foremost, HTML optimization is about HTML.
• Then, HTML optimization is a process—it can be done once, but it’s best done on a regular basis.
  • As part of the process, HTML optimization includes staying informed about the HTML standard.
• HTML optimization is about ensuring that it’s HTML that’s being used, that is, it builds on validating HTML output and shipping valid HTML output. ^*
• HTML optimization is about improving HTML quality, like, where possible,
  • making more deliberate and purposeful use of HTML,
  • making better use of HTML elements (semantics),
  • making HTML code more accessible (unless a software responsibility),
  • making use of ID and class best practices to limit the respective code and to separate concerns ^†, and
  • writing HTML code that is consistent.
• HTML optimization is also about HTML quantity ^‡, as with
  • reducing HTML code (omitting optional markup),
  • minifying HTML code, and
  • compressing HTML code.

What HTML Optimization Is Not

• HTML optimization is not image optimization.
• HTML optimization is not CSS optimization.
• HTML optimization is not about “combining and minimizing CSS and JavaScript files.”
• HTML optimization is not about caching.
• HTML optimization is not about using a CDN.
• HTML optimization rarely is about adding metadata.
• HTML optimization is only a part of making pages load faster.
• (HTML optimization is not or rarely about a number of other things, though these things can and maybe should be done as part of other optimizations.)

❧ What would you include or exclude?

^* Not everyone may agree, but this can be argued to be a pillar of professional frontend development.

^† Sorry, hard vote for the first paradigm of web development here. (This is under “quality,” then, because it has a direct link to HTML maintainability.)

^‡ Sure, this can get philosophical, fast: Is what this lists really just “quantity,” or does it also relate to quality? I don’t think this matters so much here.

About Me

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 a contributor to several web standards, 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 experiences and views. (Please be critical, interpret charitably, and give feedback.)