Reducing code bloat

Code bloat may or may not have anything to do with SEO. It doesn't matter, bloated code is very uncool and you should spend some time reviewing your site and reducing code bloat. Here are some good starting points to get your web pages lean and mean.

What is code bloat?

Code bloat is a term describing a HTML page that is mostly markup, and not much content. There are tools that tell you what percentage of your page is content, but don't study these too closely - just try to reduce the code that you don't need and your site will love you for it.

Here are the culprits...

Dreamweaver Image Swap code bloat

This is a pet hate of mine - that Dreamweaver image swap code you see absolutely everywhere
MM_swapImgRestore(), MM_preloadImages() etc.

This adds 1.3kb of bloat to every page.
Simple, don't use image swaps for your navigation.

Spend some time on a CSS based menu instead, and instead of swapping the image, use the a:hover property to swap the background. You save this ugly javascript, and save having 2 extra image files per button.
Try this in your stylesheet...

#menu a {
background: url('images/button.gif');

#menu a:hover {
background: url('images/button-over.gif');

Easy enough?

Re-using the same css styles code bloat

I think most people make this mistake when they start with CSS...

<div id="menu">
<a class="menu-item" href="foo.htm">Foo</a>
<a class="menu-item" href="bar.htm">Bar</a>
<a class="menu-item" href="baz.htm">Baz</a>

CSS: {
color: red;

Many people would style the "menu-item" class to look a certain way.

But a much better way is to style the "menu", and forget about the "menu-item" elements eg...
<div id="menu">
<a href="foo.htm">Foo</a>
<a href="bar.htm">Bar</a>
<a href="baz.htm">Baz</a>

#menu a {
color: red;

  • Looks exactly the same
  • HTML is easier to read
  • Less code bloat

Next Culprit: useless meta tags

Does anyone really believe that by including a meta tag telling search engine spiders to visit your site every 7 days, that they will actually do this?

Check out the meta tags I once used on all my sites...
<meta name="language" content="English" />
<meta name="author" content="My Name" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<meta name="reply-to" content="" />
<meta name="document-classification" content="" />
<meta name="document-rights" content="Copyrighted Work" />
<meta name="document-type" content="Public" />
<meta name="document-distribution" content="Global" />
<meta name="distribution" content="global" />
<meta name="Publisher" content="My Name again" />
<meta name="Publisher-Email" content="" />
<meta name="Contributors" content="Me again" />
<meta name="Page-Topic" content="Repeat the title here" />
<meta name="Page-Type" content="Promotional" />
<meta name="copyright" content="Me again" />

This is an additional 1kb of meta tag bloat, and I have conveniently catalogued my email address for spammers in an easy to read format. Great. I'm yet to find evidence that suggests that any of these tags will improve my site, so for now I'm sticking with the title, meta desc and meta keywords.

Table bloat

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="whitebg">

Nuff said.

CSS Bloat

You can often reduce your CSS by 25 - 50% by compressing your CSS files. Have a look at the Clean CSS tool, which makes your CSS smaller, but still readable. We can usually save 5 - 10kb on most sites by compressing our CSS.


WYSIWYG editors are notorious for their code bloat. The following code is pretty typical of what WYSIWYG editors can produce...
<span style="font-weight: bold;">This is bold text</span>

This isn't life threatening, but it is lazy. A better way is to use the following...

<strong>This is bold text</strong>
<b>This is bold text</b>

The <strong> tag is for emphasizing text, where the <b> is just for making it look bold. This makes no difference in a browser, but apparently screen readers do differentiate. Matt Cutts has confirmed that Google doesn't care which you use.

WYSIWYG editors are also notorious for doing this...
<span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;">some bold text</span>

In case this isn't obvious, we have a whole pile of empty span tags, all taking up space. This can happen if you are switching back and forwards with the buttons in the editor - meanwhile the HTML code is piling up.

Comment bloat

Some people have different schools of thought on this. Comments are useful to explain to another developer what your HTML does. Comments also take up valuable bandwidth, and can result in comment bloat. This effects Javascript, HTML and CSS files.

Typically, it's worth compressing your Javascript on your "live" copy so the comments are removed. This can reduce file sizes by 25 - 50%, which is worth the effort. Also check all those javascript libraries you have included - you will be surprised how many are not compressed.

CSS can be a complicated creature, and comments can be invaluable for explaining all your Internet Explorer hacks to the poor soul who has to interpret your CSS, 5 years later when Microsoft release IE8. Once again, it can be worth maintaining a compressed and uncompressed copy to strip out the comments.

HTML I deal with differently. I use a templating engine for producing HTML (Smarty), and this has it's own comment system. So my HTML comments are not visible in the outputted HTML code, which gives the best of both worlds.

Session ID Bloat

This is one many people wouldn't think of. In PHP, the session ID or PHPSESSID is 32 characters, and often it will attach itself to every link on the page. 32 characters x 50 links is 1.6kb of session ID bloat. It all adds up. Aside from this, session IDs are dangerous for SEO, so they should be removed from your URLs anyway.

Valid HTML badge bloat

When I first learned CSS I studied hard and got my first site to validate against XHTML standards. I was so stoked I rushed off and got myself some "Valid XHTML" badges to splash all over my site.
Now, I consider these badges to be code bloat.

Generally speaking, you can tell a Quality site from a rubbish one by looking at it - the ones that adhere to the standards invariably have a certain style to them. They work properly in some of those "other" browsers that nobody uses, such as Firefox and Safari. You notice the fact that the text resizes to any size you like, and the site uses various semantic elements such as headings and lists. They aren't coated in adsense or affiliate content. Images have alt text. The colours make sense. The hyperlinks aren't blue/purple, and text isn't times new roman. If sites have all these things, then they will often validate, and they don't need the badge to prove it. Most of the time, I don't see the need for the badge, and I'd rather save the bandwidth.
Valid CSS


One exception is where you are explaining web standards to non-techies - in this case it may help make a stronger argument.


This must be close to the world's most un-comprehensive lists of ways to reduce code bloat, but these are common issues that increase the size of your pages. I do believe Google favours lean, clean code, but not by much. Clean your code for the benefit of your visitors, and you can save some bandwidth.

Bonus Question: Does anyone know why there is so much code bloat on ? The amount of wasted javascript on the pages is just hilarious. One would think that high traffic sites would count every character to reduce their bandwidth bill and server loads. Who knows why this site is so bloated.

Harvey Kane

Digg StumbleUpon technorati blinklist furl reddit sphinn

Tags: cssjavascriptw3ccss javascript w3c