Performance of Merging Javascript / CSS in Magento

Minify-Js--Css-(Web)Summary: Built-in merging of Javascript / CSS will slow down your store. You need Magento Minify Javascript / Css to properly merge files

Many store owners are enabling Javascript / CSS merging in Magento in order to “increase performance”. You can go to System -> Developer and look under Javascript and CSS Settings to see if your store is currently merging Javascript / CSS. If you have enabled merging, then we recommend that you disable this setting now. If you need proper merging, then you should purchase Minify JS / CSS.

Why is built-in merging of Javascript / CSS bad?

It breaks the browser cache. Merging is not done in an intelligent way. It is done too aggressively as all files are merged into one css and one javascript file. This is effective one a single page, but is not effective for a site as complex as Magento. As your customers change page types (home page -> catalog page -> product page) then it will generate new merged URLs which breaks the browser cache and causes the redownloading of all your CSS / JS files.

Why does the default merging generate different URLs for different page types?

Different page types have different CSS / Javascript requirements. Your home page may include 10 javascript files while your catalog page might include 12 javascript files. As a consequence, the merge URL for the 10 file merge will be different than for the 12 file merge.

Does this mean it is better to disable merging?

Yes, your site will be faster if you disable merging. Alternatively, you can use Minify JS / CSS for Magento, which merges intelligently. Your Google Page Speed will decrease if you disable merging and do not use Site Optimizer. However, Google Page Speed only measures page speed. It does not measure site speed. An individually loaded page will be faster with merging enabled, but your entire site will be slower. So, if your customers visit more than one page, you want to disable merging.

Is there a way to verify merging is done properly or not?

Yes, go to the home page of your site and record all javascript / css urls. Then, do the same for a catalog page and a product page. Next, verify that the urls are all the same if the same content is shown. With default merging enabled, you will notice different urls and when you go to the urls you will notice that 90% of the javascript / css is duplicated among the different urls.

Quick Extension Overview

Speed up your site, improve your search engine site rankings and conversion rate, and improve your user experience in the process. Minify Js / CSS extension reduces page size, bandwidth, request count, and server load without anything more than installing this easy to use and feature-full extension.