Quick start guide for using CDN in your application

CDN (Content Delivery Network) are distribuited servers across the internet that server your site not only with redundancy, but througth the nearest way to your end client.

This service is used for large websites and companies. But we can use part of these services for free and speed up our sites and apps. Let’s learn why.

Some thougths and rules about performance

There is a lot of useful “rules” to follow on our HTML page for speed up, but let’s start with a basic one: stylesheets on top, javascript at the bottom. The reason is: javascript will block subsequents downloads.

Another rule is, of course, keeping the number requests in a page as lower as possible. Minimize and combine javascripts and stylesheets, using css sprites do this work quite well, but that is not the focus of this article.

We have also a few limitations to face it. The number of simultaneos connections per browser (browser max connections) vary a lot, starting from 2 up to 60, and servers can limit that parameter too. We also know that if we could spread our request through many servers, our page would be faster.

And there’s another detail to think about: if we use a static resource that our cliente already used, it would be in its cache (and/or proxy) – and, yeah, the page would appeared even faster!

Now we are on the real development dilema, how to start our HTML page with max perfomance and low effort.

What we use on real development

Most of projects today use well known libraries such as Twitter Bootstrap, jQuery, jQueryUI and similars. The first thought is: let’s download them all and make local reference to these assets.

A simple page for using Twitter Bootstrap would look like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <link href="/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/my-stylesheet.css" rel="stylesheet">
  </head>
 <body>
    <div class="container">
    </div> <!-- /container -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/my-javascript.js"></script>
  </body>
</html>

Yes, a quite simple start.

Converting to CDN

But we can use CDN resources easily by making some search on BootstrapCDN and at the bottom of jQuery Page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/my-stylesheet.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
    </div> <!-- /container -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="js/my-javascript.js"></script>
  </body>
</html>

It’s really simple, isn’t it? Your own stylesheets and javascripts (css/my-stylesheet.css and js/my-javascripts.js) stay the same.

More and more assets on CDN

But… if we need another resouces? If we plan to use fantastic tools like underscore.js, or some cool jQuery plugins such as Datatables?

Not all of our needs have their own CDNs. But, fortunately, two great services provide CDN for a lot of great tools:

You can search and choose the right version to use in your app. underscore.js can be include with:

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

or:

<script src="//cdn.jsdelivr.net/underscorejs/1.4.4/underscore-min.js"></script>

Too much CDNs references can be bad

CDNs are very usefull. But if you include too much resources, you can have the side effect for breaking the rule “too much requests”. Maybe part of the assets can be combine localy. Use Yuy Compressor or JSMin.

Some frameworks have internal tools to combine and minimize assets. Symfony uses Assetic, that can be used not only on Symfony but in any PHP 5.3 projects.

Make some tests mixing both technics to find the optimal for your application.

Other CDN sources

jQuery has 3 CDN main sources: EdgeCast/MediaTemple (the jQuery oficial, used in the example above), Microsoft and Google.

Which of them must we use? This article makes a good comparision.

Final thoughts

A great use for CDNs are quick bootstraping. One file (or template, depending on your development method) and you can start your project, already up to date with best practices.

Another advantage is the simple updating of libraries: just change the version on your template and it’s done. Even downgrade is easy.

No more excuses to use CDN in your projects!

  • I read a lot of interesting articles here. Probably you spend a lot
    of time writing, i know how to save you a lot of time, there is an online tool that creates
    unique, google friendly posts in minutes, just search in google – laranitas free
    content source