Make the Web Faster

Prefetching resources

Author: Shawn Brenneman, Software Engineer

Recommended knowledge: HTML, JavaScript.

Web pages that require large files can often benefit from changing the order that those files are requested. In some cases, it makes sense to download files before they are necessary, so that they are instantly available once requested. When the resources required for a page can be loaded in advance, the user-perceived network latency for that page can be significantly reduced or even eliminated.

For interactive websites, optimizing speed requires more than just minimizing the initial download size. For any site where user interactions can download additional resources, the speed of those actions depends on how long it takes for those resources to download. The site can be made faster by making the downloads smaller, but additional speedups may be possible by making the downloads sooner.

"Prefetching" is simply loading a file before it's needed. It's common on interactive sites for a user action to download of additional data, such as feeds or images. If it's possible to predict the next user action, then it may be possible to start the downloads before the user input is made. For example, when you look at a photo on Picasa Web Albums, we make a guess that you'll look at the next photo as well, and start downloading it as soon as possible. Sometimes we download a photo that the user won't actually look at, but that's worth it when we can make the rest of the photos show up faster.

This technique has the potential to speed up many interactive sites, but won't work everywhere. For some sites, it's just too difficult to guess what the user might do next. For others, the data might get stale if it's fetched too soon. It's also important to be careful not to prefetch files too soon, or you can slow down the page the user is already looking at. Prefetching too much will also leave a bad impression, as the user won't appreciate having their network clogged up.

Here are a few things to consider when designing prefetching for your own site:

Study user actions

If your users spend most of their time on one particular page or action, then that's the one to optimize. You can figure this out by looking through server logs, or just by watching a few volunteers use your site. For Picasa Web Albums, we know that the most common action is navigating from one photo to the next, and that was an excellent candidate for prefetching.

Measure when the page is ready

You shouldn't start fetching data for a new page before the current page is done. For very dynamic pages, you may have to add JavaScript onload handlers for each external file on the page. Once those resources are safely downloaded, it's reasonable to start prefetching files for the next user action.

Prefetch the right data

Some data is safer to prefetch than others. Images tend to be long-lived, and cache very well in the browser. Many data feeds are safe to prefetch, while others may be too time sensitive (for example, a feed of recent updates), or too frequently modified by user actions to be good prefetching candidates.

Profile your changes

Use profiling tools like Page Speed to get speed measurements before and after your change. Make sure that you're not making the rest of your site slower by requesting too much data at once. Use those tools to tune how much and how frequently you prefetch, based on how much user time you save compared to how much network bandwidth you use.

Be a good web citizen

Your users probably have other websites open in different tabs or windows, so don't hog all of their bandwidth. A modest amount of prefetching will make your site feel fast and make your users happy; too much will bog down the network and make your users sad. Prefetching only works when the extra data is actually used, so don't use the bandwidth if it's likely to get wasted.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.