Faster page loading with Pronto

More and more sites are now using HTML5’s pushState to speed up page loading. Twitter has used it for a while (initially in conjunction with hashbangs) but it seems to be coming into the mainstream with the likes of YouTube using the technology to great effect.

I’ve been interested in the potential of utilising it to speed up sites, and started reading up on how to implement it, but some guides were either too complex or just simply didn’t work. Luckily, I came across Pronto by Ben Plum, a jQuery plugin that uses a “partial page load” technique to update only the parts of the page that have changed. Here’s a bit from Ben about how it works:

Using a “partial page load” technique, Pronto reduces the over all server load and font-end render time by only updating pieces of a page instead of the entire document. On many sites, basic layout like the header and footer remain generally the same page to page. The overall browsing experience gets a little shot of caffine by only requesting these pieces of markup once, as well as assets like stylesheets, scripts or fonts.

The implementation is incredibly simple:

$(document).ready(function() {
    $.pronto();

    $(window)
        .on("pronto.render", initPage)
        .on("pronto.load", destroyPage);

    initPage();
});

It’s that easy! Everything that was running in jQuery’s document ready has now been moved into the initPage() function. By default, it does a replace on whatever element has the ID #pronto (this is completely customisable) leaving the rest of the page intact. My code ran slightly differently, targeting only links that are inside the site by utilising the following code:

$(document).ready(function() {
    $.pronto({
        selector: 'a.local'
    });

    $(window)
        .on("pronto.render", initPage)
        .on("pronto.load", destroyPage);

    initPage();
});

function initPage() {
    hostname = new RegExp(location.host);

    // Act on each link
    $('a').each(function(){

        // Store current link's url
        var url = $(this).attr("href");

        // Test if current host (domain) is in it
        if (hostname.test(url)) {
            // If it's local...
            $(this).addClass('local');
        }

        else if (url.slice(0, 1) == "/") {
            // If it's local...
            $(this).addClass('local'); 
        }

        else if (url.slice(0, 1) == "#") {
            // It's an anchor link
            $(this).addClass('anchor'); 
        }

        else {
            // a link that does not contain the current host
            $(this).addClass('external');                        
        }
    });
}

Now that it’s working, any browser that supports pushState will work in this way, and older browsers will degrade to a full page load every time. There are alternative options out there, such as loadie.js that include an animated bar as seen on YouTube, but if you want something that plugs in without any extra visuals then I’d recommend Pronto.


Leave a Reply

Your email address will not be published. Required fields are marked *