Boost site your site's performance

smoothState.js doesn't wait until the user has the contents of a url before calling the onStart function. This allows us to animate an out the elements we wont need and provide the user with immediate feedback after they’ve activated a link. This site uses this technique. Layout elements will start to slide out of view even before the page has fully loaded. There are three main callbacks:

1. onStart - Run when a link has been activated
2. onProgress - Run if the page request is still loading and onStart has finished animating
3. onEnd - Run when requested content is ready to be injected into the page

There is a 200ms to 300ms delay between the time that a user hovers over a link and the time they click it. On touch screens, the delay between the touchstart and touchend is even greater. If the prefetch option is set to true, smoothState will begin to preload the contents of the url between that delay.

This technique will dramatically increase the speed of your website.

$('#main').smoothState({ prefetch: true });

smoothState.js will store pages in memory if pageCacheSize is set to anything greater than 0. This allows a user to avoid having to request pages more than once. Pages that are stored in memory will load instantaneously.

$('#main').smoothState({ pageCacheSize: 4 });

This site already uses the techniques described above. Here's the code:

;(function ($) {
    'use strict';
    var $body    = $('html, body'),
        content  = $('#main').smoothState({
            prefetch: true,
            pageCacheSize: 4,
            onStart: {
                duration: 250,
                render: function (url, $container) {
                    content.toggleAnimationClass('is-exiting');
                    $body.animate({
                        scrollTop: 0
                    });
                }
            }
        }).data('smoothState');
})(jQuery);