Importing libraries using a CDN vs locally

CDN stands for content delivery network and is a popular way of importing libraries such as jQuery, Bootstrap, Fontawesome and many others.

A lot of people believe that using a CDN always gives you the latest version of something but this is untrue.
When you use a CDN in your site it doesn’t download the latest version, it downloads the version specified in the CDN.
When new version of some library is released the same old CDN link is not used, a new one is created and used e.g.

OLD:
https://maxcdn.bootstrapcdn.com/bootstrap/2.3.7/js/bootstrap.min.js

NEW:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

 

CDN speed test:

I tested the below libraries using a CDN and importing the files locally. I reloaded the browser 10n times for each method
of importing the ;library and got the averages (below)

CDN:
jQuery: 37ms
jqueryUI: 45ms
Fontawesome: 97ms
Google web font : 126ms

LOCAL:
jQuery: 9ms
jqueryUI: 10ms
fontawesome: 4ms
Local font: Time not visible in dev tools (see below)

Whilst, from the above it may look like local are they way to go it’s worth mentioning that depending on where your
located the CDN value could vary a lot because a CDN will try and download a copy of the library from a cached server
nearer to your location rather than going to where all your code lives.

 

The other thing to mention is that maintaining and migrating libraries when you use them locally can become time consuming
even if you’re using a package.json file and npm installing.

I also did a time test to see which is more beneficial for your site, local fonts or webfonts. The font in question is Montserrat. The time taken to load the Google web font version are below:

  1. 121ms
  2. 139ms
  3. 126ms
  4. 136ms

Unfortunately there’s no way (that I know of) to measure the time taken to load a local font in the developer tools console. So what I did was compare the time taken for the overall CSS stylesheets to load. The results are below:

CSS stylesheet including web fonts:

  1. 656ms
  2. 649ms
  3. 649ms

CSS stylesheets including local fonts:

  1. 740ms
  2. 697ms
  3. 620ms

 

Overall the time take to load the CSS stylesheet is pretty close in either situation so it won’t make a huge difference to your pages loading speed but it’s interesting to note. Also it’s interesting to note that your Google page speed insights score will suffer if you use a CDN because it requires an above the fold HTTP request!

Leave a Reply

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