53

In order to improve performance of our web pages, we are recommended to use CDNs to serve .js files on our web pages. That makes sense.

Also, we are recommended to bundle our .js files in order to reduce the number of requests which are being made to server on load.

So, we need to sit down and make decision between if we use CDN or bundle .js files.

What are the pros and cons? Which ones make more sense?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
tugberk
  • 57,477
  • 67
  • 243
  • 335
  • Using a CDN *only* for .js files seems like a weird decision. :) – bzlm Sep 21 '11 at 14:41
  • 2
    @bzlm Does it? not for a lot of people tough. – tugberk Sep 21 '11 at 14:42
  • how do you mean? Unless your application is made up mostly of .js files, that's not what's going to cause latency and slowness, since they're so easy to merge, compress and cache on the client-side anyway. – bzlm Sep 21 '11 at 14:44
  • For RTM we now support B/M on CDN. Soon we will offer fallback protection (when the CDN is down) – RickAndMSFT Aug 26 '12 at 17:44

4 Answers4

14

Why can't you bundle them and place them are the CDN? It should hardly be a decision of one or the other?

If you have to choose one or the other, it depends on how many .js files you are including. For a small number of files, I'd suggest that a CDN would be quicker, where-as for a greater number of files, a bundle of .js files would definitely be quicker. Where the switch-over would be, is something for you to experiment with.

Dave Markle
  • 95,573
  • 20
  • 147
  • 170
Matt
  • 74,352
  • 26
  • 153
  • 180
  • what about the development stage then? It makes your project tightly-coupled. – tugberk Sep 16 '11 at 14:07
  • 3
    @tugberk: It doesn't work like that. You write a build script that combines the Javascript files together when you release the app. In the same step, you can also *minify* the files, which will further reduce the size of your JavaScript files. – Matt Sep 16 '11 at 14:08
  • so, you need a process to handle this work. Hmm, it requires a thought but makes a lot of sense. – tugberk Sep 16 '11 at 14:10
  • @tugberk: It doesn't have to be that completed. It can be a simple bash script (`cat *.js > application.js`), or you can write something in a language you're familiar with... all it is is getting a few files and combining them. – Matt Sep 16 '11 at 14:13
  • this is what I do. I AjaxMinify them before the build event and bundle them together. But I use it on the domain. Powerful CDNs like Google and MS Ajax don't serve bundled js files as far as I know. – tugberk Sep 16 '11 at 14:16
  • 1
    @tugberk: What do you mean they don't serve bundled files? They see it as one file when you upload it to them after **you've** done the bundling and minification yourself. – Matt Sep 16 '11 at 14:19
  • ok, that is an interesting point. Do they give you permission to upload files to their servers? – tugberk Sep 16 '11 at 14:20
  • @tugberk: No, but there are [plenty](http://www.akamai.com/) [of](http://www.edgecast.com/) [others](http://www.rackspace.com/cloud/cloud_hosting_products/files/). See http://blog.stackoverflow.com/2011/05/the-speed-of-light-sucks/ and http://www.cdnfinder.com/. I use Rackspace Cloud Files, as my server is on the Rackspace Server cloud. – Matt Sep 16 '11 at 14:25
12

My answer: both. Bundle them and place them on a CDN.

The downside of doing this? Depends. What does you build process look like? Can you easily automate the bundling and minification? Are you using Yahoo YUI or Google Closure or something else?

Also, if there is a lot of GUI dependent jQuery there might be some time consuming friction due to constantly changing elements/effects/css.

Testing is important too because due to possible minification quirks.

Bottom line: 5 javascript files safely bundled into 1 file === 4 fewer requests.

A page with just plain old Html and one external javascript reference === 2 requests to your server. However, a page with just plain old Html and one external javascript reference on a CDN === 1 request to your server.

Currently we are using the Google Closure tools. The Google Closure Inspector helps with the following:

Closure Compiler modifies your original JavaScript code and produces code that's smaller and more efficient than the original, but harder to read and debug. Closure Inspector helps by providing a source mapping feature, which identifies the line of original source code that corresponds to the compiled code.

Kris Krause
  • 7,304
  • 2
  • 23
  • 26
  • Bundling them together is not so complicated for me. What makes me think is where I can put them. Do you know any good provider? Also, I have my own CDN. It handles Cache-Control, If-Modified-Since, If-None-Match headers. But no GEO support. – tugberk Sep 16 '11 at 14:19
  • I've been using Rackspace Cloud Files - http://www.rackspace.com/cloud/cloud_hosting_products/files/ for six months - zero issues and integrated with the Akamai CDN. – Kris Krause Sep 16 '11 at 14:21
2

As others have already stated, the answer is both if possible. Bundled (and minifying) gives a benefit to your users because it decreases the page weight. The CDN benefits your servers because you are offloading work. Generally speaking, you need not optimize either unless you have observed performance issues or you just have nothing better to do.

jiggy
  • 3,828
  • 1
  • 25
  • 40
1

There's a few things you need to think about...

How much of the JS do you need to load early in the page load, and how much can you delay until later?

If you can delay loading JS (e.g. put it at the bottom of the page) or load it asynchronously as Google Analytics does, then you will minimise the amount of time downloading the JS spends blocking the UI thread.

After working out how the load of the JS can be split, I'd deal with the merge / minify of the various JS files - cutting down HTTP requests is key to improving performance.

Then look at moving to the CDN and ensure the CDN can serve the JS content compressed and allow you to set headers so it's "cached forever" (you'll need to version the files if you cache forever). A CDN helps reduce the latency but will also reduce size by being cookieless

Other thing you might want to consider is setting up a separate domain for static content, point it to your server(s) while you sort things out and then switch to a CDN if it looks worthwhile.

Andy

Andy Davies
  • 5,794
  • 2
  • 26
  • 21