The plus side of using a public CDN



The down side However, those libraries often come fully bundled. The whole Javascript for jQuery UI is whopping 230KB. This of course is cached, gzipped and everything, but you still have to parse this Javascript. Twitter Bootstrap also runs a lot of onLoad functions to bind automatically. Almost all libraries like those have builders that let you choose which part you need, reducing the load quite a bit. Moreover, you increase a lot the number of HTTP requests while you could be bundling all JS/CSS libraries together.

Testing the difference 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.However, those libraries often come fully bundled. The whole Javascript for jQuery UI is whopping 230KB. This of course is cached, gzipped and everything, but you still have to parse this Javascript. Twitter Bootstrap also runs a lot of onLoad functions to bind automatically. Almost all libraries like those have builders that let you choose which part you need, reducing the load quite a bit. Moreover, you increase a lot the number of HTTP requests while you could be bundling all JS/CSS libraries together.

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 So I decided to do a comparison of the three options: using a, hosting everything yourself bundled in one JS, one CSS (and hosting only a subset of the features (. 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

jQuery UI (including core and dependencies)

Dialog



Datepicker

Twitter Bootstrap

No responsive



Alert



Button



Modal



Tooltip



Tab On the demo, you may notice Javascript errors, I may have made some errors in the dependencies order, but it does not change the idea.





cached, 304 requests (when forcing refresh) and without any cache (No cache). Exec time is calculated using Then, the tests are done fullyrequests (when forcing refresh) and without any cache (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.

Results breakdown

Custom Hosted Public CDN Half/CDN 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

Conclusion

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.

CDN resources

* The measured time is onLoad event, so all files are downloaded, script are executed and the browser is ready.