Minifying your HTML can improve your PageSpeed Score, decrease your page’s render and load times, and reduce your overall page size. Using Rigor Monitoring’s Benchmark tools, you can compare your site’s performance to your competitors’ sites.
By reducing the size of the HTML files used to build your webpage, you can speed up your site’s page load times and make the download less expensive for your user. You will:
- reduce the amount of time required by the browser to download the resource;
- reduce the amount of time required by the browser to parse the file and build the DOM tree;
- reduce the data usage of the user requesting the site.
One way to reduce the size of HTML files is to minify them. Minification is the process of removing anything that is not essential to the rendering of the page and making changes that reduce the overall size of the file. For example, you might remove all comments and whitespace. Generally speaking, anything that makes the HTML readable to humans, but isn’t necessary to compilation, can be modified or eliminated.
Should You Minify Your HTML?
Additionally, some argued that, because HTML tends to be compressed with gzip prior to being served to the user, there was no reason to minify your HTML. While compression can and does decrease the improvements as a result of minification, there is a difference between compressing a clean, small HTML file and a large, messy HTML littered with extraneous details.
Nowadays, you should definitely perform HTML minification on your site’s resources. In addition to the various tools available that make minification a trivial process, the Internet is moving more and more toward pages that resemble single-page applications and have the client side doing a majority of the routing, templating, and logic. In these instances, you will see quite a bit of improvement in your page’s loading after minification.
How to Minify Your HTML
When minifying your HTML file, your primary goal is to remove redundant or unnecessary data.
- Comments: While comments are useful for a developer, they are unnecessary to the browser. Remove all comments.
- Whitespace (spaces, tabs, and line breaks): Whitespace is also useful to a developer, but they are a convenience that the browser does not need. Remove all unnecessary spaces, tabs, and line breaks.
Granted, the minified resource is not very readable, but one way to work around this is to keep both versions of the resource. The larger, more human-readable form of the file is the version developers work with, while the minified version is the one deployed to the server.
To distinguish one from the other, the original resource typically contains the “.html” file extension, while the minified resource is indicated with the “.min.html” file extension.
The Impact of Minification
As an example, this might be what your HTML file looks like initially:
<!– This is the content that shows in the browser tab –>
<!– This is a comment. –>
After minification, your file would contain the following:
Size-wise, the original resource contains 190 bytes of data, whereas the minified resource contains 85 bytes of data. By removing all of the comments and all of the whitespace, we reduced the file size by over 50%.
In addition to manually minifying your HTML files, you can use one of the many programs available to minify your HTML. The following is a limited selection of HTML minifiers that can perform minification on your behalf:
- HTML Compressor
- HTML minifier
- Will Peavy’s HTML Minifier
There are also tools for undoing any minification you might have done to your HTML files. While they will not re-add the comments that have been stripped, they will add in the whitespace needed to make the file human-readable.
Want to consistently minify HTML for optimal site performance? Contact us to book a trial kickoff and leverage Rigor’s technology for your site.