Based on the idea that loading assets that are already cached on user browser is the fastest, we, at Villa-Finder.com, switched from our localy-Grunt-generated-minified-uglified-jQuery-Bootstrap (“lGgmujB”?) file to multiple separated request to popular CDN.

TL;DR: Just don’t use MaxCDN (the default one for jQuery and Bootstrap), they’re super slow compared to other one. As you want to only use one CDN, CloudFlare is the one that offer more choice for the best performances. Is it better to keep it’s own compressed version of assets on CloudFront ? How could I check if my visitors already know the files I tell them to GET from CDN ? I don’t know !

After looking around, I’ve decided the largest CDN available would be:

• Google Hosted Libraries
• Microsoft Ajax Content Delivery Network
• CloudFlare/cdnjs
• MaxCDN

And that I should test them.

Huge differences on local tests

Let’s start with web inspector

After a Shift +  + R, here are the results (tested with 4G in a Singaporean bus) for some libraries: (Transfered and Size are in KB, Tests are in ms, tests 1 & 2 are fresh load)

It’s really bad for MaxCDN! In fact a simple ping show us the problem.

Something’s wrong even on a ping

ping maxcdn.bootstrapcdn.com
--- bootstrapcdn.jdorfman.netdna-cdn.com ping statistics ---
6 packets transmitted, 6 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 236.934/266.647/338.548/35.002 ms

ping cdnjs.cloudflare.com
--- cdnjs.cloudflare.com ping statistics ---
6 packets transmitted, 6 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 8.054/13.970/17.638/3.753 ms

ping ajax.aspnetcdn.com
--- cs1.wpc.v0cdn.net ping statistics ---
6 packets transmitted, 6 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 48.221/56.626/64.773/5.831 ms

More hits with ApacheBench

And I’ve been nice with only 20 hits in one minute, i.e. ab -S -n 20 -c 1 :

Using WebPageTest to check elsewhere

And we discover here that CloudFlare is the only one that makes only one SSL Negotiation.

Sorry, I didn’t found an easy way to present these data ¯\(ツ)/¯

At least, I reduced the filenames :

• Microsoft:
  • MS1: jquery-2.1.4.min.js
  • MS2: bootstrap.min.js
  • MS3: bootstrap.min.css
• MaxCDN
  • M1: jquery-2.1.4.min.js
  • M2: bootstrap.min.js
  • M3: bootstrap.min.css
  • M4: font-awesome.min.css
• Cloudflare
  • C1: jquery.min.js
  • C2: bootstrap.min.js
  • C3: bootstrap.min.css
  • C4: font-awesome.min.css
• Google
  • G1: jquery.min.js