How InstantClick works

[This page duplicates the home page a lot, sorry about that; in the future I’ll remove those duplications from the home page and link to this page for more info.]

InstantClick has few differences from traditional web development, but it’s important to know them.

InstantClick eschews the browser’s page change cycle

The most important thing to understand is this: InstantClick technically makes your website a single-page application; the browser doesn’t change pages anymore, InstantClick does. This implies that:

You can’t rely on DOMContentLoaded or jQuery.ready() to trigger your code (use InstantClick’s events instead).
Third-party scripts that rely on them might need tweaking (see Events and script re-evaluation).
The browser doesn’t show its loading indicator on page changes, InstantClick shows his.

The second most important thing to understand is that InstantClick only changes the <body> and <title>, so that your scripts are evaluated only once (this brings a nice, noticeable speed boost in and of itself).

Here is what all of this implies:

Your styles and scripts in the <head> should be the same across the pages where InstantClick is on.
If something in your <head> depends on the page’s content (like scripts running on page load or CSS animations), it’ll need a little bit of tweaking.

InstantClick is progressive enhancement: If a visitor’s browser doesn’t support InstantClick your site’s links will work as usual, just without a speed boost.

Preloading Get started