Kick out CSS and JavaScript code from your HTML pages21 JAN
2007

Internal CSS and JavaScript code is probably the first thing you should touch base when starting to optimize your website, both for users and search engines.

We will get back to the benefits of doing this, but let's see how much of a difference you will probably see if you're going to apply these easy steps.

Let's take for instance Yahoo.com. The main page of this website is probably the one accessed most ofter by the visitors. So we will analyse this page, but you can probably apply the same rules to any other pages in the website. The page by itself has about 120 KBytes of code, not to mention the other websites object (javascript files, css files, layout images, image & flash ads). Once we removed the internal CSS style sheets, what do you know? The page got 50 KBytes shorter. Not bad for start. Next step, removing internal JavaScript code, gets our page down to 25 KBytes of code. Judging by the amount of the actual content, that is still way to much. But this post has covered it's topic, so we're not gonna get deeper with other content optimization techniques. Now, since there are tons of css styles and javascript functions, we'll need to include the specific inclusions tags back into the page. This will add a couple of KBytes of code to those 25 KBytes, but we're still below a quarter of the original size.

Some of you might go and ask: What's the use of moving the CSS Styles and JavaScript code from embedded code to external files? Well, the sample page we used for this, Yahoo.com, helps me give you a fast answer on that: the content is changing freqeuntlly on this website, so eveytime a new headline, story, event or any kind of content is updated on this page, you will download all those tons of CSS/JavaScript code. If those were external files, cache-able by your browser or proxy server, that info would only be downloaded on the first access. This means that you save about 100 KBytes for each pageview on this website. Multiply this by the number of pages you view each day on Yahoo.com, then multiply this by the amount of users that are accessing this website each day, and you will probably see how much bandwidth Yahoo.com is wasting. I am sure they can afford that, but in case your company is not as big as theirs and you have kind of like the same website model, you should really consider doing some improvements in your website's structure.

On the other hand, if saving your bandwidth is not a priority, how about saving your visitor's? How about keeping your visitors on your website as long as you can? How about trying to deliver the information your visitors are requesting as quick as possible? How about trying to create a better user experience for your visitors? Well, if all these haven't convinced you by now, think about one last fact: search engine crawlers/spiders/bots are using your content to index your website. All that CSS/JavaScript code is no use for them. So why not cleaning up the place for them and allowing them to actually get what they want? That's of course, if you want them to send you what you want: TRAFFIC.

I think I've kind of proved why this simple content optimization technique can do a lot for your on-page SEO. If you'll have this in mind when you're starting up your next website, you don't even have to clean the mess when you're done. You'll have a clean website from the start.

Later Edit: The numbers you see in this post, were reflecting the Yahoo's website at the time this post was writen.