diglin

JS/CSS optimisation & minification - User Interface Optimization

  • Popularity Score 4239 Popularity Score

    Popularity ScoreReferrals to Site/Downloads

    0 0 1+ 1+ 250+ 250+ 1000+ 1000+ 10000+ 10000+

Optimize and minimize your css and js files thanks to well known PHP libraries.
Compatible with:
This extension is currently unavailable on Magento Connect. Please contact the developer.

You will be re-directed to the developer's website to complete your purchase.

You must be registered and logged in to get extension key.
In order to get this extension, you must be logged in to the Magento Community. Click here to login or register.
In order to get this extension, you must have active Magento Go Store. Click here to create Go store.
You must choose from Magento Connect Version 1.5.1.0 or 2.0.
Learn more

Magento Connect 1.0 change

FREE
Previous Next
Overview

JS/CSS optimisation & minification - User Interface Optimization

Do not hesitate to fork this project, share your changes or have an issue, visit the GitHub repository

I don't receive any notification if you post a review. So contact me directly instead if you have any issue. Thanks.

Donation

Invite me for a drink (thank you for your donation):

Minify and Optimize Javascript and Cascade Style Sheet Files

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

  • Available libraries CSSTidy, JSMin ( Douglas Crockford), Google Minify (Same as the one of Fooman Speedster) or the YUI Compressor (Java required). 
  • Compatible with the merging CSS and JS feature 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). Generate a unique file to force browser refreshing if the file has been modified.
  • Compatible with https website and relative urls. (it fixes a bug in Magento prior to 1.5.1)
  • Force refreshment of the browser cache if content of css or js has been updated.

Canonical URL

Inspired by the module from Yoast, this feature allows you to create canonical urls of your catalog (products, categories, search products and cms pages). 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 configuration of this module, 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:

  • Follow the instructions 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.
  • This module is not compatible with Fooman Speedster and Yoast Canonical Url modules. Deactivate them before to use this module by editing the app/etc/modules/MODULE_TO_DEACTIVATE.xml of the module and set enable to false.

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 Diglin 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

Author

* Sylvain Rayé
* http://www.sylvainraye.com/
* @sylvainraye
* Follow me on github!

Donation

Invite me for a drink (thank you for your donation):

Release Notes

Add automatic versioning for merged css/js files

2013-05-24 21:32:19
  • Version number: 1.5.0
  • Stability: Stable
  • Compatibility: 1.5, 1.6, 1.6.1, 1.6.2.0, 1.7
You must be registered and logged in to get extension key.

Magento Connect 2.0

Magento Connect 2.0

If files are updated the content was changed but the filename generated was the same. Now the filename is changed to force browser to refresh cache. Thanks to mystix for the fix

Library and theme updates

2013-01-02 21:19:38
  • Version number: 1.4.0
  • Stability: Stable
  • Compatibility: 1.4, 1.4.1.1, 1.4.2, 1.5, 1.6, 1.6.1, 1.6.2.0, 1.7
You must be registered and logged in to get extension key.
You must choose from Magento Connect Version 1.5.1.0 or 2.0.
Learn more

Magento Connect 1.0 change

Move themes files to the folder app/design/frontend/base/default, update yuicompressor to version 2.4.7, generate css/js file per store and not globally

Improvements Canonical Url Generator & some cosmetic changes

2012-02-06 05:05:30
  • Version number: 1.3.0
  • Stability: Stable
  • Compatibility: 1.4, 1.4.1.1, 1.4.2, 1.5, 1.6, 1.6.1
You must be registered and logged in to get extension key.
You must choose from Magento Connect Version 1.5.1.0 or 2.0.
Learn more

Magento Connect 1.0 change

- Version 1.3.0: improve canonical url generation, improve some configuration parameters, remove the option JS Packer because incompatible with Magento
- Version 1.2.0: improve compatibility with compilation feature of Magento, add a js/css flush button directly in the configuration page
- Version 1.1.0: rewrite some classes of the minify libraries to respect PHP 5 and prevent some errors, change the module name, make it compatible with compilation feature of Magento, add canonical url feature for SEO
- Version 1.0.10: fix type for css files stored in /js/ folder
- Version 1.0.9: make correct package for Magento prior to 1.5
- Version 1.0.8: make it compatible with 1.5 and some improvements.
- Version 1.0.2: add cron task to allow to update compressed/minified js/css files periodically
- Version 1.0.1: fix a missing config element class, this class seems to exists only since 1.4.1 or more

Minifing and Optimizing your CSS and JS files with different libraries (YUI, Packer, CSSTidy, JSMin). Get info about your page with W3C HTML and CSS Validator. Create canonical url of your catalog products

2012-01-24 17:06:29
  • Version number: 1.2.0
  • Stability: Stable
  • Compatibility: 1.4, 1.4.1.1, 1.4.2, 1.5, 1.6
You must be registered and logged in to get extension key.
You must choose from Magento Connect Version 1.5.1.0 or 2.0.
Learn more

Magento Connect 1.0 change

* Minifing and Optimizing:

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 library.

- Available libraries CSSTidy, JSMin, Packer, 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)
- Doesn't modifiy your originals files
- Update the optimized files when the original are modified automatically or periodically (cron task)
- Compatible with https website and relative urls. (it fixes a bug in Magento priori to 1.6)
- Create canonical url of your catalog products to prevent duplicate content and improve your SEO

* 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 if it's on your local computer.

* Canonical URL

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

* Required:

- 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.

* Optionnaly:

- For those who use the CommerceBug module, contact me to give you the scripts for it.

* 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.

Minifing and Optimizing your CSS and JS files with different libraries (YUI, Packer, CSSTidy, JSMin). Get info about your page with W3C HTML and CSS Validator. Create canonical url of your catalog products

2012-01-24 14:06:45
  • Version number: 1.1.0
  • Stability: Stable
  • Compatibility: 1.4, 1.4.1.1, 1.4.2, 1.5, 1.6
You must be registered and logged in to get extension key.
You must choose from Magento Connect Version 1.5.1.0 or 2.0.
Learn more

Magento Connect 1.0 change

* Minifing and Optimizing:

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 library.

- Available libraries CSSTidy, JSMin, Packer, 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)
- Doesn't modifiy your originals files
- Update the optimized files when the original are modified automatically or periodically (cron task)
- Compatible with https website and relative urls. (it fixes a bug in Magento priori to 1.6)
- Create canonical url of your catalog products to prevent duplicate content and improve your SEO

* 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 if it's on your local computer.

* Canonical URL

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

* Required:

- 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.

* Optionnaly:

- For those who use the CommerceBug module, contact me to give you the scripts for it.

* 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.
Reviews

About the Developer

This extension was developed by and is supported by diglin

JS/CSS optimisation & minification - User Interface Optimization 3.9 5 35 35
404 errors After activated js compression all *_1_cp.js files are in skin/js/... directiories but loading them failing with 404 errors on the js requests http://localhost/myshop/media/js%5Cprototype%5Cvalidation_1_cp.js %5 in the URL given as backslash. No Idea if it have something todo with my local xampp develop enviroment. The canonical-Tag working well but as mentioned, Yoast module must be uninstallied if it was. May 10, 2014
great thanks for the extension! it is verry useful and easy to use! November 19, 2013
Not a miracle, but deliver what it promises Javascript reduced around 30% with gzip and JSMin. It's ok, though... =) October 24, 2013
Problem with YUI Compressor Options Hello, i instaled your extension in 3 of my websites and them appear the same problem, if i change the JSmin to YUIcompressor cause same erros in magento, the butom to buy and others dont functionally, maybe is the option : YUI Compressor Options Java Path But i dont know, you can help me? Thanks Eduardo Hartung June 23, 2013
Site crash Same problem as Sopedro. After installing this extension, my website became inaccessible. Be sure that you really need this extension before install it. ### Même problème que Sopedro. Site devenu inaccessible depuis l'installation. Soyez certains d'en avoir réellement besoin avant de l'installer. Magento 1.7.0.2 March 18, 2013
Test in magento 1.7.0.2 Hello I've installed in magento 1.7.0.2 and apparently there was no error. I active the javascript compression and in the configurable products not load the options in the dropdown. ¿Any sugestion? Later, when I active the CSS compression my css disappears. Has anyone solved? Thanks. February 26, 2013
Good! Working on 1.7.0.2 with Varnish Hi! I had varnish installed on my server with the Turpentine extension by Nexcess and Fooman's Speedster Advance was giving me some issues. Hence I was looking for alternatives to minify my css and js. Chanced upon this and must say its performing as expected, no problems at all. There is no "theme optimiser" like what Fooman has, but this extension does its one job well -- minifying js & css. Recommended. February 25, 2013
This extension oppened a backdoor and my site was hacked immediatly . all javascript stops work and sincerelly i don't know how much i lost. i just know about the site condition because customers call me . spent 24h to clean all the stuff....:( January 28, 2013
Installed on a clean 1.7.0.2. Clicking config page in system->config gives a 404. Tried reinstalling, did not change anything. January 13, 2013
Installed on 1.7.0.2, had to re-install once but then worked without any issues. Thanks for this great extension ! December 1, 2012
2 3 4 next>>
Q&A
(14 Questions : 10 Answers)

Product Q&A

Ask your questions. Share your answers.

 
 
« Back
 
 
Sort by
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_26468385
Customer avatar
I have enabled JS and CSS minify, (JSMin and CSSTidy) and after flushing the cache just in case, files are like they were before.

I can give you access to the backend and frontend if needed.
by
jak3z
-
5 months ago
+1point
1out of 1found this question helpful.
Was this helpful?Yes1No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi, yes please send me them via the private message system of Magento Connect. Regards
by
diglin
-
5 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_26099693
Customer avatar
Answer: 
Same for me. The plugin installs and the UI works. There are no errors in the system or exception log, yet the plugin does nothing. Other css/js minification plugins I have tried seem to work ok (but do weird things to me css, hence trying this one).
by
onlyteesin
-
2 months, 2 weeks ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_256266
Customer avatar
Hi,

I realise that CSSTidy is ignoring my media query css entries and the mobile view is not showing up.

I tried using the highest compression and it would not work.

Was wondering how can I configure csstidy to work with media queries?
by
Andrew C
-
1 year, 9 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi, sorry for the delay of the answer, I got no notification about that.
The CSSTidy is quite an old library not updated by the original developer. I may remove it in future if I find something better or if I improve it myself.
You may use a different library like JSMin or YUICompressor

Regards
Sylvain
by
diglin
-
1 year, 2 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_25891532
Customer avatar
Can i use this together with GTspeed extension?

Regards,
Coer
by
coer
-
1 year, 8 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi, sorry for the delay of the answer, I got no notification about that.

Maybe not because it's possible it overwrites same class than mine

Regards
Sylvain
by
diglin
-
1 year, 2 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_27368052
Customer avatar
Hi! I would like to congratulate you for this tool, however when i enable this option CSS Compression / Optimization, it disable the slider from my website. Any idea??

Thanks
by
eladioalberto02
-
11 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hello, it depends on how is build your module. It's hard to help like that. I need more information. What slider module did you installed?

Eventually what you can do, is to change the CSS library in the configuration page of the module and see if your slider reappear.

Regards
by
diglin
-
11 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_155565
Customer avatar
When I use this on a Windows development environment, URL references to CSS/JS have part of the string containing forward slashes and the rest of the string with backslashes.

It produces this:
http://www.example.com/magento/media/css\skin\myscheme\css\styles_1_cp.css

http://www.example.com/magento/media/js\skin\myscheme\css\ccard_1_cp.js

Firefox hates it...
by
chiefair
-
11 months ago
+1point
1out of 1found this question helpful.
Was this helpful?Yes1No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi

Please download the latest version from Git. it fixes this issue: https://github.com/diglin/Diglin_UIOptimization

Regards
Sylvain
by
diglin
-
11 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_27403486
Customer avatar
This does not seem to be working. I still receive the Minify suggestion. No speed change what so ever. I enabled all. Is there some backend changes needed if not default theme?
by
bedazzledkids
-
10 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi,
The speed improvements is relative. I mean it won't make your website loading in 0.5sec It just makes your css and js files lighter. You should also allow gzip compression on web server side.

Now, about your page speed problem could you send me the url of your website? It's minified when you see a block of text for your css and js files and no more comments, break return and some additional tricks like removes of similar selectors or merging of them.
You have to take a look in your source code and check the src files of those js and css files.

If you still have problems, send me a PM with your configuration details for this module and the urls of your website

Regards
by
diglin
-
10 months ago
-1point
0out of 1found this answer helpful.
Was this helpful?Yes0No1
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_27018799
Customer avatar
When enabling the CSS compression it makes the website wide screened and run of the mobile theme.
Java compression is working correctly.

Thank you
by
Dhirena
-
10 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Please contact me via Private Message because it is more appropriate to give you support.

If you use CSS3 styles, it may not work correctly depending on the CSS compression library used.

Give me more info via PM, provide screenshot of the configuration and copy of the code source of the page where you've got the problem. Even better, give me also the url address.

Regards
by
diglin
-
10 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
 
1 answer

CDN

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_199400
Customer avatar
Works with a CDN like Amazon CloudFront or Rackspace?

Thank you.
by
Cawe
-
6 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0

Answers

Customer avatar
Answer: 
Hi, the extension doesn't change the behavior of Magento, it just changes the content of the js and Css. So if you manage to set Magento to works with a CDN, this extension will work

Regards
by
diglin
-
6 months ago
0points
0out of 0found this answer helpful.
Was this helpful?Yes0No0
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_25916109
Customer avatar
I can't find the configuration settings in 1.7.0.2. Please guide me
by
Bright Ideas
-
1 year, 6 months ago
-1point
0out of 1found this question helpful.
Was this helpful?Yes0No1

Answers

Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_87027
Customer avatar
Answer: 
Hi, sorry for the delay of the answer, I got no notification about that.

Refresh your cache and logout and login again. You should find it again

Regards
Sylvain
by
diglin
-
1 year, 2 months ago
+1point
2out of 3found this answer helpful.
Was this helpful?Yes2No1
Avatar Image Url:: http://www.magentocommerce.com/images/avatars/uploads/avatar_26142906
Customer avatar
My site crashed after i enabled this extension ,

Note: i) i cleared cache ii) did reindexing

when i see the file names of css " styles_1_cp.css "

the file is very much present

can you please help what im i missing out as im newbie to magento
by
chandanv
-
1 year, 9 months ago
0points
0out of 0found this question helpful.
Was this helpful?Yes0No0
2 next>>
2 next>>
Get Help

Support for This Extension

The best place to start if you need help with a specific extension is to contact the developer. All Magento developers have both a contact email and a support email listed.

Magento Platform Support

If you need support for a Magento platform, there are different options for support depending on which Magento platform you are using. Below are links for specific platforms.

In order to upload extension, you must be logged in to the Magento Community. Click here to login or register.

Close

Register

* Required Fields

Close window

Forgot Your Password?

Please enter your email below and we'll send you a new password.

* Required Fields

Close window

Login

To upload extension you must be logged in.

* Required Fields

Close window

You are using an outdated browser

We built Magento Connect using the latest techniques and technologies.
This makes Magento Connect faster and easier to use.
Unfortunately, your browser doesn't support those technologies.
Use the links below to download a new browser or upgrade your existing browser.