Optimizing Page Load: multiple CDN files or single CDN file?

Question

I'm trying to optimize my page loads. Currently, I have multiple resources being pulled from various CDNs (e.g. jquery, etc.). In all, I have about 10 different JS files and 10 different CSS files. Around 50-75% are available on CDNs.

When I run PageSpeed/YSlow on it (via GTMetrix), it complains about me having too many resources and that I should combined the files. I combined the JS files into a single file and did the same to the CSS files (later, I will serve these from a CDN). When I re-ran the tests, my page load time went from 2.19s to 1.87s. It would appear that combining the files and serving locally is faster than separate files served from CDNs.

I could not find any definitive tests showing that combining files and serving locally is better than separate files served from a CDN is superior. I can only guess at this point that once I put the combined file on a CDN that things will get even faster.

Is combining files a superior approach?

Answer 1

You have two dimensions for improvement:

Combine Resources

In general fewer requests mean fewer roundtrips and better page load speeds. (Ref: Yahoo: Minimize HTTP Requests - Best Practices for Speeding Up Your Web Site)

Serve Resources via CDN

A content delivery network will typically have multiple data centers and can server content closer to your site visitor. (Ref: Use a Content Delivery Network - Best Practices for Speeding Up Your Web Site)

You can apply both principals and test to see how your site improves. I would definitely start with combining resources and you'll probably see a good gain there.