Magento has some built-in configurations to merge all css and js files. This is highly helpful since it helps to improve page load speed and thus it improves overall SEO of our site.

How Can Do Merging of CSS and Js

You can merge your js and css through admin side. All you need to do is, go to System > Configurations > Developer and set Yes for Merge Javascripts and Merge Css.

Order of Loading Js Files in Magento

But most of the cases, merging js files will break your pages. Most of the cases, it will be your home page and checkout pages. This is because these are the pages in which most of the sites will have more number of javascript depending functionalities. So in order to avoid such headeaches, it would be recommended to keep following points in mind.

  • Always include Jquery first
  • Include jquery no conflict js file then. You can find that file in js/jquery/jquery_noconflict.js
  • Include prototype.js
  • Your custom scripts

The order by which we need to load those javascript libraries are very important.

Other Important Points To Note

Other than this, some other points which always keep in mind is:

  • Make sure every js file ends with a semi-colon ; . This is important because, if this semi-colon is missing at the end of each file, while merging js files into one file by Magento, it will leads to un-necessary errors. In most of the cases, the error message won’t give any hints to the real issue.
  • Your jquery depending external scripts and/or inline scripts should use jQuery instead of $. This is to avoid conflict between jquery library and prototype.js library. If you really want to use $ in jquery scripts, then alwasy try to use this.

     jQuery(function($) {
         //inside here you can use $ symbol
     });
    

I hope this post will help you out one way or another. Thank you.