9 Causes of Web Page Obesity

Broadband speeds are improving but page weight still matters. If your web pages have become a little bloated, spare a thought for those people on slow connections or using mobile devices. Will they buy your services if you make them wait several minutes for your 5MB monstrosity?
It is possible to create mobile or low-bandwidth versions of your website, but few of us have time or resources to create and test multiple versions of content. But there’s little excuse for not keeping in shape — especially when Google could reduce your rank. Leaner pages appear faster, reduce your hosting costs, save your client’s sanity and are environmentally-friendly!
Here are 9 reasons why your site could be piling on the pounds…

1. Over-the-top advertising

We all need to earn a little money but adverts can be the biggest cause of ballooning bandwidth. Most are graphical and many use animation or video to catch the eye.
There are several ways to address adverse advert obesity:

1. Don’t overdo it. Adverts are distracting and while most web users expect a few, don’t bombard people with dozens of flashing images. Fewer adverts may receive more clicks if your page doesn’t look like promotional puke.
2. Remove ads which aren’t working. If a huge advert has raised $0.03 in 5 years, perhaps you can make better use of that space.
3. Try text-based adverts.

2. Inappropriate use of plugins

Let’s be frank — I’m talking about Flash. Despite what Apple think, Flash has its good points. But text content, roll-over effects, and simple navigation menus are not the best uses of the technology.

3. Not optimizing images

If there’s one thing I detest, it’s images which haven’t been resized for the web! Digital camera resolutions have reached ridiculously high levels, but no one wants to download a 5,000² pixel photograph of your dog. Changing the height and width dimensions in the img tag don’t make a difference — you need to resize your images in a graphics package.
When saving, remember to use the best format and highest compression available. In general, photos are better as JPG and graphics are better as PNG or GIF format. However, you will need to experiment with formats and compression rates to squeeze the most from your images.
Finally, keep an eye on Scalable Vector Graphics (SVG). They could revolutionize image production and file sizes if Microsoft keeps its promise to add SVGs in IE9.

4. Not using image sprites

Lots of little images usually sap more bandwidth than a single large image. Each image requires a separate HTTP request/response and most browsers will download a maximum of 4 files at a time. Putting many images into one file then splitting them with the CSS background-position property can save bandwidth. Amazon.com has a great example.

5. Over-reliance on JavaScript frameworks

I’ve nothing against jQuery and similar libraries, but be wary about becoming too dependent on them. Using two or more libraries for effects may also be wasteful.
The W3C website is prime example: it loads a 22Kb file containing jQuery and a plugin to handle basic stylesheet switching. It could have been written in a dozen lines of JavaScript with better browser support.

6. Inefficient HTML

The best HTML is lean, clean and easy to maintain. Your code could be getting out of hand if you find yourself adding 15 nested div tags each with an ID and multiple classes.
WYSIWYG design packages are partly to blame. They have their place, but don’t consider yourself to be a web developer until you have reasonable knowledge of HTML!
Older versions of Visual Studio and ASP.NET web forms can also generate truly shocking and verbose mark-up. Visual Studio has improved, but even previous versions can generate clean code. Be careful when dragging and dropping controls and inspect the resulting HTML.

7. Embedding CSS and JavaScript

CSS and JavaScript should be contained in external files which can be cached and reused throughout every page on your site. There is no excuse for bulking up your HTML with embedded styles and event handlers.
I’d also recommend putting your script tags at the end of the page just before the tag. The page can then be viewed before any scripts are downloaded and executed.

8. Not exploiting CSS cascades or shorthand notation

A little CSS knowledge can go a long way. Novice coders often apply classes to every HTML element and set properties such as font-family within every CSS definition. A little background reading can drastically cut coding time and stylesheet file sizes.
Don’t forget shorthand notation either. The following code snippets are stylistically identical…
Overweight CSS:

1. #element  
2. {  
3.     margin-top: 0px;  
4.     margin-bottom: 10px;  
5.     margin-left: 5px;  
6.     margin-right: 20px;  
7.     background-color: #aabbcc;  
8.     background-image: url("myimage.png");  
9.     background-position: center center;  
10.     background-repeat: no-repeat;  
11. }  

Toned-up CSS:

1. #element  
2. {  
3.     margin: 0 5px 10px 20px;  
4.     background: #abc url(myimage.png) 50% 50% no-repeat;  
5. }  

9. Not using compression

Your server can gzip files before they’re sent to the browser. HTML, CSS, and JavaScript files can all be compressed by removing comments and unnecessary whitespace. There are many tools and applications to help you squeeze the most from files prior to deployment or automatically at runtime.
Do you know of any other causes of web page obesity? Comments welcome…