Merging JavaScript in Magento

Featured Image

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:

BEFORE:

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.

11
Top

Care to rate this post?

Author

Tomas Novoselic

Team Leader, Backend Developer

At Inchoo, Tomas is a Team Leader and Certified Magento Developer who handles Magento modifications at any level. He also works closely with clients on Magento projects of any size and difficulty.

Other posts from this author

Discussion 11 Comments

Add Comment
  1. Sean

    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.

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

  3. Saggy

    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/

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

  5. John

    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?

  6. Sean

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

  7. swapnil kene

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

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

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

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

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

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top