Personally, I’m really looking forward to HTML5 and some of the functionality that it’s going to afford us. We’ve highlighted it numerous times around the network, but there’s a lot we haven’t discussed.
Perhaps one of the coolest features is HTML5 prefetching. It’s really easy to use and can go a long way in speeding up your application.
Prefetching?
Quite simply, prefetching is functionality that’s built into a web browser that takes advantage of any idle time to go ahead and download any pages the user may navigate to during their current session.
For example, if prefetching was being used, then your browser could potentially be downloading any pages linked from this page while you’re reading this article.
Ultimately, this can speed up the browsing process as all pages and related media are downloaded before the user navigates to them.
How To Do It
Surprisingly, it’s extremely easy to take advantage of document prefetching. All that’s necessary is to mark the rel attribute of a link tag as pretech.
To prefetch media, such as an image, you’d declare this:
To prefetch documents such as stylesheets or pages, then you’d similarly declare this:
Note that anchors are not prefetched, only link tags.
Don’t Go Overboard
It’s easy to take this to extremes – you wouldn’t want to try to preload an entire site from a single page. That could be an unusually large burden on the client machine. Instead, try to focus on specific cases in which pages will be sequences:
- Loading the next page of results in your crawler
- Ordered pages such as a slideshow or presentation
- Loading images that are used throughout the side (such as advertisements or a banner)
Andy Darnell says
Yes, this is a feature that I really do look forward to using. Although at first I had no idea what you were talking about. “Prefeteching”
Was that a purposeful misspell?
Tom says
Nope. Total over sight that’s been fixed :).
Josh Wagner says
Sweet. This is exactly something I’ve been looking for. Thanks a bunch.
Tom says
Awesome – was hoping it’s prove useful for some!