When Should I Combine my JS and CSS Files?

Question

I've been browsing many of the articles here about how and why one should combine JS/CSS files for performance, but none of those articles offered any real guideline as to when is the right time.

I'm developing a single-page microsite that uses seven Javascript files (a mixture of third-party plugins from CDNs and my own files), and eight different CSS files (basically one per plugin, and my own compiled SASS file).

The site loads slowly even on the intranet here; I'm concerned about the performance outside. While searching for several plugins yesterday, I found several CodePen and plugin articles that basically said "cool kids concatenate JS" (literally) which got me thinking about this whole thing.

At what point should I start concatenating and minifying my Javascript/CSS?

And should I paste the CDN scripts into my own JS files, or is it better in the long run to have another HTTP request but use the statically served plugin files?

Edit: Just to clarify - I'm not asking for tools/techniques, but wondering when it becomes important to combine and minify files - should it always been done as @RobG suggested?

You should deliver code to UAT that is as close to production code as possible, including all minification and combining of files. If you don't, then you aren't doing proper UAT

Performance bottlenecks are hard to spot. Concatenating and minifying isn't a 'when' question. You should just do it for production environments, because it's an easy performance gain and very good practice. CDN's are great because they cache well, so don't worry about those unless you need to your site to work offline, which is a good thing to strive for in many cases, so it depends. Just keep in mind that one single blocking function, or one single huge image request will do way more harm than unminfied, unconcatenated code. — azium, Aug 05 '15 at 23:24
"The site loads slowly even on the intranet here" --- so why is it slow? — zerkms, Aug 05 '15 at 23:24
@azium Thanks for the feedback. There's more to optimize in the site itself than merely the scripts and styles. — Singular1ty, Aug 05 '15 at 23:28
@ArashMilani from 3 years ago? In an industry where tools and practices become obsolete in a month? Don't think so. — zerkms, Aug 05 '15 at 23:28
Yeah leave your CDN's be. Reducing browser request bottlenecks and all that. — Jan, Aug 05 '15 at 23:30
You should deliver code to UAT that is as close to production code as possible, including all minification and combining of files. If you don't, then you aren't doing proper UAT. — RobG, Aug 05 '15 at 23:49
@azium—so you leave it to your users to discover bugs introduced by minification? — RobG, Aug 05 '15 at 23:51
@RobG Thanks for your input - this is what I'm most curious about; what's the proper production build? There doesn't seem to be a clear answer from anyone. — Singular1ty, Aug 05 '15 at 23:53
@RobG Of course not. Learn what your minifier actually does. There should never be any guesswork involved. — azium, Aug 05 '15 at 23:56
We deliver code to the customer for UAT, they take it and put it into the actual UAT environment (so their ops people know how to install it, configure servers, create databases, etc.), so from our perspective, it is production ready at that point. If the customer can't get it into UAT, or finds bugs, we fix our side and deliver to UAT again. They often have sociability and other pre–production environments after UAT that check our stuff doesn't affect their other stuff. Again, if issues arise, we fix and deliver to UAT. — RobG, Aug 05 '15 at 23:57
@RobG I don't think this is good advice. Software should not rely on others to be performant, secure, scalable or maintainable. This is the developer's job. — azium, Aug 06 '15 at 00:01
@RobG Thanks for your response. I can definitely see why it's important for the UAT to be as close to production as possible. — Singular1ty, Aug 06 '15 at 00:01
@azium—well, I know what a complier actually does but I still get bugs. — RobG, Aug 06 '15 at 00:05
Complex systems can do unpredictable things. Like how YUI Compressor fails on angular `.catch()` methods, that's hard to predict. Or system x integrates poorly not with system y but with system z that y depends on. Sure in an ideal world the programmer should know how everything works, but unless you've developed something from scratch the probability of understanding how everything works is slim. Also, third party providers and all... — Jan, Aug 06 '15 at 02:05
@azium—that wasn't the question and has nothing to do with either the OP or what I wrote. I absolutely did not say that any of those features aren't the developer's responsibility, I can't see how you can infer that. Our clients do the setup, config, install and migration across environments exactly how we tell them too (because we've designed that in collaboration with their operations specialists), but they must do the actual work. We don't go anywhere near production systems (unless we're contracted to specifically to support production). — RobG, Aug 06 '15 at 03:30

score 3 · Accepted Answer · answered Oct 07 '16 at 15:21

To be honest, it depends. People are often, wrongly, obsessed with merge-min... That's not always the case. The need for merge-min depends on a few things: Sometimes it's faster and BETTER practice to load 2 css files than one big one? Why? Because they'll load in parallel. That simple.

So don't go with the merge-min obsession. If your users are returning, daily users, do merge and rely on browser cache. If not, optimise parallel loads by not merging.

And ignore the simplistic: 'yes you must merge because that's what was best 10 years ago and I've never questioned it' :)

score 1 · Answer 2 · edited Jul 04 '16 at 10:55

When Should I Combine my JS and CSS Files?

Every time you are finished with development. specifically when your code is going to User Acceptance Test (UAT), if not earlier. thanks @RobG for mentioning it.

Which tools do you suggest?

Browserify

Let's Start with your JS files. I think a great tool for bundling various JS files/modules is Browserify.

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

Here is a tutorial on how to use Browserify on the command line to bundle up a simple file called main.js along with all of its dependencies:

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

Install the uniq module with npm:

npm install uniq

Now recursively bundle up all the required modules starting at main.js into a single file called bundle.js with the browserify command:

browserify main.js -o bundle.js

Browserify parses the AST for require() calls to traverse the entire dependency graph of your project. Drop a single tag into your html and you're done!

<script src="bundle.js"></script>

Also there is a tool similer for CSS files called browserify-css.

Gulp

gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more. Integrations are built into all major IDEs and people are loving gulp across PHP, .NET, Node.js, Java, and more. With over 1700 plugins (and plenty you can do without plugins), gulp lets you quit messing with build systems and get back to work.

Public CDN scripts

should I paste the CDN scripts into my own JS files, or is it better in the long run to have another HTTP request but use the statically served plugin files?

You can keep them in public CDN; To avoid needlessly overloading servers, browsers limit the number of connections that can be made simultaneously. Depending on which browser, this limit may be as low as two connections per hostname. Using a public CDN (like Google AJAX Libraries CDN) eliminates one request to your site, allowing more of your local content to downloaded in parallel. Read more on this here

When Should I Combine my JS and CSS Files?

2 Answers2

Browserify

Gulp

Public CDN scripts