Posted by Sir Four at 4:29pm Nov 30 '09Prefetching Files Can Improve Perceived Site Speed
Level: Advanced
If your users follow a typical navigation pattern on your site, you may be able to predict the page they are about to visit next. For instance, if most people who visit Page A go on to visit Page B, you can consider prefetching files that are used on Page B while the user is still on Page A. This will make Page B seem to load very fast.
What is Prefetching?
Prefetching is when you cause a file to be downloaded by the user's browser and stored in its cache before the file is needed, so that when it is needed it will be available instantly. There is a particularly easy way to prefetch, but alas it isn't supported by all browsers:
<link rel="prefetch" href="URL">
This would tell the browser to prefetch the file at the given URL. The people behind Firefox came up with this idea, to make prefetching simple. But unless you only cater to Firefox users, forget this one. You're going to need javascript to to your prefetching.
You can prefetch images thusly:
var im = new Image();
im.src = 'http://URL_OF_IMAGE';
im.src = 'http://URL_OF_IMAGE';
The browser will download the image without displaying it anywhere, and it'll be in the browser cache for future pages. You could write yourself a little function that takes an array of URLs and loops through them, executing the above code.
CSS files and especially javascript files are a little more tricky to prefetch, especially since you want to be careful that the javascript you grab does not execute on the current page. For these files you can use an AJAX request. Here it is using JQuery:
$.ajax({ url:"/URL_OF_FILE.js", cache:true, dataType:"text" });
It's that simple. And by listing the dataType as "text" you prevent code in javascript files from being executed. (I found this helpful tip here.)
Being Smart About Prefetching
As I mentioned, you would only want to prefetch for Page B if you are reasonably sure user is going to visit Page B. One way to make an educated guess is if the user gives you a clue. Say the user begins filling out a form--odds are high that this user will eventually go to the page that the form submits to. You might only want to prefetch the files on that page if the user starts filling out the form.
With JQuery again, you could do this:
var prefetched = 0;
$(document).ready(function() {
$('input[name=example1]').focus(function() {
if (prefetched === 0) {
$.ajax({ url:"/URL_OF_FILE.js", cache:true, dataType:"text" });
prefetched = 1;
}
});
});
$(document).ready(function() {
$('input[name=example1]').focus(function() {
if (prefetched === 0) {
$.ajax({ url:"/URL_OF_FILE.js", cache:true, dataType:"text" });
prefetched = 1;
}
});
});
What's happening here is that when the user moves focus to the form field named "example1" (by clicking on it or tabbing to it) the prefetch is triggered (in this case, downloading the file at "/URL_OF_FILE.js"). You could set this to any field in the form, or use an event other than focus, but the idea is the same. You just wouldn't want to trigger the prefetch toward the end--the submit button, say--because you want to leave a little time for the files to be prefetched.
Things to consider:
If your files are being sent with no-cache headers, prefetching is pointless. But that's usually not the case.
If you make bad predictions about user behavior, you're only going to prefetch files unnecessarily, wasting bandwidth.
But if used properly, prefetching can make pages appear to load extremely fast...enhancing the experience for your users.
Of course, this is probably overkill for all but those really obsessed over their page loading speeds.
Web Site Speed: Prefetching Images, CSS, JS Files - Sir Four