3

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.

Kalher
  • 3,613
  • 2
  • 24
  • 34
  • http://stackoverflow.com/questions/3291681/combining-javascript-files-as-recommended-by-yslow-optimal-size – c69 Jun 22 '13 at 08:51
  • You haven't accepted answers in your previous questions. Please accept them else it is discouraging to answer... – Jatin Jul 24 '13 at 12:43

4 Answers4

8

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.

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.

Bilal Fazlani
  • 6,727
  • 9
  • 44
  • 90
1

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.

C.kosan
  • 71
  • 3
  • You have answered only for Question 1, that too in php, question is not tagged for Php, javascript can be used in any website using any other language too. Please also add the link to aforementioned framework so that it can help anybody else too. – Pranav Singh Jun 22 '13 at 08:32
1

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

naveen
  • 53,448
  • 46
  • 161
  • 251
  • CSS per-processors generate more CSS than needed, its not a tool to cut down on file-size or to have faster CSS. – Mark Jun 22 '13 at 08:43
  • @Mark: My contention was that if he have to change style sheets according to user preference, then he could use the variable approach. – naveen Jun 22 '13 at 08:47
  • no, i'am not voted down!! indeed thats wonderful – Mark Jun 22 '13 at 08:49