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.
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:
Abbreviate File and Directory Names
Even better, abbreviate the filename of this non-functional spacer graphic, like this.
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.
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
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.
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.
- Abbreviate URLs with mod_rewrite
- Look behind the screens at Yahoo and Webreference to see how using short abbreviated URLs and mod_rewrite can save space for maximum speed.
- Case Studies: Yahoo.com and WebReference.com
- Chapter 19 summary of Speed Up Your Site shows how Yahoo and WebReference abbreviate their URLs with mod_rewrite.
- Rewrite URLs with Content Negotiation
- Content negotiation can make your URLs shorter and more abstract. By rewriting URLs without file extensions to the right resources you can save bytes and migration headaches.