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:
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.
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
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