How Compressed HTML Works and Why You May Need It

If you run a website, you should already know how to use the right image formats ^[1] and optimize your images for the web ^[2]

10 Free Online Batch Image Tools to Resize, Convert & Optimize ^[3]

10 Free Online Batch Image Tools to Resize, Convert & Optimize ^[4]
You need batch editing tools when you have lots of photos to process and very little time. We introduce you to the best batch resizers, optimizers, or converters available online.
Read More ^[5]

. Yet while image compression is a well-known practice, HTML compression tends to get overlooked, which is a shame because the benefits are worthwhile.

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 most common compression scheme is GZIP, which is a file format that uses a lossless compression algorithm ^[6]

How Does File Compression Work?^[7]

How Does File Compression Work?^[8]
File compression is at the core of how the modern web works, one could argue, because it allows us to share files that would otherwise take too long to transfer. But how does it work?
Read More ^[9]

called DEFLATE.

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.

Consider a string of text like this (example taken from GZIP website ^[10]):

Blah blah blah blah blah.

The algorithm recognizes the following repetition:

B{lah b}{lah b}{lah b}{lah b}lah.

The first occurrence is our reference, so leave it be:

Blah b{lah b}{lah b}{lah b}lah.

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.

The only downside is that the web server needs a bit more CPU to execute the compression every time a page is requested. But since CPU isn’t much of a concern nowadays, it’s almost always better to enable GZIP than to go without, even if you have entry-level web hosting ^[11]

The Best Web Hosting Services ^[12]

The Best Web Hosting Services ^[13]
Are you looking for the best web hosting services for your needs? Whether you need a place to host your small personal blog, or a major corporate website, this list is for you.
Read More ^[14]

.

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 ^[15] 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 ^[16] and W3 Total Cache ^[17] 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 ^[18] 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.

To minify, use one of these tools:

This is a viable technique if you’ve moved away from CMSes like WordPress and now use static site generators ^[19]

7 Reasons to Ditch Your CMS and Consider a Static Site Generator ^[20]

7 Reasons to Ditch Your CMS and Consider a Static Site Generator ^[21]
For many years, publishing a website was difficult for many users. CMSs like WordPress changed that, but they can still be confusing. Another alternative is a Static Site Generator.
Read More ^[22]

.

Enable GZIP Compression

The steps to enable GZIP compression may differ depending on which web server software you’re using. Since Apache is the most popular option, we’ll cover how to enable it using .htaccess.

Connect to your web server using FTP, then create a file called .htaccess in the root directory. Edit the .htaccess file to have the following settings:

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<FilesMatch "\.(html?|txt|css|js|php|pl)$">
  SetOutputFilter DEFLATE
</FilesMatch>

Not sure if compression is working on your website? Test it with this tool ^[23].

Was this article helpful? Now that you’re compressing and minifying, your web pages should load faster and use less bandwidth. If you have any questions, feel free to ask them below!