JavaScript Combine and Minify – troubles and solutions
We minified and combined all JavaScript files on our website and got about 250ms gain in load speed (or 6%) and website performance. It’s not so much but JavaScript minify technique can be very dangerous in few cases. Let’s speak how to reduce number of failures with scripts merging (manual r automatic).
Minify tools
Some troubles are related to improper minify tool selection. There are a few well known tools, let’s review them.
- JSMin (or JSMin+). The first one is very fast and powerful (minify up to 5% over initial gzip). The second one is CPU expensive, but can gives you more minify (it seems about 6-7% over gzipped version). But both tools can be used for sure in any case (due to some reasons of finite states automation – some JavaScript constructions and variable scopes can’t be shrinked for sure), and there are some errors (very rarely fortunately).
- YUI Compressor. More robust tool which requires java. Most of hosting environment (PHP-based) don’t have it (or don’t allow to execute shell scripts to envelope java calls). The second drawback is that YUI Compressor (due to java virtual machine usage) is very heavy (about 10x more CPU expensive than JSMin). And it give about 6-7% additional compression (with gzip).
- Packer (from Dean Edwards). It can be very useful if you can’t apply gzip for JavaScript files because it creates some kind of archive with JavaScript itself. This adds payload every time with script initialization (with every page) but in case of small libraries can be helpful. This method also often breaks initial JavaScript code (due to not standard-complaint assets). Be careful.
- Google Compiler. Very powerful tool (and can save about 10-20% more over YUI Compressor, so up to 10% over gzipped JavaScript file) but is hard to use (a lot of options) and also required java on the server. So it’s better to use it on a local PC or in production schema.
Also you can write your own tool to reduce your scripts (maybe be even faster and more efficiently than all mentioned ones) but you should test all functionality after each such minify action.
Combine troubles
The most of WordPress websites has about 5-10 JavaScript files per page. Plus some inline code (which activates such libraries). Finally about 10-15 chunks of JavaScript code. Each of these chunks can be broken (due to bad plugin compatibility, old or non supported browser, or for any other reason). So if we just merge all chunks together we can get completely broken client side logic what is caused by the only JavaScript error (with an old plugin, or conflicts between plugins).
So we can’t combine JavaScript files for sure at all?
Actually, no, we can’t. But there are few approaches to inject graceful degradation to JavaScript combine logic.
Graceful degradation and back compatibility
First of all we can merge together only JavaScript libraries themselves. Without inline code. This can guarantee (in the most of cases – because usually there are used generic libraries which have great compatibility) more or less stable work in almost all cases.
But there is one drawback – we can’t place for sure merged file before all inline calls or after them. Because some libraries (in this merged package) can be used for further logic. And some can be called with parameters (which are defined a bit earlier), and such parameters must be followed by JavaScript libraries. So we need to have an option – where to place merged JavaScript file. And WEBO Site SpeedUp has it.
The main approach here is to envelope each JavaScript chunk into try-catch construction. So we can execute all code in combined file and it the case of any failures just inject into the document initial JavaScript call. Final code will be the following
try {
... content of JavaScript library ...
} catch (e) {
document.write('initial JavaScript file call');
}
Our combined file (with such constructions) won’t be loaded ‘on fly’ (so document.write won’t break anything), and try-catch logic will provide required compatibility.
The only drawback here is that try-catch construction ‘eats’ CPU. And these expenses will occur on every page load. But this provides a safe way to combine any JavaScript together (of course without any troubles with code order which can be solved only as described above).
Conclusion
There are several reefs in JavaScript combine and minify – minify tools has different features and server side support. Also minified code must be tested after minify. Additionally you should use safe combine approach to be sure that all included JavaScript libraries are being loaded and don’t conflict with each other.
NO RESPONSE TO JavaScript Combine and Minify – troubles and solutions