diglin

JS/CSS optimisation & minification - User Interface Optimization

  • Popularity Score 4240 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

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.

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!

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
This made my site faster but isnt show on admin panel. I have magento 1.7.0.2 October 18, 2012
Hello Boss, You are providing a nice module . you have decleared that it will not work togather with Fooman Speedster and Yoast Canonical Url modules . i want to use SEO Suite Ultimate with this module and SEO Suite Ultimate module uses Yoast Canonical Url . the problem is how can i use both module in my site. October 5, 2012
Hi I have noticed that after manually refreshing the css/js cache, the initial loading time of my site is abnormally long, ~15 seconds instead of ~4. Of course this is only happening on the first visit after the page, following page loads will be faster than without your module. The initital request however takes a while and I fear it might drive customers away. September 24, 2012
Hello, I tried this module but with my setup i found no increase with speed. Again this maybe due to my setup but i would like to say the developer responded to my emails with lightening speed and offered much help in getting it working. I would happily recommend using his services to anyone that they might help, and i will be looking at his other extensions. September 23, 2012
Now iI only need a versioning system that ensures the minified files get different names when changedö. I can add this manually in Haad.php but an automated system would be much better.. :) September 18, 2012
Newest Avast version detects blacole-av in minified js file. I have forwarded this to Avast aswell but they may require more information... August 28, 2012
Ok, I have activated the css compression with CSS Tidy and js compression with JS Min. Flushed css/js cache and megento cache. Nothing happens. What more to check for? Cron job is not activated. Or doesn't it support enterprise? August 20, 2012
I just installed this on 1.5.1 and now all pages are just a 'blank' white page - I manually deleted the cache files, but still can't find a way to uninstall this extension as I can't even get into the admin area. August 2, 2012
It looks like my configuration isn't saved in the back end. Tried: SELECT * FROM `mg_core_config_data` WHERE `path` LIKE '%uioptimi zation%' Came back with 0 results. July 1, 2012
I installed your extension on a test site, http://magetest.novusweb.com/magento2/ and it worked great! v1.5.1. So, I installed in another site, http://www.wash-safe.com, v1.5.1. Same settings. Nothing is compressed. The js and css are called in the page.xml file, so it doesn't appear to be a design miscoding. I cleared caches, etc. There may be an extension conflict, but I couldn't find one that wrote to Mage_Core_Model_Design_Package.And nothing else jumps out. Both sites use a symbolic link for /media, and have the same permissions. The Wash-Safe.com site does show subfolders for css, css_secure and js, but nothing is in them. Would you have any ideas? I'd be willing to consider hiring you to figure out if necessary. Thanks. June 6, 2012
<<prev2 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.