Even more aggressively trying to preload your next page load

22 January 2018   2 comments   Web development, Javascript

In 2014 I tried out an experiment to "Aggressively prefetching everything you might click". It was received with mixed reviews. Today, 4 years later, I stand by that experiment/solution and I even like it so much that I've decided to extend it.

How it works

The gist of the solution is that if you mouse hover over an internal link, with a 200ms delay, an XHR request is made to that URL as a simple GET. Suppose the XHR finishes loading in, say 300ms, and you eventually click the link, by the time it tries to load it, it loads it straight from your browser cache. You get that "instant load" feel and it makes navigating the site more enjoyable. Suppose that you're really fast with your mouse/trackpad and you click the link faster than 500ms (but slower than 200ms) the XHR request gets automatically cancelled by the browser. When your browser loads the new page, it basically has to start from scratch. No harm done. Just not as fast.

Sure, there is a chance that you hover over a link, and stay hovering for more than 200ms but then decide to not click on it. Then the XHR preload was a waste of resources.
But!! If you even have a mouse cursor, the chances that you're on a WiFi connected laptop.

None of this "kicks in" when you're on a mobile device. The onMouseOver event won't trigger. And, I dare to say that only on mobile devices does it strongly matter to reduce the stuff the client has to download. So what's the harm of forcing your laptop to download a couple of extra kilobytes? If you hover over the link, the chances are, after all, that you will click the link.

Even more aggressive

Today I decided to step it up even more. Now, after the HTML has been downloaded, the HTML downloaded is scanned with a regular expression for image URLs that sit on my CDN (where I host all images with far-future cache headers). The first 5 image URLs are preloaded so that when you eventually make that link click, not only is the page load instant, but most images are too.

What do you think? Too aggressive or genius?

Before hovering
Before hovering over the "About" link

After hovering
After hovering over the "About" link

Now, if I go ahead and make the click, the HTML load will be instant and the first 3 images will be instant too.

Show me the code!

It ain't pretty but it works: prefetcher.js

Yes, it's jQuery and I'm OK with that. Yes, the CDN domain name is hardcoded and if this was a work project I'd never do that. Heck, the ultimate reason I'm blogging about this is ultimately to share/teach. When you build something similar you can do it more robustly.


Chris Adams
Why not generate real=prefetch headers for those images? It’d start loading before the JavaScript has evaluated, allows CDNs to start streaming those files before the browser requests them, and allows the browser to decide not to load them if it’s on a restricted data plan or has image loading disabled.
Peter Bengtsson
Which images? The idea here is that you load one page. And perhaps you go to another, of maaaany choices, page later.

If I knew (somewhat confidently) which page you're going to go to next, I can prefetch them with various headers and stuff. But I don't know which page you're going to go to. On this page, for example, there are about 10 pages you could go to that has images. The mouse hover the only chance I get as a clue to know which page you might want to go to next.

Your email will never ever be published

Related posts

minimalcss 0.6.2 now strips all unused font faces 22 January 2018
Make .local domains NOT slow in macOS 29 January 2018
Related by Keyword:
To CDN assets or just HTTP/2 17 May 2018
Webpack Bundle Analyzer for create-react-app 14 May 2018
Another win for Tracking Protection in Firefox 13 December 2017
How to use django-cache-memoize 03 November 2017
cache_memoize - a pretty decent cache decorator for Django 11 September 2017
Related by Text:
jQuery and Highslide JS 08 January 2008
I'm back! Peterbe.com has been renewed 05 June 2005
Anti-McCain propaganda videos 12 August 2008
Ever wondered how much $87 Billion is? 04 November 2003
Guake, not Yakuake or Yeahconsole 23 January 2010