Optimize your website by ordering your source code
Source ordering is the practice of placing the most relevant page code at the top of your HTML file and using CSS to lay it out according to where you visually want to see the code.
< div id="nav">
nav code
< /div>
Placing blocks of code into named DIV containers will allow you to place the div on the page where you want to see it and place it in the code according to importance. We all know that the first text of an HTML file is the most crucial to spiders and that placing keywords at the top of your text is very important. Using this method the most important text, the main body of your page, is placed first in the HTML file. Your header may look nice, but it doesn’t help you rank well.
Ever notice how some help sites tell you to move your nav to the right of the screen to improve SEO? Why confuse all of your users who are used to nav on the left just to please the Search Engine spiders? What if I told you that you can keep your nav on the left and still get the same SEO benefits as placing it on the right? For that matter, how about placing your header code below your main content in the HTML of the page? And what about placing large flash files and images at the bottom of your page to allow the text to load first. The main text of the page is why your visitors came to that page… why make them wait for it?
If your header and other images on your page are unusually large, you may have a slow loading page. Placing these images and flash files toward the bottom of your page gives it a fast-loading appearance. Your customers can begin to read about why your product or service is so great before they finish waiting for the picture of it to load. This helps not only the SEO of your site, it helps customers on your site stay in a steady flow towards the conversion (sale, signup, newsletter). In many cases, moving a single flash animation or large graphic toward the bottom of the file will result in an increase in sales or membership. Using CSS, you’ll never notice a difference once the page is loaded. What you will notice instantly is that your page seems to load quicker!
The header that I refer to is a part of the site that pretty much everyone has in common. It’s the pretty graphics across the top of the page that goes from side to side and covers the top section of the page. Enclosing the header in a DIV and dropping it to the bottom of the code on each page allows the text on the page to load first. By the time the header loads, the visitor has already found the beginning of the text and has begun reading through it. The alternative would be to move on to another site while waiting for your images to load up on their page before they can find out about it.
As well as mathematically helping SEO, source ordering also helps to bring a perceived increase in load time which helps your conversion rate increase. Source ordering is the ultimate way to separate content from presentation and get all of the benefits you seek in one solution.
So why doesn’t everyone use it? While the benefits of CSS and standards compliant design are still being discovered and are becoming more mainstream, there is still an undying clutch on the old ways of doing things. Source ordering takes a higher degree of skill than klunky old table-based layouts which most wysiwyg programs like FrontPage put out. Source ordering can be confusing for non-programmers to look at because it does not mimic human logic… that the top of the page should be at the top of the file used to display that page. Source ordering will likely result in higher overall costs for your website as the code must be intelligently designed before the page begins to have it’s own look. This is another thing that scares most people off at first.
I have used source ordering on several websites with large pages and increased the perception of loading speed to enhance a users visit. This has also helped the search engines to rank the pages higher as their content is more readily accessible to a spider. Between getting better ranking and being able to keep visitors longer and improve your conversion rate, any additional expense of time and resources spent on proper source ordering has the potential to pay itself off and work out better for the website owner over time.