3

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

16
  • 5
    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 5, 2015 at 23:24
  • 1
    "The site loads slowly even on the intranet here" --- so why is it slow?
    – zerkms
    Aug 5, 2015 at 23:24
  • 1
    @ArashMilani from 3 years ago? In an industry where tools and practices become obsolete in a month? Don't think so.
    – zerkms
    Aug 5, 2015 at 23:28
  • 2
    Yeah leave your CDN's be. Reducing browser request bottlenecks and all that.
    – Jan
    Aug 5, 2015 at 23:30
  • 1
    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 5, 2015 at 23:49

2 Answers 2

4

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

1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.