Using CDN’s to speed up your websites

One of the easy ways of speeding up a web application is by using a CDN or content delivery network. The main purpose of a CDN is serving up resources that are not specific to you site.

The quintessential example of using a CDN is jQuery. There are many websites using jQuery, according to some statistics some 50% of all websites. And if each site hosts its own copy of jQuery everyone has to download it multiple times. How often depends but assuming everyone does a perfect job of adding cache settings and browsers have plenty of space to cache things jQuery is going to be downloaded once for each website.

Seems like a waste right?

Yes it is, if everyone is using the same version of jQuery it is much more efficient to download it once from a common place and sharing that cached version. And that is one of the main points of a CDN.

 

There is more though

The caching behavior is the most important but there is more to using a CDN. It turns out there is a limited number of concurrent requests a browser will do to a given domain. If you exceed this number of requests additional ones will be put in a queue until one of the current requests is finished. Splitting up these requests over different domains means you can do more concurrent requests.

Another benefit is that the CDN, being a different domain, isn’t burdened with cookies ties to your websites domain. You should not over use cookies but it’s still a useful optimization.

But the first one, caching is the most important because it will mean that a resource doesn’t need to be downloaded in the first place.

 

Choosing a CDN

It seems easy to choose a CDN, just find the fastest one and use that. And you see a lot of speed comparisons between CDN’s doing just that. While the speed is important that is slightly misleading though. The fact that a resource is already cached when you need it is far more important. So a CDN that is popular and used a lot of even more important that it’s raw speed.

There are several big players in the CDN marketplace including Microsoft and Google. Assuming we want to use a CDN for jQuery we can use either of those or use the jQuery CDN as well.

All these three point to the same version of jQuery. However as the Google CDN seems to be the most popular one that seems to be the best to use.

 

It isn’t just goodness

One thing to be aware of is that you are now taking a dependency on a external system. And while these are quite reliable you should add some code to provide for the service not working as you would like. If you look at the source of one of my HTML5 websites you will see the code I use for that purpose. First I link to jQuery on the Google CDN. If for some reason that fails the script block below detects that jQuery doesn’t exists yet by checking window.jQuery and it it isn’t defined it dynamically inserts a script element downloading from my own server.

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   1:  
   2: <script>window.jQuery || document.write(unescape("%3Cscript src='/Scripts/jquery-1.7.2.min.js'%3E%3C/script%3E"));
</script>



 



There are different ways of doing this, for example using a conditional resource loader like YepNope.js but this is one easy way of doing so without external dependencies.



 



During a recent trip to China I discovered a problem with using the Google CDN that is not apparent in Europe or the USA. Downloading the Google copy of jQuery actually took over 4 seconds, not good and much slower than the other resources downloaded from my own domain. So be very aware of the speed of the CDN for all your customers, it might vary greatly depending on the users location. If you want to be really optimized you will need to determine the users location based on their IP address and server up files using different CDN’s, or your own server, depending on location.



 



Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>