{ Original Post by Stoney deGeyter }
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)
CSS eliminates on-page stylingThere 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.
Related Entries :
- Site Clinic: No Good Web Design Idea is Original, So Use It!
- Site Clinic: You’ve Got Great Usability, Now Start Optimizing
- How to Fix the Bloated (Tables and HTML) Code that is Jacking Up Your SEO
- How to Fix the Bloated Code that is Jacking Up Your SEO
- Site Clinic: Navigation Usability Can Make Or Break Your Website
How to Fix the Bloated (Tables and HTML) Code that is Jacking Up Your SEO | Search Engine Optimization Resources on 2009/12/29 at 18:38 :
[...] I discussed code bloat by looking at how we can move style sheets and JavaScripts off the page in order to clean the coding up quite a bit. I this third post about cleaning up bloated code I [...]