HTML is now used by more than 90 percent of sites on the web — and 93.4% of those sites use HTML5. It makes sense: Hypertext markup language is powerful, versatile and lightweight, making it ideal for continually-evolving websites and web-based applications.

The challenge? As your website expands to include more customized content and interactive services the volume of HTML increases exponentially, creating potential problems on both the server and client end of the website viewing experience.

Download Now: Free Intro Guide to HTML & CSS

Consider your hosting provider. The more complex and code-heavy your page, the longer it will take your provider to load and display text, images and other media when visitors click through to your website. On the client side, meanwhile, more code means greater bandwidth usage as devices download specific data to deliver the optimal user experience, which could negatively impact your bottom line as site traffic grows.

The solution? HTML compression — reducing the size of HTML files to improve load times and limit bandwidth usage.

Compression vs. Minification

When it comes to making HTML files smaller and improving overall site performance, two terms are often used: Compression and minification. While these functions are similar — they both reduce the total size of HTML files — they’re not interchangeable, using distinctly different methods to achieve their aims.

Minification focuses on the removal of unnecessary lines and characters in source HTML code to reduce total file size without affecting the function of HTML code itself. While first generation minification tools required users to manually remove redundant or unnecessary code, new solutions streamline the process with automation.

HTML compression, meanwhile, shrinks file size by replacing redundant code instances with references attached to the original information that indicate the position of this duplicated data. Called “lossless compression”, this technique ensures just that: No data loss when file sizes are reduced. In practice, lossless compression identifies repeated words, phrases or characters, eliminates them and then creates numbered reference points tied to their first instance in the file, allowing decompression tools to reconstruct the original format.

While minification and compression deliver similar output file sizes, it’s worth noting that compressed files typically can’t be used in their shrunk-down format. Instead, they must be decompressed to deliver key functions.

Why Compress an HTML File?

There are two key benefits to compressing HTML files: Improved website speed and reduced bandwidth use. Let’s break down both in greater detail.

When it comes to speed, consider a site using substantial amounts of HTML code. Every time a new visitor arrives on your site, their browser makes an HTTPS request for specific pages, which are then located and sent back to the browser. More HTML code means bigger pages, which means it takes longer for end-users to receive the completed page. By using HTTP protocol-compliant HTML compression utilities, however, it’s possible for your web server to compress the page before it leaves your server; the user’s browser will then decompress the page when it arrives, enhancing overall speed. While this does require extra CPU power on the server side, modern hosting solutions are typically able to accommodate this additional resource use.

When it comes to bandwidth, meanwhile, compression can help reduce the amount of HTML traffic moving from your web server to end-users by up to 90 percent. And with the cost of web hosting often tied to network traffic — some hosts offer packages with set data transfer limits and penalties for going over, while others use on-demand pricing — the smaller your HTML files, the less data you’re sending and the less you’re spending every month.

How to Compress an HTML File

As noted above, the most common form of HTML compression is “lossless”, meaning no data is lost during the process but instead modified to reduce total size. But how does it work?

Consider this line of text: “hello hello hello hello”

Compression algorithms are capable of recognizing the repetition in our example line and identifying the first instance of the word “hello” as a reference. It leaves this reference alone and uses the first letter of the second “hello” instance as a reference marker to yield this:

“hello h{ello h}{ello h}ello”

It then recognizes that the reference text is six characters behind and six characters long:

“hello h[6,6]{ello h}ello”

It also identifies the second repetition of another six characters and the fact that the last four characters are the same as first four reference characters to yield a much smaller final product:

“hello h[6,16]”

Options for Compressing HTML Files

If you’re looking to compress HTML files you’ve got two broad options: Use a free or for-pay application and do it yourself or leverage in-browser options that automatically compress HTML data before sending it to end-users.

In almost all cases, the second option is better for your business and your website since you don’t need to worry about either side of the equation — data is compressed when it leaves your web server and decompressed when it reaches its destination.

There are cases, however, where manual compression makes sense. For example, if you’re currently in the development phase of website design or are focused on optimizing your site to gain more traffic, you may not have high enough bandwidth requirements to justify spending on hosting packages that include in-browser compression. It’s also worth testing differing compression options to determine which one offers the ideal balance of speed, size and simplicity.

As noted above, the most common compression tool currently used by web hosts is gzip, which uses the familiar HTTP protocol to automatically compress HTML files from your web server and decompress them on end-user devices. Worth noting? Not every hosting provider uses gzip — or any type of HTML compression. If your current or prospective web host doesn’t use compression, it’s worth considering other options or asking them to integrate some type of compression to boost speed and reduce file size.

Keep it Small, Keep it Simple

The smaller, the better for HTML files, especially when it comes to website optimization. Here, compression is critical to improve page loading times and limit overall bandwidth use, in turn delivering the dual benefits of reduced hosting costs and enhanced end-user experience.

New Call-to-action

 css introduction

Originally published Dec 24, 2020 7:00:00 AM, updated January 12 2021

Topics:

Website Performance