11 Answers
11

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

Enable compression

Remove unused CSS

Minify JavaScript

Minify CSS

Minify HTML

Defer loading of JavaScript

Optimize images

Serve scaled images

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.

Just a small addition: These performance guidelines got started with Steve Souders' work while at Yahoo!. His book "High Performance Web Sites" outlines the why, the reasoning behind them. The book is easy to read and informative.
–
Jesper MortensenSep 4 '10 at 22:25

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%

mod_gzip was for Apache 1.3, which has now reached end of life (no longer supported - it still works though, of course). The equivalent for the Apache 2 series is mod_deflate.
–
deleteJul 17 '10 at 6:58

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.

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.

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:

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.

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

Virtually no effort, or drawbacks.

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: