Merging JavaScript in Magento

16 comments

1. Is there a way to specify other directory for merged files other than /media/js

   Reply

2. Can you please help me about my JS minifying problem? Default JS minify is not working suddenly. I’m not understanding why.

   Reply

3. i enable merger javascript and CSS from System -> Configuration -> Developer. after saving the top menu of my website disappeared. i did not find anyway to make it correct. Please help me. dont have a developer now.
   i am using SM Megashop theme with SM Mega Menu. but now no top navigation menu is there.

   Reply

4. After enabling js merge my catalog > mange categories page goes blank.
   So i opened app/code/core/Mage/Page/Block/Html/Head.php and applied this code and it works now

   // static and skin javascripts			
   			if(Mage::app()->getStore()->isAdmin()){
   				$html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" src="%s"%s></script>' . "\n",
   					empty($items['js']) ? array() : $items['js'],
   					empty($items['skin_js']) ? array() : $items['skin_js'],
   					$shouldMergeJs = null
   				);
   			}else{
   				$html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" src="%s"%s></script>' . "\n",
   					empty($items['js']) ? array() : $items['js'],
   					empty($items['skin_js']) ? array() : $items['skin_js'],
   					$shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null
   				);
   			}

   Reply

5. i m not satisfaction this method any method plzz help me….

   Reply

6. This sort of thing can be a pain on a “normal” site.
   Once you enter the realm of Core, Theme and Module CSS and JS, it rapidly becomes a nightmare.

   For starters, you have to look at load order and dependencies.
   You then have things like conflicts (Prototype vs JQuery).
   Then there is the common issue of additional resources (such as spinner icons etc.) residing in original directories, where as the CSS/JS reference relative URLs.

   In most cases, the problems people encounter will be caused by such things.

   Then you have the overkill angle.
   For starters, do you really need to include everything into a single file? Would it not be better to break it down by use-case (common and section loaded files – why load up the Image Zoom on pages that don’t zoom images etc.) … it may be better to break it into 2 or 3 different files.
   Minification of content that will be zipped may also be a little OTT – the file-size saving will generally be miniscule (not always, sometimes it’s worth it).

   Few mention the overheads – I’ve been on sites that do this sort of thing dynamically and either fail to cache the combined resource, or dynamically create it repeatedly. A few even seem to generate the request files per-page, so you end up loading the same file under umpteen different file names.

   All in all, it’s not something to simply flip a switch on.
   You need to know what it’s going to do, how and why … and more often than not, either you need a highly robust and well tested solution (usually that costs),
   or you need to custom-build one.

   Reply

7. Hello sir,

   unfortunately i had enable merge js option. after that it conflecting with my website theme , this change i was done by using developer tool, but after enabled that js merge this devloper tool also hide now i cant disabled that. even i was try to disable that module from backend and change status js script merge from backend . can u help me please.

   Reply

8. I installed gtspeed extension for optimization. After compressing js and css…all other extension have been infected…they are not working properly.
   I disabled gtspeed extension but still same issue.

   Please let me know how to recover from these issues.

   Urgent….
   Thanks in advance.

   Reply

9. Nor the standard, nor the Fooman Speedster extension nor even the GT Speed extension work for my magento installation. If I activate one of the three my frontend becomes clutched up, lay out is gone and the Javascript isn’t working either. I don’t know how I can fix this problem, although I need to because my load times now are about 5 seconds… Thanks in advance!

   Reply

10. what if the js file size goes approximately 700KB(after merge), still is it worth merging?

    Reply

11. @John

    Yes it will and it does less than Fooman Speedster. It merges Javascript and CSS files, but being beta has some issues. I gave it the boot for that reason.

    Fooman Speedster minify’s and combines the Javascript and CSS files to get rid of the bazillion files problem stock Magento has and does a pretty good job of it. I have yet to have problems with it.

    Reply

12. Does this conflict with Fooman Speedster? I have Fooman Speedster on, but I think it does the exact same thing. Do you know which one is better?

    Reply

13. You give me a new life, 3Q.

    Reply

14. This features doesn’t work when you have HTTPS on. The fix can be found here -:

    http://magebase.com/magento-articles/magebase-news/magento-1-4-feature-to-merge-css-files-and-https/

    Reply

15. We’d love to use this feature, but most of our sites make use of jQuery which conflicts with Prototype when you select the merge javascript option.

    Reply

16. And if this brings your site to a crashing halt, you can always run Fooman Speedster. It’s a time-tested free module that often will work where the built-in Magento stuff gives conniptions, does a minify on both Javascript and CSS on the fly and merges both CSS and Javascript without being in Beta.

    Reply