Yesterday I discussed code bloat by looking at how we can move style sheets and JavaScripts off the page in order to clean the coding up quite a bit. I this third post about cleaning up bloated code I wanted to address Tables and other typical causes of bloated HTML.

Bloated Tables

The most typical code bloat I find in sites I work with is created from an excessive use of tables on the page. Personally, I like working with tables over CSS. They are easy to understand and manipulate. I'm not a coder so once tables are moved to CSS it all becomes a bit more difficult to manipulate everything they way I want.

But even while I like tables, I understand the distinct value in creating a tableless website design. Tables create a significant amount of excess code that can slow down page download times significantly. Below is an image of a very simple web page built using tables.

On the surface this looks like a very simple design which shouldn't require a lot of code. But if we look at it with images off and the tables outlined, we see quite a different picture:

While this is a very simple design, the amount of tables used here is quite incredible. This small design has 13 separate tables and 45 table cells. Even if you were not to reformat this using all CSS for a tableless layout, an experience developer could re-create this with one table and five cells. That's a lot of excess code for an itty-bitty web page.

Another drawback about using tables is that your most important content isn't always read first. Within your code, the table content is displayed not top to bottom, but left to right, one cell at a time. The top cell, if there is one, is read first then the rest of the cells are read in order.

Most websites contain the header in the top cell and then the navigation in the far left cell. This means that all the items in your navigation are essentially given more prominence than your main body content which often comes next. Let's place the above layout over the design we already looked at, to get an idea of what the search engines will see first:

Assuming that this was just a four cell page (not including the footer) the content is pretty much near the bottom of the code. Will the search engines find it down there? Sure. Will it make a difference in ranking to move it up? Probably not much. But it could make a difference in getting the page spidered. Pages with a large amount of code bloat, with content pushed down pretty far, can often get bypassed or the search engines will stop spidering the page before getting to all the content.

Now here is the great thing about using CSS and div positioning. You can rearrange your content in the code without rearranging it's appearance on the page. With this method you can put your content first while pushing your navigation, which is non-essential-for-rankings, further down the page.

Not every site can go completely tableless. But even if you don't have the CSS skills to create the table-less design, eliminating unnecessary table code bloat can improve page performance quite a bit. Especially if you've got a considerable excess number of tables going on. But take that a step further and position your content via CSS to get your important content as high up in the code as possible.

Other HTML Bloat

If you're like me then you use a WYSIWYG (what you see is what you get) HTML editor for editing web pages. Now I can write code, but I find WYSIWYG editors to make things a whole lot easier, since I'm more of a visual person. But I love programs like Dreamweaver that allow me to have both the visual view and the code view open at the same time.

Usually, I'll use the visual view just as an assist while I edit the code by hand. Editing in code view, rather than visual view, ensures that you get cleaner code. Over the years I found that when you edit in the visual view it can often add excessive garbage to the code. Do this enough and over time you can get yourself some considerable code bloat.

One example of this is when you copy text from Microsoft Word. Word creates a lot of excess junk when you past it into a visual editor. Just the other day I copied some bullet points from Word into an editor. Each bullet was a line long. But upon importing, Word carried over an additional four lines of junk code--per bulleted item--that I had to go in and edit out.

Deleting things from the visual view can also leave behind excess code. An number of times we've run broken link checks for our clients to find a broken link on the page. Looking at the page in the browser you could not find the link anywhere. It wasn't until we got into the code that we found an empty link tag, like this:

<a href="site.com/broken-page.html></a>

The linked pae is still referenced, there just isn't anything actually linking to it. So the search engines see this, but the human visitor doesn't. It's just garbage code which can also be interpreted as a hidden link!

You can get these kinds of problems when you're formatting text as well:

<strong> </strong>
<em> </em>
<font> </font>
<div> </div>
<span> </span>

All of these elements are empty, yet can still reside in the code. Since they have no purpose they are just junking up the page. My recommendation is that if you use a visual editor, pay particular attention to the code. Make sure you don't get any of these remnants that are just cluttering things up.

Minor code bloat, whether it be from remnants or tables won't have a significant effect on search engine rankings. But when you make frequent edits and let the code bloat build up, or create an excessive amount of tables, then you're decreasing the download speed of your pages. If the spiders find your pages particularly burdensome then they'll leave without properly spidering all of your content. Without the content in their index, it won't matter how well optimized your content is, you won't be able to rank for it if it's not getting downloaded.