Self-Host Your Static Assets

Harry Roberts:

One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.

For the site tested, this resulted in a ~300ms win:

Test Results with remotely hosted assets.

Test Results with self hosted assets.

One of the main reasons for me is that you, as developer, stay in control of everything. I’ve had sites break due to some external files no longer being available.

Self-Host Your Static Assets →

PxLoader, A JavaScript Preloader for HTML5 Apps

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

As used in Cut The Rope. Resulting code when used looks like:

// Create the loader and queue our 3 images. Images will not 
// begin downloading until we tell the loader to start. 
var loader = new PxLoader(), 
    backgroundImg = loader.addImage('images/headerbg.jpg'), 
    treesImg = loader.addImage('images/trees.png'), 
    ufoImg = loader.addImage('images/ufo.png'); 
 
// callback that will be run once images are ready 
loader.addCompletionListener(function() { 
    var canvas = document.getElementById('sample1-canvas'), 
        ctx = canvas.getContext('2d'); 
 
    ctx.drawImage(backgroundImg, 0, 0); 
    ctx.drawImage(treesImg, 0, 104); 
    ctx.drawImage(ufoImg, 360, 50); 
}); 
 
// begin downloading images 
loader.start();

PxLoader →