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

Answer 1

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' :)

Answer 2

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