Use Short Relative URLs - url abbreviation avoids long uri files and directories

Brevity is a good thing. Absolute, verbose URLs are out, relative short URLs are in. By carefully naming your files and directories, and judicious use of abbreviation with mod_rewrite and content negotiation with same, you can speed up your pages while maintaining legibility and search engine positioning.

Here’s an illustrative example of a overextended URL:

<img src="http://www.domain.com/files/images/
single_pixel_transparent_gif.gif" width="1" height="1">

This URL has a number of problems, including its length and missing ALT attribute. Let’s see how we can shorten it into a more reasonable size. But first, a brief URL tutorial.

Anatomy of an URL

A uniform resource locator, or URL, is a unique address that points to where a resource is located on the Internet. The URL consists of the document’s name preceded by the directories where it resides, preceded by a domain name, preceded by the protocol required to retrieve the document.

protocol://server_domain_name/pathname

Relative URLs

When possible, use relative URLs rather than absolute URLs. Absolute URLs include the server and protocol so they are unambiguous, but can cause problems when moving your files to another location. They are also unnecessarily long. Relative URLs base their location on the document’s base URL, and browsers fill in the rest. Our too-long-at-the-party single pixel GIF could be shortened to:

/files/images/single_pixel_transparent_gif.gif

Abbreviate File and Directory Names

Even better, abbreviate the filename of this non-functional spacer graphic, like this.

/files/images/t.gif

You can go even further and use content negotiation to omit the “.gif” part entirely. But why stop there? Move the image, your logo, and other frequently used resources up to the root level of your web server, and use the following minimalist URL.

/t.gif

The Base Element

To make relatively linked pages work offline and shorten your URLs, you can use the <base href> header element. The base tag must appear within the header of your XHTML document. Normally, browsers fill in relative URLs based on the URL of the current document. You can change that behavior with the base element to reference the base URL, not the current document’s URL when resolving resources, like this:

<base href="http://www.domain.com/" />

Now your relative URLs will resolve to this domain’s top-level directory and also work from your hard drive.

Relative Base Element

One little-known technique is to use a relative URL as your base href to save space. By referencing a frequently used directory, you can save space within your XHTML files. For our single pixel GIF example you could use the following base element.

<base href="/files/images/">

Now when you reference an image, you can just refer to the file name itself, without the directory location. For pages with numerous images that you may not want to move to the top level directory, this can save a substantial amount of space.

What About Search Engine Optimization?

Search engine optimizers and information architects naturally encourage descriptive filenames and directories. Search engine spiders feast on keyword-filled URLs, auto-breadcrumb scripts display directories and files, and logical hierarchies help users navigate. To avoid over-abbreviation, some webmasters choose to abbreviate and relocate only frequently used resources on high traffic pages, or use mod_rewrite or the base element for the best of both worlds.

Conclusion

Using short, relative URLs can make your pages download faster, and ease migration headaches. Using the base element and mod_rewrite can alleviate the need for absolute URLs, and save additional space.

About the Author

Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update.

Use Short Relative URLs – url abbreviation avoids long uri files and directories