Write your web pages to save bandwidth

Reasons to pay attention
There are plenty of reasons to pay a little bit of attention to bandwidth when writing web applications.

Fast loading and rendering pages improve the browsing experience for every visitor. It doesn't matter if they are on a low or a high speed connection, loading speed has its influence on how much the visitor can enjoy your site. And how long they might stay.

If you don't do it for your visitors, do it for your own pocket. Bandwidth is expensive (especially in the UK).

HTML and CSS Optimisation
What can you do to optimise your page size and download speed? Pay attention to the following items next time you open an HTML page.

• Put all your style information in style sheets. Besides being a good habit, the style sheets also get cached on the browser and there's no need to download the style information with each request. For each subsequent page the cached version can be used.
• The same rule applies for any javascript you use.
• Don't leave large blocks of commented-out content in the page. Nobody can see it and it still gets downloaded.
• Delete auto-generated headers - especially those from Frontpage or Photoshop and the like. They have no purpose but to advertise the product.
• Don't nest elements unless you really have to. Too many nested tables not only increases page size but also increases rendering speed on slow clients.
• Remove unneeded tabs or line breaks.
• Remove unnecessary comments.
• When specifying a color in CSS there is a short notation, e.g. #336600 can be written as #360

Don't take this to the extreme; spending hours to get a few bytes off a page isn't worth it, but being aware of the issues will help you design better for your user.

Rendering speed
Well-designed pages render faster. You may not think about it with your hot PC and 8Mb ADSL, but with dial-up on an old, low-end PC, things like this are noticable.

• Make sure your pages validate for the latest standards in CSS and XHTML
• Don't use an extra nested table if you don't need it. In fact, only use tables for tabluar information, not for design
• Specify width and height for your images, so the page can get its correct layout while the images are still being downloaded
• Minimize bloat (unnecessary content) in the header

Caching
You can influence the caching of your page (in proxies and browsers) by setting the right headers. Caching infrequently updated pages, or caching a page with a lot of hits could cut down on bandwith and server load.

Finally, the thing to remember with all of this is that these things are helpful to work towards, but it's not worth taking it to the extreme.
Focus on the pages with most hits or where there may be an issue; that's where you will get the most gain for the least effort.