So far, we've learned how to shrink page layout code and how to effectively compress images. Still, there are a few more techniques you can apply to optimize your pages, and most of them spring from smart design sense. Follow these helpful design tips and your page load time will be about as miniscule as humanly possible — short of running your code through a Frinkian Debigulator.
HTTP 1.1 Compression
HTTP 1.1 isn't something you put in your code. Instead, check with your sysadmin to see if it's installed (or can be) on the server that's dishing out your site's pages.
What does it do? Upgrading to HTTP 1.1 accelerates the transmission of pages from server to surfer. HTTP 1.1 allows for server-side HTML compression so server apps (like Apache XX+ or IIS) can compress the source code of your page before sending it out over the wires.
HTML compression only works on newer browsers, but HTTP 1.1 is savvy enough to dish out un-compressed files to older browsers. Compression alone improves the download size of pages by up to 300%. (Exclamation mark.)
Other nuggets in the HTTP 1.1 nougat include persistent connections (between server and client) and pipelining (which allows the server to rattle off files without waiting for a client's "uh-huh, got that one, next please" response). Crackin' good stuff, all of it. The only negative thing we can say about HTTP 1.1 is that it's probably already installed on your server, seeing how it's well-adopted now (for obvious reasons). Still, if you suspect your hosting company is slow-with-the-program, it couldn't hurt to ask.
Link Prefetching
Link prefetching is a brand-new feature in Mozilla 1.2 which makes good thrift of a browser's idle time by downloading files that aren't on the current page but might be needed a page or two down the road. Don't worry — link prefetching doesn't slow pages down. The extra downloads don't kick in until after the current page has finished loading and the browser doesn't have any pressing matters to attend to.
If you had a photo gallery, for example, with [Previous] and [Next] navigation links by each picture, you could add a prefetch link tags pointing to both of those destinations. That way, while the user is staring at one amazing travel picture, two other pages are downloading in the background. If the user does click either the [Previous] or [Next] links, those pages will already have been downloaded, and the content will display instantaneously. More technically speaking, "Guy clicks the link, see, Bada-bing, Bada-boom, it's the next page, already. Aow!"
Link prefetching isn't automatic — it relies on you, the developer, to encode hints as to what files are likely to be needed next. (Browsers aren't prescient, but good webmasters understand a site's traffic flow.) You can encode prefetch hints in either the HTTP header or the page's HTML. There are a number of allowed variations on how to code a prefetch, but a simple HTML <link> tag with a relation type of "next" is small, easy, and our favorite. Like these:
<link rel="next" href="/images/next_big_picture.jpeg">
<link rel="next" href="http://otherdomain.net/images/the_next_page.html">
You can include multiple prefetch hints on a page, though you don't want to bog down your source code with too many links. Read Mozilla's official link prefetching FAQ for the full picture.
next page»
Home
