Speeding up your photoblog with prefetch

[designmc]

I came across this recently:
http://www.mozilla.org/projects/netl...ching_FAQ.html

It shows how mozilla and firefox have the ability to prefetch a url, meaning while the browser is showing one page, it can grab an image or html from another page in the background.

This is a great thing for photoblogs (imo). It can really improve the perceived speed of a photoblog because with it we can load the next and previous images while we're viewing an image. If the user pauses on an image long enough for the next to load, when they click next, they'll see it almost instantaneously. Same goes for previous.

For me it turned out to be very easy to implement using pixelpost.

Here's what I did:
1. Create a addon with the following two lines:
$tpl = ereg_replace("<IMAGE_NEXT_NAME>",$image_next_name, $tpl);
$tpl = ereg_replace("<IMAGE_PREVIOUS_NAME>",$image_previo us_name,$tpl);

That'll provide a couple extra tags that are very handy.

2. In the head portion of your template add:
<link rel="prefetch" href="/images/<IMAGE_PREVIOUS_NAME>">
<link rel="prefetch" href="/images/<IMAGE_NEXT_NAME>">

3. Clear your browser cache and go to your site and see if you notice a difference. See if there's a difference between going to a page immediately vs. waiting a few moments.

4. If it's not working for you or you wish to get all scientific about it... test it using the Live Headers firefox extension:
http://livehttpheaders.mozdev.org/installation.html
Go to your site, bring up Live HTTP Headers, and watch the output. If you did everything right, when you load one image page, you'll see the browser make two requests: one for the image before and after the current image.

Bad Things:
I'm not aware that prefetching will harm anything (other than disturb those paying by the byte for internet access). Apparently google isn't either. They now prefetch the first search result of every search.

Improvements:
This can easily be turned into a single ad-on if someone would like to do that. For my own reasons, I preferred to write out the prefetch tags on my template rather than within an addon... but that's just me.

Notes:
- The browser seems to prefetch in the order you specify. So the order is very important. If expect your users to view your site primarily with the 'Next' link, make sure that the Next Prefetch is first rather than last.
- You might be tempted to prefetch the url of the next/previous page, thinking that all the elements including images will be prefetched. That's not the case. If you do that, the browser will only prefetch the HTML. Nice, but not that useful for a photoblog, where the majority of the time is spent loading images.
- Wouldn't this be great to have built-in to pixelpost? After seeing the speed increase on my site (not yet live), I'd love to see this on every pixelpost powered photoblog.

Disclaimer:
- I did a search of the forums and didn't see anyone mention prefetching. If someone else has done this already... ignore all this.
- I don't know if IMAGE_NEXT_NAME is already implemented somewhere else or someway else... I couldn't find any example, hence the addon.

-Matt Constantine
(btw, my pixelpost site isn't yet online, so sorry--no live example)

[Rob]

I was looking at this too, but decided not to do it myself. My main reason was that I pay for my bandwidth, so I don't want everyone prefetching the largest things on my site if they aren't going to view them. Second point it, it only works with Mozilla/Firefox right now

Good info though. For people with hosting where they don't have to worry about bandwidth so much, it could be a great option.

[designmc]

I don't want everyone prefetching the largest things on my site if they aren't going to view them

That's understandable. If visitors are mostly hitting random images within your photoblog, then you're right in thinking the bandwidth cost will be high.

However for photoblogs where visitors are mostly going in one direction or another, the additional bandwidth will be very little since they are viewing most, if not all the images that are prefetched.

One clarification (in case it matters) prefetch retrieves only a single image at a time, it's not grabbing a ton of extra images.

-Matt Constantine

[blinking8s+]

ive read about this before, dont have much use for it though