pjax and InstantClick

Originally published on the HE:Labs blog.

The subject of Performance Optimization has a bunch of techniques and tools such as inlining (in cases where it is better to have just one file containing HTML, CSS and JavaScript), spriting (when we join images of a page in just one image file) and Ajax/xhr (when new content is loaded in the background). In this article we will go into details of a technique called pjax and a tool called InstantClick.

pjax works by grabbing HTML from your server via Ajax and replacing the content of the body on your page with the ajax’d HTML body. It then updates the browser’s current URL using HTML5 pushState without reloading your page’s layout or any resources (JS, CSS), giving the appearance of a fast, full page load. But really it’s just Ajax and pushState. For browsers that don’t support pushState link clicks will result in a normal full page load.

As latency is inevitable with today’s internet architecture, InstantClick JavaScript library cheats by preloading links visitors are likely to click on. Before visitors click on a link, they hover over that link. Between these two events InstantClick preloads the page (with pjax), so that the page is already there when the user clicks.

Related projects

• InstantClick
• jquery-pjax
• YUI Pjax
• PACE.js — Automatic page load progress bar