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

@Bethany197

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.

Vote Up Vote Down

@Goswami781

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/

Vote Up Vote Down

@Miguel251

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.

Vote Up Vote Down

@Voss4911412

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,


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.
That 10% additional size reduction comes at the rather steep cost of completely unreadable HTML in "view source"

Vote Up Vote Down

@Eichhorn148

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:
stackoverflow.com/questions/728260/html-minification

Vote Up Vote Down

@Cofer257

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>

Vote Up Vote Down

@BetL925

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.

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


Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
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.

Vote Up Vote Down

@Pope3001725

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

Vote Up Vote Down

@Welton855

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.

Vote Up Vote Down

@Karen161

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.

Vote Up Vote Down

@Welton855

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%

Vote Up Vote Down