Minifying your HTML can improve your PageSpeed Score, decrease your page’s render and load times, and reduce your overall page size.
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 (in terms of data usage and browser work) for your user.
Plus, you will cut down on:
- The amount of time required by the browser to download the resource
- The amount of time required by the browser to parse the file and build the DOM tree
- 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 (such as comments or whitespace) and making changes that reduce the overall size of the file. Generally speaking, anything that makes the HTML readable to humans but isn’t necessary for 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 it. While compression can and does decrease improvements that result from minification, there is a difference between compressing a clean, small HTML file and a large, messy HTML littered with extraneous details.
The Internet is moving toward single page applications (SPAs), with the client side handling a majority of the routing, templating, and logic. In these instances, you will see quite a bit of improvement in your page load time after minification. Luckily, there are tools available (as listed below) that make minification a simple process.
The Splunk Observability Cloud platform delivers an all-in-one monitoring and optimization solution that provides actionable insights. Learn more with a free trial.
How to Minify Your HTML
When minifying an 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 and should be removed.
- Whitespace: Whitespace is also useful for a developer but unnecessary for a browser. Remove all unnecessary spaces, tabs, and line breaks.
The downside to this process is that the minified resource is not very readable. The workaround is to keep both versions of the resource. Developers can work with the larger, more human-readable form of the file, while the minified version is the one deployed to the server.
To distinguish one version from the other, the original resource typically contains the “.html” file extension, while the minified resource uses the “.min.html” file extension.
The Impact of Minification
This might be what your HTML file looks like initially:
<html> <head> <!-- This is the content that shows in the browser tab --> <title>Homepage</title> </head> <body> <!-- This is a comment. --> <H1>Hello, world!</H1> </body> </html>
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, the file size has been reduced by over 50%.
While you could manually minify your HTML files, you can also automate the process with one of several tools, such as:
- HTML Compressor
- HTML minifier
- Will Peavy’s HTML Minifier
There are also tools for undoing minification. While these tools will not re-add the comments that have been stripped, they will add in whitespace:
- Dirty Markup: HTML Beautifier
- HTML Beautifier & Formatter