Scroll to the end for links to the previous posts in this series.
Code bloat is one of my minor amusements when I’m evaluating websites. I enjoy looking at the source code of a web page and then scrolling down to see how long the code for the page is and mentally compare it to how long it should be. What I really enjoy most is when I see a really well designed page with very little code. That makes me happy, but then I’m pretty easily amused anyway!
I’m not a coder myself, so if you ask me to develop a web page I’m going to use a program such as Dreamweaver to build it. But just because I can’t develop code on my own, doesn’t mean I don’t know how to strip down the unnecessary junk from HTML in order to produce a cleaner coded page.
The problem with programs such as Dreamweaver is that they don’t always create the best or most streamlined coding structure. Unfortunately, many professional designers don’t even know enough about code to go in and fix what these development programs create. To be fair to Dreamweaver, it isn’t even close to the biggest offender of code bloat. That title, from my experience, goes to any product from Microsoft. Especially those programs with a “turn this into a web page” feature. (If you ever want to see some of the worst code imaginable, create a “web page” using Microsoft Word.)
What does code bloat have to do with search engine friendliness?
Reducing code bloat no only cuts down on page download time, but it also makes it easier on the search engines as well. When spidering a page the search engines pull the entire code (or the first 100kb) of the page. Only later is that information parsed. By reducing download time the spiders, which are already fast, can burn through many more pages more quickly, quite possibly indexing more pages than they would otherwise.
Once the pages have been spidered, the reduced code then makes it easier for the engine to parse the data. While engines have gotten much better about getting through the junk code, reducing the amount of code they have to sort through will only streamline their processes and potentially giving you an additional, albeit insignificant, advantage. Of course, we can argue about this all day, but the powers behind the search engines have stated numerous times over the years that anything site owners can do to make the spider’s job easier, the better. Take that however you want.
There are a number of things you can do to reduce the code bloat of your website.
CSS
CSS has many benefits for programmers. For this article the most relevant one is that CSS greatly reduces the amount of code on your page. This is especially true if you use external CSS files but we’ll get to that in a bit. First and foremost, however is that CSS can be used to eliminate duplicate on-page styles from the code. I’ll provide links to some how-to CSS references but for now, just know that the amount of code that can be replaced using CSS instead of < font > tags is pretty significant.
One of the other great things about CSS is that none of it actually has to be in the page code itself, but can be called from an external CSS file. The web browser simply has to download the file once and then that CSS document will apply to every page on the website (assuming only one CSS document is used.)
JavaScript
JavaScript itself is not a code saver but what you can do, like your CSS file, is move the JavaScript into an external file. Again, just like CSS, that single JavaScript file will then be used for every page it is required to function on without having any additional download. Moving the JavaScript off the page reduces code length and page download time significantly.
There are a lot of other ways to reduce code bloat and increase page download time. Some of these include compressing images, using text instead of images, removing nested tables, etc. I don’t need to go into all of these just so long as you understand that bloated code simply isn’t necessary and the benefits of reducing and eliminating garbage code is worthwhile.
Other articles and posts related to code bloat:
Validating Your Code
Code Bloat Police
To Code By Hand or Not to Code By Hand
Previous posts from this series:
Search Engine Friendly is NOT Search Engine Optimized
An Argument for Website Validation
A Day in the Life of a Search Engine Friendly Web Page: The Domain Name
A Day in the Life of a Search Engine Friendly Web Page: Tile and Meta Tags