Sep 02 2008
A few years ago I stumbled across a temporary page for a website that was clearly under construction. Visually, it was a simple page: an image with a thick border and some text overlaid. When I looked under the hood at the code though, it was a bit scary, especially for something so simple. That site is no longer even up but the message is still relevant.
### The original page
I had enough foresight to take screenshots of both, the page being displayed and the source code holding it up, so I've included them here for reference (click to view at larger size):
As you can see, just to have this one image (2 if you count the background pattern) show up, took about 30 lines of code. Relatively speaking, that's not a lot and probably not a big deal, but bear with me... the point of all this is coming soon, I promise.
### Modified code
To show what [web standards](http://www.webstandardsproject.org/) can do for a little page like this, I created the exact same layout:
*[See a working version here](/assets/img/blog/vav/vav_test/)*
The new code took half the amount of code to achieve the same thing. Okay, so there's more code in the CSS file. But let's say I add that into the HTML, I'd wager it ends up being about the same. And granted, I left out the patterned background. But while the number of lines of code matters, it's not what I'm getting at.
### Making it easy for search engines... and users
Search engines send little robots to travel the interweb, scouring code and sends stuff back to home base to determine if and where a site should be ranked. When you have 30 lines of code for one little image, it's a lot for a little robot to go through. The less code you can build a page with, however, and the sooner a robot can get to the meat of your site. That's right, its content, which is pretty much all that matters to search engines.
Again, for a page this small, the amount of code probably makes little to no difference (and definitely no difference to the end user). But what happens when you have a full web page up that is filled with line after line of code that does nothing other than to tell the browser how to align and place the elements of your page? Not only are you then giving the search robots more code to traverse through, but you're bloating up your page which will have an effect on download times. In other words, the browser on your user's computer also has to process all that code just to display the page. It takes just seconds typically, but as page layouts get more complex, the slower the processing becomes, especially for little ol' Mrs. Jones who lives out in the country and is still on dial-up. And let's not forget those uber-savvy users who love to surf the web on their Crackberries and iPhones and what have you. Decreased download speeds greatly affect them too!
The bottom line is simply this... keep your site's code as streamlined as possible. It will make your pages lighter, therefore keeping download times/speeds to a minimum. And as an added bonus, it makes things easier on search engines. If you're not a web developer, you'd better ask whoever built your site if it's coded to web standards. If they flinch, stutter or say, "Uh, web standards?", it may be time to think about a new developer.
As you can see, just to have this one image (2 if you count the background pattern) show up, took about 30 lines of code. Relatively speaking, that's not a lot and probably not a big deal, but bear with me... the point of all this is coming soon, I promise.
### Modified code
To show what [web standards](http://www.webstandardsproject.org/) can do for a little page like this, I created the exact same layout:
*[See a working version here](/assets/img/blog/vav/vav_test/)*
The new code took half the amount of code to achieve the same thing. Okay, so there's more code in the CSS file. But let's say I add that into the HTML, I'd wager it ends up being about the same. And granted, I left out the patterned background. But while the number of lines of code matters, it's not what I'm getting at.
### Making it easy for search engines... and users
Search engines send little robots to travel the interweb, scouring code and sends stuff back to home base to determine if and where a site should be ranked. When you have 30 lines of code for one little image, it's a lot for a little robot to go through. The less code you can build a page with, however, and the sooner a robot can get to the meat of your site. That's right, its content, which is pretty much all that matters to search engines.
Again, for a page this small, the amount of code probably makes little to no difference (and definitely no difference to the end user). But what happens when you have a full web page up that is filled with line after line of code that does nothing other than to tell the browser how to align and place the elements of your page? Not only are you then giving the search robots more code to traverse through, but you're bloating up your page which will have an effect on download times. In other words, the browser on your user's computer also has to process all that code just to display the page. It takes just seconds typically, but as page layouts get more complex, the slower the processing becomes, especially for little ol' Mrs. Jones who lives out in the country and is still on dial-up. And let's not forget those uber-savvy users who love to surf the web on their Crackberries and iPhones and what have you. Decreased download speeds greatly affect them too!
The bottom line is simply this... keep your site's code as streamlined as possible. It will make your pages lighter, therefore keeping download times/speeds to a minimum. And as an added bonus, it makes things easier on search engines. If you're not a web developer, you'd better ask whoever built your site if it's coded to web standards. If they flinch, stutter or say, "Uh, web standards?", it may be time to think about a new developer.