Removing HTML white-space (spaces, tabs, blank lines, and comments) makes a file slightly smaller and faster to send to a site visitor. The improvement you get depends upon how verbose your HTML is to start with. This article uses the HTML Tidy optimizer and measures the improvement for a sample web site and 22 different standard themes or page templates. Each theme generates different HTML and shows a different level of improvement from HTML optimization. Unfortunately, in all cases the improvement is tiny and probably not worth the effort.
Table of Contents
This article is part of a series on Essential steps to speed up a Drupal web site. The discussion here, however, applies equally well to any type of web site, not just one that uses Drupal.
How to remove HTML white space
The bigger the HTML page, the longer it takes to send to your site's visitors. Speed up a site by reducing page size. One way is to remove HTML bytes that don't need to be there:
- Remove indentation.
- Remove blank lines.
- Remove comments.
- Concatenate short lines to remove unnecessary line breaks.
Indentation, comments, etc., are often in the HTML to make the file easier to read for the site's designers. But none of these make a difference to the site visitor or their web browser. Reduce page load times by removing these extra bytes.
HTML optimizers
Doing optimization by hand is tedious. Instead, use an HTML optimizer application. There are lots of free and commercial tools, including:
- Absolute HTML Compressor (freeware)
- Advanced HTML Optimizer (commercial)
- HTML Code Cleaner (commercial)
- HTML Optimizer (freeware)
- HTML-Optimizer (commercial)
- HTML-Optimizer Pro (commercial)
- HTML Tidy (freeware)
- Balthisar Tidy (freeware)
- HTML Trim (freeware)
- Tidy UI (freeware)
- Hunter HTML Optimizer (commercial)
All of these tools will do about the same thing. Their main differences are in the quality of their user interfaces, the operating systems they work on, and how much they cost.
HTML Tidy is my tool of choice. It is one of the first HTML optimizers, it's free, it is under constant development by the Open Source community, and it has been incorporated into multiple free and commercial products for Windows, Mac OS X, and Linux. There are command-line tools for use in scripts, programmer libraries for custom Java, Perl, or Python programs, and the mod_tidy module for Apache 2 that will automatically optimize every HTML page delivered by the web server.
Some other tools will do more "optimizations" than HTML Tidy, but beware. One "optimization" promoted by another tool removes all of the double-quotes around tag attribute values. This produces invalid X/HTML. Another "optimization" removes some closing tags, and again this produces invalid X/HTML. Still another "optimization" replaces <strong> tags with <b>, <em> with <i>, etc., which again produces invalid XHTML and it will break some style sheets. Once you turn off these invalid optimizations in fancy tools, you get back to the same safe valid set of optimizations that all of the tools can do.
Before spending time and money on any of these, though, let's do some testing to see what HTML optimization can do for a web site.
How well does it work?
I measured the effect of HTML optimization for a variety of test cases. I hand-edited several files first and compared them to the output of HTML Tidy. They differed by only a few bytes, which is surprisingly good. Instead of doing any further hand-editing, all of the following tests use HTML Tidy. I used the Balthisar Tidy user interface for HTML Tidy on a Mac.
Effect on HTML page template/theme sizes
Many web sites today use page templates or themes that provide the common elements of every site page, such as banners, menus, and footers. Only the body text changes from page to page. Change the template or theme, and the look of every page changes.
To optimize a site quickly, optimize the page template with HTML Tidy. I measured the improvement on a selection of page templates from themes for the Drupal content management system. The same could have been done for themes for WordPress, or templates used by Dreamweaver or iWeb. (see the appendix for details on how I did these tests)
| Theme | Original | Optimized | Saved | Percent | |
|---|---|---|---|---|---|
| Aberdeen | 3,141 | 2,373 | 768 | 24% |  |
| Amadou | 3,733 | 2,286 | 1,447 | 39% | |
| Andreas09 | 2,154 | 2,026 | 128 | 6% | |
| Antique Modern | 2,970 | 2,223 | 747 | 25% | |
| Arcmateria | 2,485 | 2,165 | 320 | 13% | |
| Blix | 2,054 | 1,780 | 274 | 13% | |
| Blue Breeze | 3,556 | 2,709 | 847 | 24% | |
| Blue Marine | 2,304 | 2,113 | 191 | 8% | |
| Brushed Steel | 4,530 | 3,291 | 1,239 | 27% | |
| Fancy | 3,818 | 3,624 | 194 | 5% | |
| Gagarin | 2,134 | 1,938 | 196 | 9% | |
| Garamond | 2,324 | 2,015 | 309 | 13% | |
| Garland | 3,706 | 2,929 | 777 | 21% | |
| Glossy Blue | 2,349 | 2,080 | 269 | 11% | |
| iTheme | 2,364 | 1,934 | 430 | 18% | |
| Kubrick | 1,692 | 1,494 | 198 | 12% | |
| News Portal | 1,840 | 1,720 | 120 | 7% | |
| Ocadia | 3,241 | 2,837 | 404 | 12% | |
| Push Button | 3,882 | 3,407 | 475 | 12% | |
| Slash | 2,582 | 2,570 | 12 | 0% | |
| Stylized Beauty | 3,500 | 2,734 | 766 | 22% | |
| Zen | 3,685 | 2,623 | 1,062 | 29% | |
| Average | 508 | 16% |
The average reduction in size for optimized page templates was 16%. This seems good, but a page template is only the shell of a page, lacking any real content. What happens if we add the content?
Effect on HTML page sizes
I applied each theme to a test web site and measured the size of the site’s home page before and after optimization with HTML Tidy. The home page I used is fairly complex, with multiple blocks of text, lists, images, forms, and tables. (see the appendix for details on how I did these tests)
| Theme | Original | Optimized | Saved | Percent | |
|---|---|---|---|---|---|
| Aberdeen | 28,141 | 26,017 | 2,124 | 8% | |
| Amadou | 27,764 | 25,631 | 2,133 | 8% | |
| Andreas09 | 25,791 | 25,108 | 683 | 3% | |
| Antique Modern | 27,057 | 25,601 | 1,456 | 5% | |
| Arcmateria | 26,766 | 25,772 | 994 | 4% | |
| Blix | 26,395 | 25,699 | 696 | 3% | |
| Blue Breeze | 28,624 | 26,177 | 2,447 | 9% | |
| Blue Marine | 26,911 | 26,030 | 881 | 3% | |
| Brushed Steel | 29,418 | 26,933 | 2,485 | 8% | |
| Fancy | 30,400 | 29,327 | 1,073 | 4% | |
| Gagarin | 26,164 | 25,457 | 707 | 3% | |
| Garamond | 24,773 | 24,102 | 671 | 3% | |
| Garland | 28,273 | 26,607 | 1,666 | 6% | |
| Glossy Blue | 24,789 | 24,151 | 638 | 3% | |
| iTheme | 27,283 | 26,340 | 943 | 3% | |
| Kubrick | 22,994 | 22,583 | 411 | 2% | |
| News Portal | 25,743 | 24,954 | 789 | 3% | |
| Ocadia | 26,374 | 25,820 | 554 | 2% | |
| Push Button | 27,856 | 26,845 | 1,011 | 4% | |
| Slash | 28,099 | 27,021 | 1,078 | 4% | |
| Stylized Beauty | 28,013 | 26,555 | 1,458 | 5% | |
| Zen | 28,634 | 26,272 | 2,362 | 8% | |
| Average | 1,239 | 4% |
The average reduction in size for optimized HTML was 4%. That's less impressive. Bytes were still saved, but the size of the content overwhelms the bytes saved through HTML optimization.
Effect on HTML page sizes, after compression
Production web sites should always use Apache file compression. What happens if we use HTML Tidy, then compress the pages using Apache and mod_gzip or mod_deflate? (see the appendix for details on how I did these tests)
| Theme | Original | Optimized | Saved | Percent | |
|---|---|---|---|---|---|
| Aberdeen | 5,986 | 5,718 | 268 | 4% | |
| Amadou | 6,089 | 5,700 | 389 | 6% | |
| Andreas09 | 5,567 | 5,522 | 45 | 1% | |
| Antique Modern | 5,763 | 5,586 | 177 | 3% | |
| Arcmateria | 5,795 | 5,632 | 163 | 3% | |
| Blix | 5,751 | 5,648 | 103 | 2% | |
| Blue Breeze | 5,862 | 5,698 | 164 | 3% | |
| Blue Marine | 5,783 | 5,723 | 60 | 1% | |
| Brushed Steel | 6,236 | 5,888 | 348 | 6% | |
| Fancy | 6,365 | 6,229 | 136 | 2% | |
| Gagarin | 5,708 | 5,599 | 109 | 2% | |
| Garamond | 5,249 | 5,133 | 116 | 2% | |
| Garland | 6,018 | 5,754 | 264 | 4% | |
| Glossy Blue | 5,245 | 5,149 | 96 | 2% | |
| iTheme | 5,953 | 5,764 | 189 | 3% | |
| Kubrick | 5,080 | 5,017 | 63 | 1% | |
| News Portal | 5,554 | 5,506 | 48 | 1% | |
| Ocadia | 5,784 | 5,708 | 76 | 1% | |
| Push Button | 5,951 | 5,859 | 92 | 2% | |
| Slash | 5,805 | 5,765 | 40 | 1% | |
| Stylized Beauty | 6,006 | 5,919 | 87 | 1% | |
| Zen | 6,026 | 5,762 | 264 | 4% | |
| Average | 150 | 3% |
The average reduction in size for compressed optimized HTML is just 3%. Compression did a spectacular job of reducing page sizes by 78%, and removing 21,000 bytes on average. In comparison, the 150 byte improvement from HTML optimization isn't very impressive.
The HTML is just part of a real web page. What happens if we include the style sheets and images?
Effect on HTML page sizes, after compression and including CSS and images
I re-calculated the improvement from HTML optimization, now including the size of CSS and images needed by the home page for each of the tested themes. (see the appendix for details on how I did these tests)
| Theme | Original | Optimized | Saved | Percent | |
|---|---|---|---|---|---|
| Aberdeen | 23,999 | 23,731 | 268 | 1.1% | |
| Amadou | 36,187 | 35,798 | 389 | 1.1% | |
| Andreas09 | 21,358 | 21,313 | 45 | 0.2% | |
| Antique Modern | 52,785 | 52,608 | 177 | 0.3% | |
| Arcmateria | 19,007 | 18,844 | 163 | 0.9% | |
| Blix | 26,699 | 26,596 | 103 | 0.4% | |
| Blue Breeze | 63,878 | 63,714 | 164 | 0.3% | |
| Blue Marine | 13,864 | 13,804 | 60 | 0.4% | |
| Brushed Steel | 99,466 | 99,118 | 348 | 0.4% | |
| Fancy | 200,484 | 200,348 | 136 | 0.1% | |
| Gagarin | 56,322 | 56,213 | 109 | 0.2% | |
| Garamond | 36,359 | 36,243 | 116 | 0.3% | |
| Garland | 26,192 | 25,928 | 264 | 1.0% | |
| Glossy Blue | 32,006 | 31,910 | 96 | 0.3% | |
| iTheme | 90,039 | 89,850 | 189 | 0.2% | |
| Kubrick | 25,105 | 25,042 | 63 | 0.3% | |
| News Portal | 20,427 | 20,379 | 48 | 0.2% | |
| Ocadia | 76,697 | 76,621 | 76 | 0.1% | |
| Push Button | 28,370 | 28,278 | 92 | 0.3% | |
| Slash | 32,670 | 32,630 | 40 | 0.1% | |
| Stylized Beauty | 28,573 | 28,486 | 87 | 0.3% | |
| Zen | 49,112 | 48,848 | 264 | 0.5% | |
| Average | 150 | 0.4% |
The average reduction in size for optimized HTML in the context of a full page is just 0.4%. The size of the CSS and images for the page overwhelm the meager gains from HTML optimization.
Conclusions
HTML optimization seems like a good idea at first. But, in the real-world context of a web page with style sheets and images, and a web server properly configured to compress content, the few bytes saved from HTML optimization are hardly worth the effort.
To put this in perspective, the average savings in the above tests, after compression, was just 150 bytes. On a typical cable modem or DSL connection supporting 6 Mbps (megabits per second) downloads, that 150 bytes takes about 1/4000th of a second to send. Saving that time isn't going to be noticeable by your site visitors.
Also consider that one web server message to get a file takes about 250 bytes, plus the size of the file. To optimize a site, you would do much better to remove just one image from the design, saving that 250 bytes for the message, plus the bytes for the image. Dropping even a tiny one-pixel image will save you more than HTML page optimization is likely to do.
An advertisement for one HTML optimization product claimed a 20% reduction in page size! But what is a "typical" page for that claim? Most pages today are created by authoring tools (such as Dreamweaver or iWeb) or by content management systems (such as Drupal or WordPress), and both ways produce lean HTML with little to remove in HTML optimization. If you can get a 20% reduction from optimization, then something is wrong with the authoring tool you are using.
Further reading
- Essential steps to speed up a Drupal web site. There are more effective ways to speed up a web site including enabling file compression, using a PHP script cache, enabling MySQL's query cache, and enabling Drupal's page cache and CSS file aggregation.
- Don't bother using CSS optimization to speed up a web site. CSS files often include spaces, blank lines, comments, and redundant selectors and properties. Removing them makes the CSS smaller and faster to send to a site visitor. But the improvement is won't yield a noticeable improvement in page load times.
Appendix: How I tested
All testing used a Drupal 5.1 web site loaded with sample content and a home page layout that listed teasers for the 10 most recent posts in the body. Blocks on the left side of the page supported menus and a recent image. Testing used standard themes downloaded from the Drupal web site.
All size measurements were done by simply counting bytes before and after running HTML Tidy on the theme template or the site home page. Full page sizes, including CSS and images, were measured by monitoring a page loaded into Firefox while using the Charles proxy server on a Mac.
As with all benchmarking, your results may vary due to differences in your page layout, content, and choice of theme or page template. Use these results only as a rough guideline.
Post new comment