Search code examples
javascriptjqueryhtmlhtml5boilerplate

Is there any data on the advantage of loading jQuery from a CDN (HTML5BP) vs concatenating and minifying it with the other scripts?


I'm using HTML5 boilerplate, and saw that they're separating jQuery from main.js and plugins.js. I understand that the logic behind this is that a lot of sites use jquery and if you use a cdn there is a big chance that the user will already have it cached.

But since my use of html5 bp utilizes a build step, I could also concatenate and minify jquery with all my other scripts. So:

  • Separate jQuery, preferably load it from a CDN, or
  • Concat and minify jQuery with all other scripts

From what I understand HTML5 BP doesn't consider the concat/minify option since their boilerplate doesn't include a build step. But since it is an option to me; is there any hard data about what is the best option here, or what the real world differences in performance are?


Solution

  • There was a large discussion of this (and other related issues) in a pull request last year. You should check out that thread. Lots of detailed discussion.

    The reason H5BP uses that set-up is that it's the best default solution. If a user of H5BP doesn't do anything else to their set-up, they're guaranteed to get a geographically optimized version of jQuery served to their users from a CDN source with the highest possible chance of hitting the cache lottery.

    Beyond a default solution:

    • If you've got a global audience and you're going to serve your static assets from a CDN, then it would probably be slightly faster to serve a single file from that CDN.
    • If you've got a performance tuned static assets server and you've got a local audience, then you might be faster serving a single file from a static assets server even if it's not on a CDN.

    Really, though, testing your set-up against your own geographical audience is the best way to go. It's the only way to answer this question for your site or application.