Looking for ways to reduce HTML file size on your website to improve web performance and Core Web Vitals?
This article outlines five best practices you can implement, explains the key differences between minification and compression, and shows how you can ensure long-term good results.
What Is HTML File Size
HTML file size refers to its weight in bytes. It depends on various factors, such as:
- the amount of content on the page
- the number of HTML elements
- markup formatting techniques (e.g., white space, indentation, comments)
- the amount of embedded resources (e.g., inline CSS, JavaScript, SVG, data URLs, etc.)
- the HTTP compression algorithm you use
- HTML minification
- ... and others
HTML File Size and Web Performance
If your HTML files are too large, your pages will load more slowly, which can increase your First Contentful Paint (FCP), and consequently, Largest Contentful Paint (LCP) results.
It will also take more time for the browser to traverse and update the DOM during later interactions, which can hurt Interaction to Next Paint (INP).
Plus, large HTML file sizes will waste your users' bandwidth, which harms user experience, especially on mobile devices and poor network connections.
How to Reduce HTML File Size
To improve web performance, you'll need to make sure that HTML files don't become too large, especially on critical pages, such as the homepage and landing pages.
Here are five best practices that can help you reduce HTML file size on your website:
1. Check HTML File Size
You can check the download size of your HTML page using our free website speed testing tool. Note that the download size of a text file differs from its natural size when it's compressed on the server using an algorithm such as GZIP, Brotli, or Zstandard (see below).
Once the speed test completes, scroll down to the Recommendations section and find the Reduce HTML download size recommendation:
By expanding the recommendation, you can see the exact size of the HTML document, whether it passed or failed the test for HTML download size, and a detailed size analysis that shows which types of elements add the most to the HTML file size — these are the elements you'll need to pay the most attention to.
2. Minify and Compress Your HTML Files
There are two ways to make text files, such as HTML, CSS, and JavaScript files, smaller in size: minification and compression. By using both, you can achieve an overall file size reduction of up to 90% (see our calculations).
In the comparison table below, you can see how minification and compression compare to each other, including their definition, main methodology, tools, and output:
| Minification | Compression | |
|---|---|---|
| What does it do? | It minifies text files by removing unnecessary white space, line breaks, semicolons, code comments, etc. | It encodes text files using a compression algorithm such as GZIP, Brotli, or Zstandard. These algorithms replace common strings with tokens so the compressed file becomes (much) smaller in size. |
| Where is it performed? | The file is minified during the build process, or if there's no build process, before the file is uploaded to the server. The browser can read and process the minified file without decoding or any other steps. | The file is encoded on the server (typically handled by the web host), then it's decoded on the browser. The browser and server negotiate the supported compression algorithms using the Accept-Encoding and Content-Encoding HTTP headers. |
| The output | Human-readable files. The file extension doesn't change, but the common practice is to add .min before the file extension to indicate that it's a minified file (e.g. .min.html). | Non-human-readable files. The file extension changes to .gz, .br, .zst, etc., but the encoder usually keeps the original extension in the file name (e.g. .html.gz). |
| Tools | Module bundlers (e.g., Webpack, Parcel, or Rollup) or, if there's no build process, standalone code minifiers (e.g., Toptal's HTML Minifier or Code Beautify's Minify HTML). | GZIP, Brotli, Zstandard, etc. encoder (running on the server) + GZIP, Brotli, Zstandard, etc. decoder (running in the browser). |
| Code example | .btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color) | G8MAAETd1uqH7vTZki+2CyoWEWJ28wKlWnRL8kDaC/z2D/ZID3XDpKTMf8ObWB4nHaaOiV5IhxumqFHOYwD0WCgZwXPz0e3LyNhspfCF9vmf+Y6BA38N7lDhAw== |
3. Break Up Long HTML Pages
HTML pages, especially homepages and key landing pages, sometimes become too long and complex.
To reduce HTML file size on your website, review your longer HTML pages and consider splitting them into multiple smaller pages (unless this conflicts with your content goals) and removing less important elements, such as non-essential widgets, sections, and banners.
Breaking up long pages not only reduces the HTML file size but also decreases the DOM size, which can help you pass the Avoid an excessive DOM size Lighthouse audit.
4. Limit Large Inline Resources
While inlining resources such as critical CSS can speed up page rendering, embedding large resources can make the HTML page significantly longer.
To reduce HTML file size, avoid embedding:
- large Base64 data URLs
- complex SVG illustrations added as inline SVG code
- longer JavaScript that could be moved to an external file (e.g., the
deferandasyncattributes don't work on inline scripts)
Move larger inline resources to external files whenever the resource is not needed for above-the-fold content. This is also important because external resources can be cached separately from the HTML, while the browser needs to re-download embedded content with every HTML request.
5. Avoid Excessive Responsive Markup
To reduce HTML file size, be careful when you add responsive markup for media elements such as images and videos.
While defining various source files for different conditions can help you reduce image weight and pass the Properly size images Lighthouse audit, you can blow up HTML size if you:
- use too many breakpoints for your
srcsetattributes - add too many
<source>elements to your<picture>,<video>, or<audio>elements
Excessive responsive image markup can also be introduced automatically if you use an image CDN that adds too many sources for responsive images.
Monitor HTML File Size
You can see the changes in different page weight components, including HTML file size, over time from DebugBear's Metrics page.
The Page Weight (HTML) historical chart displays the total HTML weight on your page, including both the main HTML document and any embedded HTML loaded via iframes. You can also expand the chart to view important details such as request waterfalls captured at different times during DebugBear's scheduled tests:
Plus, you can set up performance budgets to track changes in HTML page weight in real time so that DebugBear can automatically notify you when it exceeds your pre-defined threshold:
Reduce HTML file size on your website and improve your web performance results by starting a free 14-day trial, which gives you access to the full DebugBear functionality.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data