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.
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.
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
- 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.
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.
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.
No comments:
Post a Comment