JS/CSS Compression & minify - User Interface Optimization

JS/CSS Compression & minify - User Interface Optimization

This module is a new version of the discontinued Rissip UIOptimization module

Minify and Optimize Javascript and Cascade Style Sheet

This module allows you to optimize and minify your css and js files by allowing you to use different available compression libraries and methods. It's completely configurable following the capabilities of each libraries.

Compatible 1.4.x until 1.6.2

- Available libraries CSSTidy, JSMin, Google Minify or the YUI copmressor. 

- Compatible with the merging CSS and JS function of Magento

- Works with any css and js files included in layout files using action methods: addCss, addJs, and addItem (skin_js, skin_css and js)

- It doesn't modifiy your originals files

- Update the optimized files when the original are modified automatically or periodically (sunday at 2:00 or configurable via Magento cron)

- Compatible with https website and relative urls. (it fixes a bug in Magento prior to 1.5.1)

Canonical URL

Inspired by the module from Yoast, this feature allows you to create canonical urls of your catalog (products, categories, cms page). Please visit the website of Yoast for more information: http://yoast.com/articles/magento-seo/

This feature is implemented in this module too, to help you to have less as possible different modules.

HTML and CSS validator

- Enable / disable each function

- Use the W3C Webservice validator

- For testing purpose, display at the bottom of each page of your Magento frontend the validation of your CSS or HTML. Don't use both otherwise it will be slow to display each page.

- Allow you to configure default and / or fallback values (doctype, charset, language, ...)

- Allow you to define a local HTML validator server for quickest validation and local development (No local CSS validator server available for the moment). In local development, you need to do it otherwise the W3C Validator could not get access to your local development website.

Requirements

- If you wish to use YUI Compressor. Java on your server is required. You need to provide in the config the path of the binary if different of the environnement default one.

Optionaly:

- For those who use the CommerceBug module, contact me to give you the scripts for it. The script for CommerceBug display the W3C validator for HTML and CSS.

Documentation:

• - An assistant will be available soon
• - Follow the instruction in the configuration page
• - In case of Access Denied in the backend: clear your cache, logout/login. In case, it still doesn't work, save again the user role in System > Permissions > Roles.

Profiling

As promised, I provide you below the statistic of compression and ratio by using the different libraries:

Compressed/Minified file statistic and comparison by using default Magento template, sample data, configuration for Rissp User Interface Optimization module is for all by default. Only the method to compress/minify is changed. Merging file has no influence on compression but has influence on number of HTTP requests which is also an important point.

**** JS compression (analyzed with YSlow):

- no compression, no miniying, no merging:  329.8 Kb

- JSMin (unmerged, no gzip): total 230.4Kb (31% of compression)
- JSMin (merged, no gzip): total 230.4Kb
- JSMin (merged, gzip): total 56.8Kb (compression 83%)

- YUI compressor (unmerged, no gzip): total 193.6 Kb (compression 41%)
- YUI compressor (merged, no gzip): total 193.6 Kb
- YUI compressor (merged, gzip): total 52.6 Kb (compression 84%)

- Packed (unmerged, no gzip): total 133.5 Kb (compression 59%)
- Packed (merged, no gzip): total 133.5 Kb
- Packed (merged, gzip): total 44.5 Kb (compression 86.5%)

**** CSS compression (analyzed with YSlow):

- no compression, no miniying, no merging, no gzip: 95.9 kb

- CSS Tidy (unmerged, no gzip): total 79.8 Kb (compression 17%)
- CSS Tidy (merged, no gzip): total 79.8 Kb
- CSS Tidy (merged, gzip): total 14.7 Kb (compression 85%)

- YUI compressor (unmerged, no gzip): total 82.7 Kb (compression 14%)
- YUI compressor (merged, no gzip): total 82.7 Kb- YUI compressor (merged, gzip): total 14.5 Kb (compression 85%)

- Google Minify (unmerged, no gzip): total 79.9 Kb (compression 17%)
- Google Minify (merged, no gzip): total 79.9 Kb- Google Minify (merged, gzip): total 14.9 Kb (compression 84.5%)

CONCLUSION:

- for JS: 1) YUICompressor 2) JSMin 3) Packed (for compatibility problem with Magento)
- for CSS: 1) CSSTidy 2) Google Minify (almost good as CSSTidy) 3) YUICompressor