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.
Improvements in Design
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.
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.