The first stage of Optimisation - Optimising the source code

Optimising the Source Code

Using CSS layers to reduce the size of your website source code

This article follows on from yesterday’s Beginners Guide to SEO, where Anita from OFEC asked about tips for optimising her website. The first stage was to replace the heavy, non-compliant code, with spider-friendly CSS divisional layers. As an example, I have taken the OFEC website index page and rewritten the source code. Since writing the article, the OFEC site has been tweaked, but the difference in the original source codes can be viewed here.

Please bear in mind that my CSS layered version is a first draft, as I have had no time to refine the design - and I’m not being paid for it - but I think you’ll agree that the CSS version of the Website is a fairly accurate representation of the tabled site, yet the source code is only 23 lines long, compared to the 247 lines of code in the original. The content on the new CSS layered site starts on line 12, rather than on 145 on the tabled site and the new CSS site has a code to text ratio of 55.84%, compared to only 16.48% on the tabled site.

To be fair, I didn’t take the time to write the hidden Ajax/javascript contact form on the index page of the CSS layer version of the site, but as it would only have added one extra line of code to the index page, as it would be in an external javascript file, I didn’t see much point in spending the time to add it. I’d also add that the links on the CSS page are blank links, but had I linked to the rest of the site, the number of lines would have been the same, but the code to text ratio would likely improve slightly.

Improvements in Design

Navigation

The old tabled version of the website has graphic links in the navigation system. This creates two issues. It adds five extra graphics to the the page, so the page takes longer to load and the search engine spiders pass no relevance to the internal pages, as they cannot read the link text. The CSS layers site has text links, which means that the site takes less time for the page to load, the links are easier for the spiders to read and parse and the links carry more optimisation juice. I would also suggest that text base navigation be added to the footer of each page on the site, ensuring all pages are linked to each other. The tabled site already has a site map linked in the footer of each page, which I would have suggested anyway.

Forms

On the tabled site there is a form that appears when you click on the graphic below the text. (I would suggest that you make it slightly more obvious that there is a form there, as I didn’t notice it until I read the source code). At present, all of the code for this form is part of the source code that the spiders have to wade through. Unless there is content in the form that you require for optimisation purposes, put the form into an external file, which only requires one line of code in the head of the document.

I realise that for many people, buying a templated site is the cheapest option, as they don’t have the skills to build a site from scratch, but even if you buy the design that you like, it’s worth paying a CSS professional to recode the site for you, as template sites rarely rank quickly on the search engines, because of the heavy source code. You certainly want to have your code optimised as part of any optimisation project, as any on-page changed will be reduced in effectiveness, if you have poor source code.

Tomorrow, I will cover the head tags and the on-page optimisation.

Leave a Reply





SEO Blog

SEO Blog

The Big Man's SEO blog is primarily aimed at website owners looking for ethical SEO tips, optimisation advice and who are interested in reading articles and opinions related to search engines, the internet, technology and software.