|
|
Last Thursday I started a conversation about how code bloat can effect your site's performance with the search engines. Today I'm going to map some specific types of code bloat and very briefly--non-technically--show you how you can eliminate the bloat to improve your pages performance for both visitors and search engines.
There are generally four things that cause code bloat:
There are three main types of CSS styles that you can use: inline, embedded and external.
Inline CSS
Inline styles are used directly within the tag that you are attempting to style. It affects only that particular tag and will have no affect anywhere else on the page.
Example:
<table style="background:url(/images/background.jpg);">
Embedded CSS
Embedded CSS is when style code is grouped together for application on the entire page. This type of CSS is placed within the <head>tag. Embedded CSS will not have any effect outside of the page it is placed on.
Example:
<style type="text/css">
a, a:visited, a:active {
color: #FF5200;
}
a:hover {
text-decoration: underline;
color: #002FA6;
}
</style>
External CSS
External CSS is when styles that affect the whole site are placed in an external file on the server and referenced from each individual page. Changes made here will effect every page on the site that references that particular stylesheet.
Example:
<link rel="stylesheet" type="text/css" href="styles.css" />
There are some clear benefits to using CSS over HTML for your on-page formatting. Looking at the three types of CSS above, the one that provides the most significant benefit is the external CSS. With the other two, while the code can be kept a bit cleaner than normal, all the styling information is still on the page. This means that it has to be downloaded each time a page loads.
With external CSS all of the code that would otherwise be on the page is replaced with a single line of code which references the style sheet. Once your .css file is downloaded it remains in the browsers cache allowing each subsequent page to be loaded much faster.
Not only does using external CSS reduce code bloat but it makes editing your site-wide styles much easier. Want to change all your links to blue and make them underlined? Make a couple minor edits in CSS and every page of your site (if it's constructed properly) shows the changes. Need to make your font bigger? A simple CSS change does the trick.
You can also use CSS to eliminate excess table usage, which can cause considerable code bloat. I'll discuss more about that tomorrow.
I won't spend too much time discussing JavaScript because the concept here is pretty much the same as CSS. Instead of placing your JavaScript code on the page, place it in a .js file and then reference it in your <head> tag like this:
<script language="JavaScript" src="/scripts.js" type="text/javascript"></script>
Again, the same downloading concept applies. The external JavaScript file simply needs to be downloaded once and then it remains in the browsers cache allowing all subsequent pages to be downloaded more quickly.
I've seen countless sites muck up their code with on-page styles and JavaScripts. By removing your CSS and JavaScripts off the page you can do a great deal of code streamlining. Pages will load faster and you'll reduce the code-to-content ratio that can have an effect on how search engines score your pages.
|
Stoney deGeyter is the President of Pole Position Marketing, a leading search engine optimization and marketing firm helping businesses grow since 1998. Stoney is a frequent speaker at website marketing conferences and has published hundreds of helpful SEO, SEM and small business articles.
If you'd like Stoney deGeyter to speak at your conference, seminar, workshop or provide in-house training to your team, contact him via his site or by phone at 866-685-3374.
Stoney pioneered the concept of Destination Search Engine Marketing which is the driving philosophy of how Pole Position Marketing helps clients expand their online presence and grow their businesses. Stoney is Associate Editor at Search Engine Guide and has written several SEO and SEM e-books including E-Marketing Performance; The Best Damn Web Marketing Checklist, Period!; Keyword Research and Selection, Destination Search Engine Marketing, and more.
Stoney has five wonderful children and spends his free time reviewing restaurants and other things to do in Canton, Ohio.
Search marketing information for small business owners.
Fetching the best small business news.
A friendly place to share small business ideas and knowledge.
A different kind of small business marketing conference.
The directory of the best small business sites and tools.
Home of our network.
Copyright © 1998 - 2012 K. Clough, Inc. All Rights Reserved. Privacy
FreeFind Site Search Engine - FreeFind adds a "search this site" feature to your website, making your site easier to use. FreeFind also gives you reports showing what your visitors are searching for, enabling you to improve your site. FreeFind's advanced site search engine and automatic site map technology can be added to your website for free.
(Unpaid placement - FreeFind is a Search Engine Guide partner.)