Page Speed in appending external js and css files

Question

i simply would like to know from who has well documented about, if i have 10 js/css external files to append at my site does is better to compress them into only 1 file or is good to have 10,20 external source links anyway in a page speed point of view?

i also ask this, cause using both firebug google page speed and yahoo Yslow page speed tools, they conflict in this, google says to separate files, yahoo says compress all in one :| .. normally i would trust in bigG but who knows :|

Answer 1

First of all, compressing files is (nearly) always a good idea. Both using specific JS and/or CSS compressors, and using GZIP compression at the HTTP-level.

Deciding whether to combine files or not is not so easy; you need to juggle different goals:

1. Minimize the total number of bytes loaded; this includes making sure files can be retrieved from cache
2. Make sure the files loaded arrive in as few requests as possible.

Combining files optimizes for #2, but can be at the cost of #1. If different pages use different CSS / JS, then every page might get a different combined file (permutation of component files), making caching impossible.

A quick-and-dirty solution is to include all generic JavaScript and all CSS used on all the pages in two single compressed files (one JS, one CSS). If your visitors stay on your site for a longer time they will have the best experience, since all CSS/JS needs to be loaded only once, and that one time is as quick as possible.

Answer 2

One of the key performance enhancements you can make is to reduce the number of HTTP requests. Each external resource means one extra request, so grouping them together will have a positive impact on page performance.

If you want to learn more about front-end performance, check out Steve Souders' books. You can find a simplified overview of the topics in the books on the Yahoo! Developer Network (he was at Yahoo! when he wrote the first book).

Answer 3

If you combine your scripts into one script on one host and this host is slow -- your page will be slow. If you have your script broken up into a few scripts hosted on a CDN with different sub domains for the scripts, your browser will download more of them in parallel. Read that site on boosting download times. It has the conclusion "boosting parallel downloads can realize up to a 40% improvement in web page latency. You can use two or three hostnames to serve objects from the same server to fool browsers into multithreading more objects."

Answer 4

Make sure you have the Google Page Speed, YSlow and Firebug addons installed, then use them. They will help you make your website faster.