Code bloat and its effect on your SE rankings

No Comments Written by Andrew Bonar on October 9, 2008 – 5:52 pm

If you are not a seasoned web developer it is more than likely that you use one or another Visual Web editing tools. Maybe you are using one and you do not even realise it, products like Word allow you to save your pages as HTML but it creates extremely bloated code.

So what is ‘bloated’ code?

To put it simply it is code that does not need to be there. This can be varying degree’s of ‘dos not need to exist’. On the base level, it is simply extraneous code. Code that does absolutely nothing, no formatting changes or anything else. We will call this ‘extraneous bloat’

Code like the following often occurs when changing formatting in a Visual Editor:

Elements opening and closing with no content in between, they serve absolutely no purpose other than to clutter up the code. These left over chunks of code are as a result of trying different formatting, when you undo a font change, sometimes instead of deleting the element created it just moves the tag, so that the element is left behind with no effect on formatting.

You might ask yourself, why do I care? Aside from the fact it shows a lack of professionalism, it does not adhere to standards, and it simply is not stylish? The fact that people with disabilities using special browsers may find your page illegible? Well for a start it increases the download time of your page. Too much clutter and your site me be relegated to the “too slow to index” file, getting a visit every 6 months or so and 1 or 2 pages indexed only.

That is not where the problem ends. Sometimes you get code like this
# Missing tags

<h1>heading
<h2>subheading</h3>

when they should be:

<h1>heading</h1>
<h2>subheading</h2>

Or worse still:
# Missing or mismatched end tags are detected and corrected

<a href=”http://somesite.com”>italic heading</a
when it should be:
<a href=”http://somesite.com”>italic heading</a>

The result? Some search engines think you are trying to embed hidden links and may penalise you!

Is that a good enough set of reasons for you? Great, in which case can move on and discuss other reasons code gets bloated. When using a Visual Editor its very easy to create nested tables and the like to achieve the formatting you require. However a simple ‘3 column’ web page layout can end up resulting in 15 or more tables with 50 or more table cells. Using CSS it is possible to achieve the same results without using tables at all.

SO we will call this ‘amateur bloat’ it is extraneous code that is caused as a result of limited web design experience. So you may say to yourself you have no desire to learn about the code behind the web page, your site looks great and you saved yourself a packet by doing it yourself in Microsoft FrontPage, or you got it done on the cheap. All that money you saved on web design you spent on content, pretty smart huh! Content is King after all.

You optimised your content for the search engines, it is keyword rich and as you already pointed out, by using one of those $60 templates from some template site looks real good. Well guess what, those fancy tables do a little more than look pretty, sometimes they can tell the search engines that your page content is the least important thing on the page, and that the banner advert at the top of the page is really important.

This is best explained with a graphic

So you see that the search engine reads the content one table at a time, in the order it appears in the code. Table 1, 2 then 3 where your content resides. This is not great for your well written content, if its relegated to the end of a page with bloated HTML the search engine may give up on your page before it even gets there if the page load is too long. There is no point in optimised articles no one reads and the search engines do not see.

Suddenly that initial saving on a web development company becomes a costly mistake. If your web design firm does not understand the importance of SEO then maybe it is time to consider another.
If you used CSS to create the same visual effect an additional (important) bonus is the SEO benefits, which means you can have column 3 read first.

This is an article in itself, but start by getting rid of that lazy code, you can do this easily using a tool called HTMLtidy. There are other products out there, but this imho is the best.

It is not simply a great tool for cleaning up code generated by your Visual or WYSWIYG html editors, it can do a lot more, so it is well worth checking out. HTMLtidy was originally developed by Dave Raggett. It is a free tool, an excerpt from his web page (http://www.w3.org/People/Raggett/tidy/):

“When editing HTML it’s easy to make mistakes. Wouldn’t it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett’s HTML TIDY is a free utility for doing just that. It also works great on the atrociously hard to read markup generated by specialized HTML editors and conversion tools, and can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities.”

Check out their online interface tool here:

http://www.w3.org/People/Raggett/tidy/

If we had a tool of the month here at Stylishdesign.com, then it would be HTMLtidy this month. It certainly adds performance to your code by taking out the junk. Now an example of what it can do….

This is the code after HTML Tidy:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2//EN”>

<body>
WORKING MOM NOW YOUR HOUSE CAN SHINE LIKE A
PALACE published By The queen of
shiny clean Dutch heritage! Proven effective Program! Thank you very much
for choosing my e-book Copyright 2008 Your browser may not support display of this image.
</body>
</html>

And this is the code before:

<html>

<body>

WORKING MOM 
NOW 
“YOUR” HOUSE
CAN 
SHINE LIKE A “PALACE”  
  
 
published
By 
“The queen of shiny clean”  
 
Dutch heritage!  
 
Proven effective
Program!  
  
  
  
 
Thank you very much for
choosing my e-book  
  
  
  
  
  
 
Copyright 2008  
  
 
 
  
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 

<center>

<img src=”http://mail.google.com/mail/?name=43d6b4299e7e408b.jpg&attid=0.5&disp=vahi&view=att&th=11ce1c10c70d27b0″ alt=”Your browser may not support display of this image.” width=”267″ height=”200″>
</center>