URL Abbreviation | Speed Up Your Site[c] Web Site Optimization

URL abbreviation is a little-used yet effective HTML optimization technique. Yahoo!'s home page, the busiest page on the planet, spans the entire web but weighs in at only 22.4K for the HTML. Yet Yahoo.com has over 279 links. How do they do this? Listing 4.12 shows you a snippet of Yahoo!'s abbreviated URLs.

Listing 4.12 Yahoo.com HTML Snippet

 <html><head><title>Yahoo!</title><base href=http://www.yahoo.com/ target=_top>...<style>a.  h{background-color:#ffee99}</style></head><body> ... <table><tr><td nowrap align=center><small><b>Shop</b>&nbsp; <a href=r/a2>Auctions</a> &#183; <a href=r/cr><b>Autos</b></a> &#183; <a href=r/cf>Classifieds</a> &#183; ...

Yahoo! uses the mod_rewrite module to automatically expand their abbreviated URLs to save space. Although each abbreviated URL requires that the server make an HTTP redirect to the longer URL (through a mod_rewrite redirect), the faster download speed on high-traffic pages can be worth it.

The idea is to shunt longer URLs to the server to save space. After hand-optimizing Webreference .com's home page to 24K, I thought that was as far as I could go, but as you'll discover, there's always room for improvement. By automatically abbreviating our links using a Perl script and expanding them with the mod_rewrite module, we trimmed 5K off our home page, a savings of over 20 percent. ^[9] You'll find out how in Chapter 17.

^[9] Andrew King, "Evolution of a Home Page" [online], (Darien, CT: Jupitermedia Corporation, 2001), available from the Internet at http://www.webreference.com/dev/evolution/.

Shorter URLs Are Better

On high-traffic pages, shorter URLs can make a big difference in file size , up to a 30 percent savings. Without mod_rewrite , you can still name frequently used files with short names . So instead of this:

 <img src="/images/global/transparent1x1.gif" WIDTH=1 HEIGHT=1 ALT="1-pixel GIF">

Do this:

 <img src="t.gif" width=1 height=1 alt="">

By placing images and objects high up in your directory structure, you can shorten their URLs. Of course, there's always a tradeoff . Search engines give higher importance to keywords in URLs, which means that keyword-rich web pages can make for longer links. By auto-abbreviating URLs, you can have the best of both worlds : short abbreviated URLs on your home page that resolve to longer keyword-rich URLs.

Also, don't forget to optimize and abbreviate any URLs in your JavaScript.

Trailing Slash

URLs that point to directories technically are supposed to end with a slash to indicate that the URL indeed points to a directory. Authors commonly omit the trailing slash, however, forcing the server to perform a redirect to figure out whether the user is requesting a file or a directory. By including the trailing slash for URLs, you can speed up the response time of directory URLs.

So instead of this:

http://www.domain.com/dir

Do this:

http://www.domain.com/dir/

By using directories rather than files, you also can shorten your URLs while making them more universal. So instead of this:

http://www.domain.com/dir/about.asp

Do this:

http://www.domain.com/dir/about/

Or even better:

http://www.domain.com/about/

This way you don't lock yourself into one particular technology. Of course, leaving off the trailing slash saves a byte. A compromise for maximum file size optimization would be to use redirect URLs without trailing slashes , and include them in your redirect file. For example:

 <a href="r/ab">About</a>

In this line, "r/ab" maps to "/about/" .