Best to import assets from CDNs or bundle them together with custom code? [closed]

Question

I usually bundle my CSS as one minimized file using Gulp then import assets like FontAwesome, Google fonts or plugin files separately from CDNs. Is that the best option or is it even better performance-wise to download these third party assets then bundle them together with our code as one file?

Answer 1

So the 1st point here is why we use CDN:

A Content Delivery Network (CDN) works by providing alternative server nodes for users to download resources (usually static content like images and JavaScript). These nodes spread throughout the world, therefore being geographically closer to your users, ensuring a faster response and download time of content due to reduced latency.

so if you're planning to host your website across globe than I must say better you use CDN.

alternate thing is you can download and bundle using gulp as you are doing it right now but put your css file to some cdn. It will increase your performance. (and it's cheap)

here's amazon cloud front link :

https://aws.amazon.com/cloudfront/pricing/

Answer 2

Like so many other great answers to great questions, we begin with the nearly ubiquitous opening, "It depends..."

• How important is the performance of your website?
• What time interval are you choosing as a meaningful measure of latency (microseconds, tenths, seconds?)
• How big are the assets?
• Who is your audience?
• Where is your audience?
• Which devices is your audience using?
• How often do your resources update/change?
• Etc.

I also try to compress the resources and minimize the number of network requests to reduce load times. However, I tend to test various bundling strategies to see if the changes actually produce faster results. That's because there are so many variables to consider (e.g., is the resource already in the users cache, such as jQuery; is the CDN speed fast enough to counteract the reduction in network requests; etc.)

In your example, I like the minimization your doing for your CSS. And, I like that you're considering the potential benefits of bundling your assets. Try putting this setup to the test and get some numbers.

My hunch is that users not near a particular node of your CDN could experience a benefit (i.e., fewer network requests, taking advantage of HTTP pipelining, etc.) However, that depends on the quality of your CDN; how often the resources in the CDN are used on other sites (as noted by @Ryan, if the CDN resources are already cached, the CDN avoids redundant downloads); how many assets you're using; the size of the assets (e.g., bundling essential elements like the main style sheet with large files could slow down the rendering of the page); and in terms of perception, if the progressive rendering of your page is something that users would notice in the latency without bundling (i.e., if a user sees a default font for a split second but then sees the Google font, is it jarring enough to matter, or was their attention elsewhere.)

Finally, if you do test the bundling, please post a comment. We're curious, too :)