Merging JavaScript in Magento

Merging JavaScript in Magento

This is not very tehnical article and most of you already use this feature, however I have noticed that there are many shops that are not using Magento’s default feature to merge JavaScript files. At the time prior to Magento 1.4, JavaScript merging was included, however it was limited to 10 files. Now that’s not a case anymore.

All you need to do is:

1) Go to admin section
2) Go to System->Configuration->ADVANCED (Developer)
3) Set “Merge JavaScript Files” to Yes (“No” is default)
4) What left is to Flush Javascript/CSS Cache at Cache management admin interface.

That’s it!
Take a look at this images to compare before and after:



Good thing is that you can do the same thing with CSS files, however it seems that it is still in beta, so if you get any problems with relative paths inside CSS files, turn this feature off.

Don’t forget that if you are planning to do it on production, do some testing in your development enviroment first.

I hope this article helped someone.

You made it all the way down here so you must have enjoyed this post! You may also like:

Extending javascript methods Magento way Tomislav Nikcevski
Tomislav Nikcevski, | 2

Extending javascript methods Magento way

Extending Magento 2 default JS components Filip Svetlicic
Filip Svetlicic, | 12

Extending Magento 2 default JS components

How to add an external javascript/css file to Magento? Tomas Novoselic
, | 1

How to add an external javascript/css file to Magento?


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

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

  3. 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			
    				$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
    				$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
  4. 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.

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

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

    Thanks in advance.

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.