Optimizing javascript and css requests

Question

I need to optimize the loading speed of several existing websites. One of the issues that I have is the amount of requests per page. The websites have 7 or more different ty

Answer 1

There are a multitude of things to consider while deciding how to combine your JS and CSS files.

1. Do you use CDN to serve your resources. If you do, you might get away with more requests per page then otherwise. Biggest killer of performance with multiple downloads is latency. CND will lower your latency.

2. What are your target browsers. If you are audience is mostly using IE8+, FF3 and WebKit browsers that will allow 6+ simultaneous connections to a given sub-domain, you can get away with more CSS files (but not JS). More than that, in the case of modern browsers, you actually would want to avoid combining all CSS into one big file, because even though overall time spent on downloading 1 large file is going to be shorter then time spent on downloading 6 smaller files of equal sumed size in sequence, you can download multiple files simultaneously, and download for 6 smaller files will finish before the download of one large file (because your users will not max out their bandwidth on CSS file download alone).

3. How many other assets do you serve from the same domain. Images, Flash, etc. will all count against connection limit of the browser per sub-domain. If possible, you want to move those to a separate sub-domain.

4. Do you heavily rely on caching. Deciding how to combine files is always a tradeoff between number of connections and caching. If you combine all files on one page and 90% of those files are used on other pages, your users will be forced to re-download combined file on every page of the site, because of ever-changing last 10%.

5. Do you use domain-splitting. If you do, again for CSS you can get away with more files if you serve them from multiple sub-domains. More available connections - faster download.

6. How often do you update your site after it goes life. If you do a patch every few days that will modify CSS/JS files, you defiantly want to avoid combining everything into one file, cause it will destroy caching.

Overall, my generic suggestion, not knowing all the facts about what your situation, is to combine files that are used on all pages (jquery, jquery-ui, etc.) into one file, after that if there are multiple widgets that are used on all pages, or almost all pages, combine those. And then combine files that are either unique to the page, or used only on one-two pages into another group. That should give you the biggest bang for your buck, without having to resort to calculating size of each file, hit numbers on each page and projected standard path of the user on the site to achieve ultimate combining strategy (yeah, I had to do all of the above for very large sites).

Also, one other comment unrelated to your question, but about something you mentioned. Avoid adding Javascript files to the head of the document. Javascript download, parsing and execution will block all other activates in the browser (except for IE9, I believe), so you want your CSS to be included as early as possible on the page, and you want your JavaScripts to be included as late as possible, right before closing body tag, if possible at all.

And one more comment, if you are so interested in getting the best performance from your site, I suggest looking at some more obscure optimization techniques, such as preloading assets for the next page after page completion, or possibly even more obscure, like using Comet to serve only required javascript files (or chunks of js code) when they are requested.