Common optimizations to reduce HTML or XHTML page size?

Question

What are some common optimizations performed to reduce HTML or XHTML page size? Some that come to mind are:

• removing comments,
• removing extraneous whitespace,
• moving repetitive inline styles to a CSS stylesheet,
• etc.

What are some others? Which offer the biggest bang-for-the-buck or could be performed automatically by a tool or module?

Answer 1

Someone is going to say that the markup should be Gzipped, so I might as well be the one.

Here's a lengthy explanation of what Gzip is with links on how to set it up on Apache and IIS.

An article on WebReference states that you'll find the following performance gains when using the mod_gzip Apache module.

Webmasters typically see a 150-160% increase in Web server performance, and a 70% - 80% reduction in HTML/XML/JavaScript bandwidth utilized, using this module. Overall the bandwidth savings are approximately 30 to 60%

Answer 2

It probably isn't worth it.

I've played with removing whitespace in HTML a little bit, and saw only a 10% size reduction in payload after gzipping.

Realistically, whitespace and linefeed removal is doing work that the compression would be doing for us. We're just adding a dab of human-assisted efficiency:

                  Raw          Compressed
Unoptimized CSS   2,299 bytes   671 bytes
Optimized CSS     1,758 bytes   615 bytes

(yes this says CSS but the same basic rules apply to HTML as well)

The problem is,

1. GZIP is doing 90% of the work for you, so this is a crazy micro-optimization. I mean, maybe if you're Google or Yahoo.
2. That 10% additional size reduction comes at the rather steep cost of completely unreadable HTML in "view source"

Answer 3

Google has outlined and explained their recommendations to best Minimize Payload Size. They include the following techniques:

1. Enable compression
2. Remove unused CSS
3. Minify JavaScript
4. Minify CSS
5. Minify HTML
6. Defer loading of JavaScript
7. Optimize images
8. Serve scaled images
9. Serve resources from a consistent URL

These suggestions are a part of their open-source Firefox/Firebug add-on project called Page Speed. Similar to Yahoo!'s YSlow plugin. The actual Page Speed add-on will check for many more optimizations than that list explains in detail. Instructions for Using Page Speed are also presented.

Yahoo!'s Best Practices for Speeding Up Your Website identify a similar set of best-practices:

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. …

(Yahoo!'s list is ~35 items long, no need to quote it in its entirety.)

Both YSlow (image link) and Page Speed (image link) will allow you to run tests on your pages, suggesting things that you can do and showing you what, of their recommendations, is already implemented.

Answer 4

ok, a small one: keep tag names and attributes lowercase and consistent (as the standard mandates, by the way). It will increase the compression ratio by a percentage or two.

Answer 5

If you are an extremely high-volume site, you may want to consider using super-short entity id and class names, as these reduce the size of both the HTML page and the CSS page used to style it.

Also, be careful about overly-structured site composition; it is easy to add div and span sections when they are not truly needed. You may also want to consider strategies such as paging for large result sets and similar output.

In reality, these optimizations have extremely limited payback (and for the paging strategy, potential SEO downsides) to be worth it for sites that aren't in the same traffic category as Google. Just follow jessegavin's recommendation to enable GZip/Deflate compression and be done with it.

Answer 6

Combine common css, images and javascripts into one file. This doesn't reduce the file size but it will reduce the number of http requests. For smaller files the http overhead far outweighs the download time. It is easy to write a script to combine css and javascript files so you can manage them easier during development but deploy them to a single file.

See http://css-tricks.com/css-sprites for more information about combining images.

Also, check out the Closure Compiler from Google. I haven't used it, but it claims to make javascript download and run faster.

Answer 7

As others have said, the largest benefit comes from gzipping.

Make sure that you use appropriate HTML elements. Instead of <div class="page-title">Hello World</div>, use <h1>Hello World</h1>.

And the obvious one: don't use tables for layout! Use a simple grid system like 960.gs (or roll your own lightweight version). There can be a large difference between the HTML size, especially with nested tables. Compare:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

and

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Answer 8

If you're using an ASP.NET website, be careful of the ViewState. It can generate very big hidden fields in the page, overloading it often while it is not necessary (it already occured to me that the ViewState is heavier than the rest of the page).
It is especially true if you use AJAX, as the ViewState will be sent back and forth with every request, slowing your website and increasing the traffic volume.

The solution is in the .net code though.

Answer 9

There are a bunch of free web performance analysis & optimization tools. You can compile your own big check-list from the reports that they generate.

Here are a couple of paraphrased points from a Zoompf Performance Assessment -

• Avoid dynamically generated content (image). Consider drawing or resizing a image offline as a static image file instead.
• Avoid using image tags without dimensions.
• Google Analytics (& Ads) support asynchronous loading of its JavaScript file. In case, you use them, you could opt to load them asynchronously.

Answer 10

A commonly overlooked strategy is to remove all unnecessary HTML code from the page.

For any given project, you'll have to decide which of these strategies to employ based on the (X)HTML version you're using, and the way the website is going to be used.

(Apparently, I can't post more than one hyperlink per answer since I'm a new user, so these URLs will have to be copied and pasted...I hope that's kosher.)

• In HTML4 and HTML5, for many elements, the closing tag is not required. The opening tag for the body element also isn't required. See:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• The protocol (http:) part of HTTP URLs can be omitted.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• With tags like <br>, you can simply leave out the slash used in the XHTML syntax (<br />) unless you actually need to use XHTML.

• Here are some examples of small HTML document structures:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Answer 11

Others have said it, but they just haven’t rammed the point home enough: gzipping.

1. Virtually no effort, or drawbacks.
2. In my limited experience, reduces HTML size by between 60% and 90%.

All the other tweaks you can make to HTML require more effort/maintenance, and hardly have any effect compared to just gzipping and forgetting. They’re simply not worth the time unless you‘re Google. You are not Google.

(As others have mentioned though, the more consistent your HTML is, the more effect gzipping will have, as — according to my limited understanding — gzipping looks for identical strings in your file, and replaces each repeated instance with a tiny code referring to the original. So authoring practices like keeping your attributes in the same order, and keeping all your casing the same, can help gzipping do its work.)

Oh — and if you’re automatically minifying your HTML at some point in your build/serving process, that doesn’t require much more effort/maintenance. Some HTML minifiers are listed here:

https://stackoverflow.com/questions/728260/html-minification