Load fast, then load the rest

Making sure your page loads fast is important!

There are lots of optimisations you can do server side however when dealing with an external sources (e.g. feed) you are never going to be fast. With that in mind I've decided that loading all my external feeds are absolutely unnecessary for an initial load and can be passed across to the user later. All of this assumes the user is running JavaScript and for my purposes, that's OK.

I've started using JavaScript to to load my feeds (Twitter + Instagram) once the user is already reading the site. Once my standard JS initial complete (setting up UI & any user callbacks that are required) I throw off a few requests. To do this in a very trivial way you can use straight HTML and jQuery:

$(document).ready(function() {     
    // Run all init functionality first
    // ...

    // Load the data required for filling in my third party data and put it where it belongs
    $('.last-fm-feed').load("/feed/lastfm", function() {
        $('.last-fm-feed').slideDown();
    });
}

In the above code I'm throwing a request back to my own server as I run my feed cache (as described in a previous blog post) to make sure I don't hit third party servers that often. The request will return some basic HTML which is pushed to the right location in the DOM.

This simple process that speed up the initial load of all pages considerably. You can also take this one step further and throw this data into a localStorage cache will means they don't even need to hit the server, and be loaded nearly instantly with the page display.

In my real-life situation I'm using a more complicated version which grabs JSON and builds HTML directly in the JavaScript rather than rolling with some HTML returns. I might even go into more details here soon.