Should I combine my javascripts in one and css files in one for performance? [duplicate]

Question

This question already has answers here:

Combining JavaScript files as recommended by YSlow - optimal size? (2 answers)

Closed 8 years ago.

YSlow reports suggest that

I have many javascript files on a particular page and these should be merged in one. I have many css files on a particular page and these should be merged in one.

Q1. Could any body elaborate on this how would it be fast to merge them in one?

Q2. In cases where I need conditionally different version of css/javascript (because of browser type or version) should I minify and use that particular file separately? but that will break the rule of putting all files in a single one. If any body has done it in a way could you please share it here.

Answer 1

Each request for a file involves a round-trip to the server. The more individual files you request, the more round-trips and the slower the page load. Combining as many files in to one as possible reduces the number of requests, and therefore improves page load times.

This is a good rule-of-thumb, but don't get too hung up on it. If you need to load different version for different purposes, go ahead and do so, provided you don't split your code and CSS into too many small fragments

What constitutes 'too many' is site and system specific. Try some combinations and find what works for you. Every system is different.

Answer 2

You can't have everything.

And to be honest, it's not a big deal considering they are cached.

To answer your question,

Q1. Could any body elaborate on this how would it be fast to merge them in one?

It will make one request instead of several hence making the the first page load faster.

Q2. In cases where I need conditionally different version of css/javascript (because of browser type or version) should I minify and use that particular file separately? but that will break the rule of putting all files in a single one. If any body has done it in a way could you please share it here.

Do it. You have to.

Answer 3

For that Case i Build a Compressor in my PHP framework which handle the request. Css or JS. I just have to include each file and it combine and cache depending on HTTP Header.

Answer 4

On JavaScript part

IMHO, you must not combine all of those and minimize because it wont give you optimal performance always. The trick is to group and minimize the JavaScript files you have. For example, say, you have these js files to loaded in your page

1. One (or more) JavaScript librarie(s)
2. Some JavaScript files that pulls content via AJAX to your page
3. Plugins / Fancy animations / Unicorns that make your site looks pretty cool
4. Some js files that does analytics / advertisements

If you minimize all these into one bulky JavaScript file, one wont see any improvement in performance. On contrary, it would be a dreadful experience.

Conversely, if you load them in the following order, it would deliver a better user experience.

1. Load the JavaScript libraries from a CDN ( If you use a library that does not have a CDN, then something is very wrong )
2. Merge the files that delivers useful content and load them next
3. Merge your files that make the site super sexy then
4. Load the necessary evil at last ( I prefer the place just above the closing body tag for that)

Even if you have conditional JavaScript files do not worry too much. There are mechanisms in almost all leading programming languages that do it on the fly.

---

On CSS Part

I am not an expert in CSS and so I cannot elaborate much on that. If you wanna optimize them, you should really use some CSS pre-processors like Sass or LESS or Stylus or something like that.

I am no CSS expert