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 the overall SEO of our site.
How Can Do Merging of CSS and Js
You can merge your js and css through the 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 headaches, it would be recommended to keep the 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 lead to unnecessary 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
jQueryinstead of$. This is to avoid conflict between jQuery library and prototype.js library. If you really want to use$in jQuery scripts, then always 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.
