How to Fix the Bloated (CSS and JavaScript) Code that is Jacking Up Your SEO
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.
“Instead of placing your JavaScript code on the page, place it in a .js file and then reference it in your tag like this:”
I would advise to do just the opposite, because when you place place your .js file at the bottom of your page, your page would be appearing much faster for your visitor because the browser doesn’t have to process the .js first before displaying the page element.
Reference: http://www.youtube.com/watch?v=BTHvs3V8DBA&
Forward to time frame: 31:37
Rule 6: Move scripts to the bottom
This will allow your pages to load faster for your visitors.
I disagree with ed – perhaps this is a problem with those unfortunate souls still on 14.4kbps dialup but with the current market penetration of broadband – I would argue that the half-millisecond of extra loading time that it takes to load a referenced script file is more than made up for with effective on-page SEO.
As long as your hosting is solid and your target market isn’t in Afghanistan, this should not be a problem.
Not to mention that once it loads then it’s loaded for the rest of the pages.
It really depends on what kind of .js file you’re loading, but i’ve experienced personally in some cases a much faster page load time when placing your .js at the bottom from a visitor perspective, and i’m on a quick connection.
At least not 14.4kbps…
“Not to mention that once it loads then it’s loaded for the rest of the pages.”
Exactly what can cause your page in fact to load slower Stoney.
Placing your .js files at the top of the page will slow down your page…how much all depends how much processing time is involved.
Yeah, in some cases you may not see a noticeable difference yet in other cases there will.
Watch the video guys for a more indepth explanation to understand why this is the case.
P.S. – The video is from the Yahoo performance team.
In keeping with the An Open Letter to SEO Bloggers: Back up Your Statements!”, do you have a citation or table to “back up” the code-to-content ratio issue, insofar as the “each engine has a limit as to how much data they will download per page” claim?
Let me just say that all of this is “in my opinion” and “based on my experience” and “subject to be proven wrong.” 🙂
Good to know. I’ve tried to sell my team on the topic before, but been burned when looking for anything definitive to “prove” it.
I am having major issues with my myspace css codes, and the funny part is I know nothing about them. However I cannot put a new layout on my profile without it running together, the contact box disappears. I fooled around with the “myspace editor” and now Im stuck with the “myspace editor” layout, which is not very appealing! The myspace editor says Im having css code problems! I contacted myspace to just get the start over layout and I get nothing from them! I do not know how to fix the css codes? I need someones help! I do not want to cancel my account and start over, so Im needing major help with my css codes.
If anyone can offer help, please help me @ rosealisha2@gmail.com I really appreciate it!
@ Joomla, I’m not sure one loads faster than the other. In both cases, once the image is downloaded it will stay in the browsers cache for the next page that loads. But anything you can do with CSS will likely reduce code on the actual page therefore, essentially, allowing the page to be downloaded faster.
The other question is a class in and of itself.
To “Alisha Rose”
Of course Myspace won’t help you with this css problem! There is no shortcut for this, “short” of learning css yourself or hiring a professional developer. Myspace and all these other “social” websites are hobby sites really. You can post for free so don’t expect any kind of support. 😉
Cheers!
This is indeed a great article. CSS always plays a vital role in web design and it always gives you opportunity to make your website Google friendly. I have compiled few factors ‘why Google loves CSS’ that you can check at http://www.bestpsdtohtml.com/get-to-know-why-css-is-good-for-google/
Read by small business people, our newsletter delivers a digest of articles from the top search engine marketing experts. You will learn about:
Our newsletter is the perfect way to stay up to date with all of the latest trends, events and techniques in using search engines to grow your business and make more sales. Subscribe here. Your email address will NOT be given to third parties.
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.
Buy UPC Codes
Get your products listed online!
Search marketing information for small business owners.
Fetching the best small business news.
A friendly place to share small business ideas and knowledge.
Small business support through education, resources and community
The directory of the best small business sites and tools.
Copyright © 1998 – 2018 Search Engine Guide All Rights Reserved. Privacy
Research & References of How to Fix the Bloated (CSS and JavaScript) Code that is Jacking Up Your SEO|A&C Accounting And Tax Services
Source
