Put Your Web Pages on a Diet
by Christine Churchill
The beginning of the year is a time for resolutions. Polls show that going on
a diet is the number one resolution Americans make. After
all that holiday eating we start eyeing our waistlines and
promising ourselves to do something about it. It occurs
to me that this same resolution should apply to search engine
marketers this year.
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!
This article originally appeared in the MarketPosition newsletter.
More articles...
Back to home page
|
