Loading web pages really fast - optimistic page loading with

8th October 2014 | by Adam Beres-Deak | javascript, single page app, click, perfmatters

There is a very clever trick, which can turn any web page into a single page app. Without requiring you to do any significant work. Fortunately there is also a very handy tool, which makes use of this trick and does a great job.

As web developers we usually want to anything to load pages faster for the user. What about if started loading a page, before the user clicks a link?

Optimistic page loading

It is absolutely possible to make the user experience much better by loading content much faster. The trick is, to start (optimistically) loading the page when the user only just hovers over a link. There is a significant delay between hovering and clicking - usually more then 100 ms. We can use this time to prefetch the next page which is behind the link, so that we can show it right after the click event was fired.

You can see this trick in action for example on this blog. Just click on some links on the page.

You can get this tool here:

Just put a single script into your page and you should be almost fine. Maybe you need some blacklisting/whitelisting, so that some links are not prefetched automatically. Or maybe you want some scripts to execute on every request. Everything is easily doable. Just head over to the downloads section. There are some useful information about the integration.

They also have a test page, where you can measure how much time you can shave off of the load time. It measures the time difference between mosuedown event and click event - and also between touchstart event and click event.

Mousedown instead of hover

If a web page has many links, it is better to only prefetch when the user really pressed the mouse button. It still gives a decent advantage over the traditional way.

Touch support

The library comes with touch support out of the box.

Do you like it? Do you already use this library? Tell me about your experience in the comments.

by Adam Beres-Deak

| Share | Tweet | Share | Share

Latest blog posts

Displaying icons with custom elements 14th October 2015

Plain JavaScript event delegation 26th January 2015

After the first year of blogging - what happened on my blog in 2014? 1st January 2015

Better webfont loading with using localStorage and providing WOFF2 support 18th December 2014

Worth watching: Douglas Crockford speaking about the new good parts of JavaScript in 2014 20th October 2014