Put Your Web Pages on a Diet

by Christine Churchill

Seems like the number one resolution people make, at least in America, is to promise themselves to go on a diet and slim down their waistlines . It occurs to me that this same resolution should apply to search engine marketers

So raise your right hand and repeat after me: "I hereby resolve to slim down my Web pages so I can get a better search engine ranking."

Experienced SEOs know that you can boost your rankings by moving your page content as close to the start of your HTML code as possible. Search engines consider words near the start of your HTML code to be more prominent, and therefore more important, than words buried deep inside the file.

Unfortunately, many web pages are hurt by using layout templates that downgrade the prominence of the page's primary content. Elaborate HTML tables used to create the page's masthead and left navigation areas end up pushing the page's content section - and therefore its keywords - far down in the file.

Just as seriously, web designers clutter the HEAD section of their documents with large sections of JavaScript code or embedded Cascading Style Sheets. While this code can be useful, it pushes your keywords even farther down in the HTML file.

Restructuring your layout tables to improve keyword prominence can be a real challenge, and may force you to make design compromises.

Fortunately, our New Year's resolution involves something that's much easier to address: those bloated JavaScript and Cascading Style Sheets.

That's good, because for many web pages these are the fattest components. I've seen HTML files that were 100 kilobytes in size, yet fully 60k of this was JavaScript code.

The prospect of changing your JavaScript code intimidates many people. If you're like most webmasters, you don't write your own JavaScript, but instead use a third-party script or script inserted by your HTML editor.

However, to slim down our pages we won't actually change the content of our JavaScript. We will lift it intact and place it in an external file. Just be aware that when you place your JavaScript in an external file, you don't need to surround the JavaScript code with SCRIPT tags. In fact doing this may keep your script from working properly.

Once you've moved your java code to a separate file, modify your main HTML page to reference the external JavaScript, like this:

<SCRIPT SRC="myscript.js"></SCRIPT>

In other words, scan your Web pages for appearances of the <SCRIPT> tag. Remove anything between that tag and the closing script tag. Place it in a separate file and save it. You should then reference that file with a SCRIPT SRC tag like the above example. Upload your changes when you are done.

Offloading a Cascading Style Sheet is just as easy. Again, cut and paste your style sheet into a separate file. It must be a different file from the one containing your JavaScript. This external file should contain the body of your style sheet, without the STYLE tags surrounding the CSS code.

Now modify your web page to reference the external CSS file, like this:

<LINK REL="stylesheet" HREF="mystylesheet.css" TYPE="text/css">

To follow proper HTML coding, this LINK tag should be in the HEAD section of your page and before any references to the defined CSS styles.

It's also a good idea to assign different file extensions to your external files, such as code.js and style.css, to distinguish them from your HTML files.

That's it. Be sure to backup your pages before making any significant changes, and to test your new pages when you're done.

Offloading JavaScript and CSS code like this has an additional benefit that has nothing to do with search engine optimization: It speeds up your page's load time. Internet Explorer treats external JavaScript and CSS files in much the same way as graphics, caching the files in case other pages use them. If the same CSS or JavaScript is used on multiple pages, the later pages will benefit from the cached copy already having been downloaded. That means your visitors will only need to download the files once. The more bloated your JavaScript, the better this load time improvement will be.

Not only that, but you'll only have to make changes to your script in one location. The changes will then be reflected in all the pages that reference the script, making maintenance much easier. This is another example of how SEO techniques can also improve the usability of your web pages.

To sum things up, our New Year's resolution can improve your search engine ranking, improve your page's load time, improve maintenance, and it's easy to implement. That takes a lot less willpower than a real diet!

About Author

Christine Churchill is President of KeyRelevance.com a full service search engine marketing firm. She is also on the Board of Directors of the Search Engine Marketing Professional Organization ( SEMPO ) and serves as co-chair of the SEMPO Technical Committee.

This article is copyrighted and has been reprinted with permission from FirstPlace Software, the makers of WebPosition Gold. FirstPlace Software helped define the SEO industry with the introduction of the first product to track your rankings on the major search engines and to help you improve those rankings. A free trial of WebPosition Gold is available from their Web site.

Related Services

Explore the expert services of Page Traffic that puts you in the search engine spotlight.