Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
    
    
My apologies for the duplicate - unintended. Curious, though: Why has this question been more popular than the first one? –  Chris W. Rea Jul 15 '10 at 0:15
    
probably because it is asked in a different way, missing the word optimization in subject and question ! –  Julien N Jul 17 '10 at 10:04

11 Answers 11

up vote 5 down vote accepted

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

(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.

share|improve this answer
    
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 Mortensen Sep 4 '10 at 22:25

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:

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

share|improve this answer

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.

share|improve this answer

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/

share|improve this answer
1  
I could say it's overlooked for a reason. This is probably a lot more painfull than any other option and can probably easiy break a site. IE in querks mode is painfull –  WalterJ89 Jul 17 '10 at 8:16
    
Very true; this will have impacts on compatibility/accessibility. But it's something to keep in mind and use when it's appropriate for the context. –  dzollman Jul 18 '10 at 22:30

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.
share|improve this answer

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"
share|improve this answer

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>
share|improve this answer

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.

share|improve this answer
2  
Unless I'm mistaken, the question is specifically about reducing HTML size, not JS/CSS. That's already covered in another question. –  DisgruntledGoat Jul 14 '10 at 11:51

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.

share|improve this answer

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.

share|improve this answer
1  
How does the casing make a difference? I find that a curious thing to say... –  Grant Palin Jul 10 '10 at 0:14
2  
@Grant: It's easier to compress multiple instances of "abcde" (case exact) than a variety of "ABCDE", "abcde", "Abcde", etc. –  Chris W. Rea Jul 10 '10 at 0:20
    
Thanks for the tip, that makes sense. My code is in good shape then! –  Grant Palin Jul 10 '10 at 0:30

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%

share|improve this answer
2  
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. –  delete Jul 17 '10 at 6:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.