Andrei Serdeliuc

Static content is a key contributor to your site’s load speed. The more static content you deliver from your own server and domain, the longer it takes for a browser to download all the content.

Among other factors, one key issue with delivering static content from your own domain, is that a browser has a limited number of connections it can open to one domain (which used to be / is 2 connections per domain).

Consider this: your site has 18 images, and 2 css files, that’s 20 static files delivered over a limit of 2 concurrent connections, so the 3rd and 4th files have to wait for the first two to finish downloading, before they are downloaded. Now this might not be an immediate issue, as with today’s connection speeds, you can easily download 20 files totalling under 500k pretty much instantly right? Not really. That’s when the 2 concurrent downloads limit comes into play.

Do the following test: install firebug (if you don’t already have it) and open up the “Net” panel. Hard refresh your page (that’s CMD + SHIFT + R for Mac users and CTRL + SHIFT + R for Windows users) and watch how your static files are slowly being downloaded over your very fast connection.

This is where a CDN (content delivery network) comes into play. A CDN could be simply described as remote storage. Some of the advantages of using a CDN are:

• it overcomes the 2 connection limit, because it provides a different domain name
• it’s fast, as it’s purpose is solely to deliver content
• it can be regionalised, your files will be served from a server physically close to your visitor

The downside of a CDN is extra cost, but they are usually very cheap, Rackspace are charging $0.15 per GB of storage and $0.22 per GB of bandwidth used.

Setting up a CDN and using it is very easy, it usually takes less than an hour before you’re delivering content from it.

On Extraordinaire.Me, I’m using Rackspace Cloud Files.

The steps you’d have to take for setting up a CDN are:

• Create an account
• Upload the files through a web interface
• Change your css

It is that simple, below is a short tutorial on how to do this with Rackspace Cloud Files.

First step, is to actually sign up for an account, to do this go to the Rackspace Cloud signup page and follow the instructions on setting up your account. Keep in mind when you enter your telephone number, to enter a country prefix if your outside the US, as they have an automated verifying system which will fail and disable your account if your number is not reachable.

Once you’ve setup your account, go to the login page and authenticate.

After you’re in, click on “Hosting” and select “Cloud Files”.

Now you will create two containers, which are just like directories on your Mac / PC. These will store your static files, so create one called “css” and one called “images” (you can name them whatever you want btw).

Upload your images to the images container using the top menu.

After your images have been uploaded, click on the images container and select “Publish to CDN” in the bottom panel and copy the CDN URL provided. To test that everything worked correctly, you can go to the CDN URL followed by a filename, like so:

http://c0455562.cdn.cloudfiles.rackspacecloud.com/bullet.gif

Please note that there is no directory name in that url, the CDN URL points directly to the images directory.

Now that you’ve got your images uploaded, it’s time to change your css. Considering you already had all of your images in a directory, it is fairly simple to change your css:

• Open up your css file(s)
• Search for “url(../images/” and replace with “url(CDNURLHERE/” (replace CDURLHERE with your CDN URL and replace ../images/ with whatever your image directory was previously called)

Doing this on your live server is not recommended, even if it will probably work, it is just safe to do it locally.

Once you’ve altered your css files, upload them to the css container and enable publishing to CDN.

Now copy the CDN URL for your css container and modify your site’s HTML to load the css files from the CDN URL instead of your web server.

You are now serving static files from a content delivery network, good job!