Don't improve Drupal web site performance by removing HTML white space

White space and comments in Drupal theme templates contribute to the size of Drupal web pages. Removing them achieves a slight reduction in page size. This reduction is probably not worth the effort. Time spent performance tuning is best spent on something else.

Introduction

Most of Drupal's themes use template files that generically describe page and node layout. When a visitor requests a web page, Drupal inserts the page's content into the template and sends the result to the visitor. If the template includes white space and comments, the visitor gets them too. What's more, some templates may be used several times on the same page, such as the node template in teasers, or the comment template for comment lists. If those templates include white space or comments, that extra data is sent multiple times per page to the visitor.

Since browsers ignore white space and comments in HTML, sending them to the visitor is a waste of network bandwidth. In principal we can reduce bandwidth waste by removing white space and comments from theme templates. This gave a 20% reduction in file size when applied to CSS files. This article looks at white space removal for HTML templates.

Remove white space and comments

Make a copy of your site's theme folder and all of it's files. Rename it something like "MyTheme_NoWhite". Now edit each ".tpl.php" file in the theme:

  • Remove all HTML comments (e.g., text like <!--comment-->).
  • Remove all blank lines.
  • Remove all indentation.
  • Concatenate short lines together to remove extra line breaks.

Save each edited template file. Then log in as your site's administrator and change the site's theme to your new "NoWhite" theme. It should work identically (unless you've made an editing error), but your pages will take a few less bytes to download.

HTML file size results

The table below shows HTML file sizes for the home page of our simple and complex test sites (see Specifications for Drupal web site testing). Both sites use the default "Garland" theme, and a white-space removed version of the theme. Removing white space reduced file sizes by 8% uncompressed, but just 1% compressed.

Test Simple site Complex site
Garland 17,805 bytes
(100%)
29,471 bytes
(100%)
Garland
compressed
4,229 bytes
(24%)
6,086 bytes
(21%)
No White 16,378 bytes
(92%)
26,892 bytes
(91%)
No White
compressed
4,069 bytes
(23%)
5,797 bytes
(20%)
HTML file sizes with white space removed

A 1% reduction in compressed file size is hardly worth the effort. The "Garland" template has rather little white space and comments to begin with.

Conclusions

Our time is better spent elsewhere. White space and comment removal netted an 8% gain on uncompressed HTML, but no web site should use uncompressed HTML. Drupal's page cache compresses HTML for anonymous visitors, and installing mod_gzip into Apache will compress HTML for logged-in visitors. When HTML is compressed, white space and comment removal achieved only a 1% improvement. It's hardly worth the effort, plus it makes the template files harder to read.

What to do next

The gain from white space removal was just 289 bytes for the compressed complex site. A trivial change in image compression can achieve more than this. Removing one unnecessary image on the page saves even more. Or simplify the theme and page layout to save a lot more.

Nadeau software consulting
Nadeau software consulting