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?
Best How To :
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 it would result in an additional DNS round trip. Ultimately, this may cause it to become even slower than if you had just served it using your own server. After the DNS is resolved, this largely becomes a non-issue. The speed then depends on a lot of 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 the 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. So 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 globally in multiple continents, CDNs can help provide fast access for a wider audience. This is because content is usually served 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 choice, but there are cases where it is justified to "go solo". 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 of up to a few seconds - possibly because the CDN resources are periodically kept busy by DDoS attacks. For small sites not expecting high traffic volume, it's usually faster to simply serve files off your own server, especially if your site is catering mostly to local traffic.
You should always minify and concatenate files, regardless of CDN or not. Don't bother with keeping individual library files separate. A false promise that you may have heard: in case the user's browser already cached that same library file from visiting another site that happened to use the same library file from the same CDN, you'd save a round trip fetching that file!
Sadly, more often than not, this doesn't 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 websites use different CDNs. 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 cache hit (you save what - 28KiB?), you are incurring the HTTP request overhead every for single file. I say just go ahead and concatenate all your JS into one big file, even including all the libraries - it's gonna be faster in 99% of the time.