The plus side of using a public CDN
It is becoming common practice to use public CDNs to host some assets like jQuery and Bootstrap. The advantage is huge: less bandwidth usage for you, fully configured CDN will everything like Gzip, cache headers, etc. and a chance that even on the first load of your website, the user will already have the asset in his cache.
The down side
Testing the difference
So I decided to do a comparison of the three options: using a public CDN, hosting everything yourself bundled in one JS, one CSS (Hosted) and hosting only a subset of the features (Custom). The demo was done using Assetic to minify and concatenate. It is available here and it source code here but the subset looks like this:
- jQuery UI (including core and dependencies)
- Twitter Bootstrap
- No responsive
Then, the tests are done fully cached, 304 requests (when forcing refresh) and without any cache (No cache). Exec time is calculated using Google Speed Tracer, it includes parsing of JS/CSS and some JS execution. Keep in mind that the DOM was almost empty so result could scale a lot on crowded pages.
|Gzipped size||82.91 KB||110.13 KB||128.93 KB||36 %|
|Exec time||15 ms||22 ms||22 ms||32 %|
|Cached||110 ms||130 ms||150 ms||27 %|
|304||125 ms||155 ms||195 ms||36 %|
|No cache||220 ms||240 ms||250 ms||12 %|
Developer tools screenshots
Public CDN are really effective, but if you configure your CDN well, they are pretty on par. However, the difference is there and visible. As the page gets bigger and you add your own assets this idea quickly begins to become important. Also, don’t be too quick on calling micro-optimization because in the order 200ms, it is clearly noticeable.