Load resources via CDN or minifiy/concat and serve yourself?

644 views Asked by At

When serving static css/js/etc resources one has the option to use a cdn or to use your own server.

With a CDN you include many includes but they can already be minified. Alternatively you may minify and concatenate all the files into one css bundle and one js bundle.

Which method is more effecient/performant and why is this the case?

2

There are 2 answers

0
light On BEST ANSWER

Interesting question. I'd say it depends.

Using a CDN can be slower than using your own server. This is primarily because the CDN resides on another domain, hence each request to the asset would result in an additional DNS round trip. This may cause the entire operation to become even slower than if you had just served it using your own server. That said, after a one-time DNS lookup penalty, DNS round-trip largely becomes a non-issue; the speed then depends on other network factors - how congested the CDN is, distance between the client and the CDN node (relative to your server).

The value of using CDN will only become apparent as your site grows - and your server begins to choke under heavy traffic. A CDN can be used to offload all static requests and prevent them from ever hitting your server. This is especially useful if your server bandwidth is limited and you're serving large files. If you're planning to scale, a CDN is almost a necessity.

CDNs may also help propagate your content to nodes nearer to clients from another part of the world. So if you don't have servers sprawled across multiple continents, CDNs can help provide fast access for a wider audience. This is because CDNs usually serves content from the node closest to the client.

All in all, whether you should use an external CDN depends on these factors:

  • how large are the static files in your site?
  • how much bandwidth does your server(s) have?
  • where are your servers located?
  • what is your site target audience?
  • how much traffic are you catering for?

I'd say most of the time, going with CDN is a better option, but there are cases where "going solo" can be justified. In my experience, the free CDNs are not exactly blistering fast compared to even modest AWS or GCE servlets. The network speed is also quite unpredictable, suffering from occasional lags (up to a few seconds) - this could possibly be because of periodic DDos attacks keeping the CDN busy. For small sites not expecting high traffic volume, it's usually faster to simply serve files off your own server, especially if you are catering mostly to local traffic.

You should always minify and concatenate files, regardless of CDN or not. Don't bother to keep individual library files separate. A false promise that you may have heard regularly: if the user has visited another site that happened to use the same library file from the same CDN, his browser would have already cached that file, and you'd save a HTTP round trip request for fetching that file.

Sadly, more often than not, this does not happen. Even with jQuery, the most popular JS library, it seldom happens. There are simply too many different versions of jQuery in deployment as websites are developed at different times. Furthermore, different sites use different CDNs - Akamai, CloudFlare, Amazon CloudFront, cdnjs, MaxCDN, the list goes on... It's actually quite rare to find two popular sites using the same CDN and the exact same library file.

So, if you don't concatenate files in hope of the occasional browser cache hit (you save what - 28KiB?), you incur the HTTP request overhead for EVERY single file. I'd say just go ahead and concatenate all your JS into one big file, including jQuery and all other vendor libraries - it's gonna be faster in 99% of the time.

0
AudioBubble On

In my opinion, using a CDN is more efficient because you'll benefit from parallelism : while your server will serve the main content, requests will be made in parallel to serve content from the CDN.