Keeping Web Pages Small - Eliminating HTML Code Bloat

Article Posted 2002 September 21, Saturday
by Michael Webb - ML WEBB | Eugene, Oregon | United States

You may have noticed, web pages are getting fat. With more people on fast connections, particularly designers and clients, it is easier to justify larger pages. The old rule of thumb when dealing with dialup connections was that the total weight of the page should not exceed 30-40k, today many sites routinely top 100k. But if you are not a major destination site, those extra kilobytes may be costing you in search engine rankings.

Page Size and Page Weight

Page weight has been the term commonly discussed, and it means the size of the web page , plus the supporting images, and any external files needed to render the page. Raw page size, the file size of the html delivered to the browser (including any SSI includes) is going to be our main focus for this discussion. We are going to discuss why to keep it small, and how.

The Top Search Engines Like Small Pages

Google, Fast and other new engines like small pages for several reasons. First, they are or will be doing full page indexing, meaning that they cache and parse the full page, not just title and meta-tags (which some are ignoring), so smaller pages means less storage and bandwidth for them.

Second, and this is a pet theory of mine, a smaller page delivers its result to the user quicker, which impresses the user with the SE's efficiency. That is, a smaller page makes the search engine look good. Third, smaller pages typically have a higher content/code ratio, which makes extracting what is important on the page easier for the search engine.

Observing the Small Page Advantage

Many factors play into SE results, so observing this phenomena in the wild takes a little detective work. Casually one can observe that a set of search results often has a site or two of high PageRank (Google term) or popularity at the top, followed closely by less well known or linked to sites. The sites at the top can be a little fat and happy, because they have a bank of popularity to support them. It is the lean and hungry ones that follow that demonstrate that other factors being approximately equal, a small page wins, and occasionally knocks off the fat cat. How small? 5-10k best, 10-15k acceptable for the file size of your html.

Other Compelling Reasons for Staying Lean

Over and again research has shown that visitor leave if a page loads too slowly, and return more often to quick loading ones. Even with fast connections, a page that loads a lot of small images can be slow, and browsers render small, simple pages quicker.

Keeping content, reducing fat. To get a small page size, but keep the content that visitors and search engines appreciate, we must reduce the code to content ratio.

The Diet - Eliminating HTML Code Bloat

Use Cascading Style Sheets (CSS)

Simply replacing font tags throughout a page with styles declared in a small style sheet can save a significant amount of code.

Use Very Simple Tables - Avoid Nesting

Tables are real heavyweights in the html. There are often reasons to use a simple table in a layout, the real lard comes from layouts that are made by nesting tables. Don't be afraid to mix and match css and tables, or try an all css layout that degrades gracefully in older browsers.

Remove Some of the HTML Code Formatting

A table that is strung out in a long line is much lighter than one formatted with a new line every tr and td. Many authoring tools limit line length to 60 characters or so by default, a browser will accept 255 character lines (in fact they like long lines), some email programs stop at 200. I try and keep it readable in a large monitor, and return important items. Even going from 60 characters to 120 per line can save several k on a page.

Cut Down on Small Images and Spacers

Not only does it save in download time, but in the code to call them.

Remove Unnecessary Head <head></head> Items

Take out extraneous meta tags, move javascript to an external file (.js).

Replace JavaScript Rollovers

Image rollover links, and the javascript to do them are costly in both page size and total page weight. CSS rollovers can give a very similar effect with less code. With a little ingenuity, a variety of effects are possible.

Conclusion

You don't have to be a disciple of the new minimalism to like lean pages. I have taken pages from a major site, done by a team of skilled professionals, and cut the page size and total page weight in half with no visible difference, or extreme measures. Do you really need that sugary image rollover?

< Back to Member Submitted SEO/SEM Articles

Article Disclaimer: The SEO Consultants Directory does not endorse the opinions and/or facts expressed by members who provide marketing articles for our site. These search engine optimization and search engine marketing articles are here for you to review and make your own decisions.