|
Fixing Code Bloating To Improve Performance
By Stoney deGeyter
Expert Author
Article Date: 2008-07-02
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: - On-page styling
- On-page JavaScripts
- Excessive table usage
- Poor HTML formatting
Cascading style sheets (CSS)
 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" />
Benefits of 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.
JavaScript
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.
Comments
About the Author:
Stoney deGeyter is president of Pole Position Marketing (www.PolePositionMarketing.com), a search engine optimization / marketing firm providing SEO and website marketing services since 1998. Stoney is also a part-time instructor at Truckee Meadows Community College, as well as a moderator in the Small Business Ideas Forum. He is the author of his E-Marketing Performance eBook and contributes daily to the E-Marketing Performance (www.eMarketingPerformance.com) marketing blog.
|
|
