In this article, we’ll go over the two main methods for shrinking HTML files, why HTML files should be shrunk, and how to go about it.

Compression vs. Minification

As far as optimizing HTML files, there are two main methods for it: compression and minification. They sound similar on the surface, but are actually two distinct techniques, so don’t get them confused.

Minification

You can think of minification as the removal of unnecessary characters and lines in source code. Think of indentation, comments, empty lines, etc. None of these are required in HTML — they exist to make the file easier to read. Trimming these details can shave down file size without affecting anything.

Sample HTML page:

<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<div><img src="clouds.jpg"></div>
<h1>This is a Header</h1>
<p>Send me mail at <a href="mailto:support@yourcompany.com">support@yourcompany.com</a>.</p>
<p>This is a new paragraph!</p>
<p><strong><em>This is a new paragraph in bold and italics.</em></strong></p>
</body>
</html>

Sample HTML page, minified:

<title>Your Title Here</title><div><img src=clouds.jpg></div><h1>This is a Header</h1><p>Send me mail at <a href=mailto:support@yourcompany.com>support@yourcompany.com</a>.<p>This is a new paragraph!<p><strong><em>This is a new paragraph in bold and italics.</em></strong>

Original size: 354. Minified size: 272. Savings: 82 (23.16%).

Many web developers and site owners reserve minification for JS and CSS files only, but this outdated practice is a mistake. HTML minification is important, too.

Back in the 2000s, minification tools were rare. You had to manually minify files every time something changed. Since HTML files change more frequently than JS and CSS files, it was simply too tedious to minify every time back then. Nowadays, it’s a moot point.

Compression

When users visit your website, they do so using the HTTP protocol. The browser sends a request to your web server for a specific page, your web server finds the page, then sends the contents of that page back to the visitor’s browser.

But because the HTTP protocol supports compression, your web server can compress the page before sending it to the visitor (assuming compression is enabled in your server’s settings), and then the visitor’s browser can decompress the page back to its original state.

The algorithm looks for repeat occurrences of text in the HTML file, then replaces those repeat occurrences with references to a previous occurrence. Each reference is simply two numbers: how far back is the reference and how many characters are we referencing.

The second occurrence refers back to the first occurrence, which is five characters behind and five characters long:

Blah b[5,5]{lah b}{lah b}lah.

But in this case, the algorithm recognizes that the next occurrence is the same sequence of characters, so it extends the reference length by another five:

Blah b[5,10]{lah b}lah.

And again:

Blah b[5,15]lah.

And the algorithm is smart enough to realize that the next three characters are the first three characters in the reference, so it extends by three:

Blah b[5,18].

Now think about a typical HTML file and how much repetition exists within. Nearly every tag, such as <body>, has a corresponding closing tag, like </body>. Furthermore, many tags are repeated throughout, such as <p>, <div>, <img>, <li>, etc. Attributes are also repeated often, including class, href, and src. It’s easy to see why GZIP compression is so effective with HTML.

Why You Should Compress and Minify

There are two main benefits, both of which are crucial in today’s mobile-heavy web landscape.

Faster Page Loads

On average, an HTML minifier can reduce the size of a file by around 3 percent with basic settings. With optional advanced settings, an HTML file can be reduced by another 3 to 7 percent, for a potential reduction of up to 10 percent. This directly translates into faster page load times.

Less Bandwidth Used

Let’s say you have 10 files, each minified from 50 KB to 45 KB for a total shrinkage of 50 KB. And let’s say your website serves an average of 1,000 visitors every day, where each visit averages ten pages. The HTML minification alone reduces your bandwidth usage by 50 MB per day (1.5 GB per month).

Compression + Minification

As you can see, HTML minification is useful on its own, especially as your site grows larger, files get bigger, and traffic increases. Note that Google’s PageSpeed guidelines recommend minifying HTML, so if you’re skeptical, let that convince you otherwise.

But what’s great about HTML optimization is that you don’t have to choose either minification or compression. You can do both! In fact, you should do both.

On average, you can expect GZIP compression to shrink an HTML file by 70 to 90 percent. Using the example above with a conservative compression estimate, the minified HTML files would go from 45 KB to 13.5 KB each, for a total shrinkage of 365 KB. Compared to unminified/uncompressed, your site bandwidth is now reduced by 365 MB per day (11 GB per month).

And on top of the bandwidth savings, each page loads dramatically faster because the end user’s browser only needs to download 13.5 KB versus 50 KB per page.

How to Compress and Minify HTML

Fortunately, neither are very difficult these days, and you don’t need much technical know-how to set them up.

WordPress Plugins

If you run a WordPress site, all you need to do is install one plugin and you can reap the benefits of both compression and minification.

Most caching plugins do more than simply cache pages. For example, WP Fastest Cache and W3 Total Cache both have one-click settings that allow you to turn on HTML minification and GZIP compression, among other features that further speed up page loads and reduce bandwidth usage.

If you only want minification, we recommend the Minify HTML plugin. It’s simple, supports HTML/CSS/JS, and allows you to tweak the minification method a bit (e.g. whether to remove http: and https: from URLs).

Static HTML Minifiers

If your HTML files are static, (i.e. not dynamically generated by a CMS or web framework), then you can maintain two sets of HTML files: a “source” set, which is unminified for easy editing, and a “minified” set, which you create any time you make a change to a source file.