What is concatenation and minification of javascript and css files?

When a developer talks about concatenating and minifying the Javascript or CSS files on your site, she's talking about optimizing it for performance. Minification is still a valid tool for every site, but concatenation is fast becoming obsolete.


The minification part is removing all the spaces and line breaks from your static files. Humans might find it hard to read, but the browser has no problem if you follow the proper syntax. We basically squish all the spare space out of a file.

But bugs are very common when doing this, so it's unusual to achieve perfect css, js and html minification. That's why the process takes a lot of testing and should be done by a developer! Other compression and networking tools can help with the overall speed when perfect minification isn't achievable.


Concatenation is the process of combining many Javascript or CSS files into one. Since they are basically text files, this process just copies all the text from all the files and then pastes it into one big text file.  

Ideally, with concatenation you would end up with just one Javascript file and one CSS file. The advantage of this was that the old HTTP protocol has a speed problem when serving the pages of a site with too many file requests. To solve this, we use a technique called concatenation.

Concatenation became mainly obsolete with the release of http/2. If your site is on an https connection on Performance Foundry, your files are delivered with http/2 -- it loves smaller files targeted just for the page you're viewing. With http/2 your site will likely run slower for most people if files are concatenated with a 'performance' plugin. There are still some cases where it's a win, but it's getting really fine now; to the point where any on-the-fly concatenation is going to be bad for you. If anyone recommends it, take it (and the rest of their recommendations) with a grain of salt. 

In short: minification, good. Concatenation... probably not.