When merging CSS or JS, a new file is generated for each page type

Short answer: never enable Magento's JS/CSS merging function. Overall it's worse for performance throughout the lifecycle of a typical checkout than sending each asset individually.

Long answer: You should only be serving one CSS file to users. Multiple files block rendering until all CSS is downloaded. Unless you are serving a huge amount of CSS it's advantageous to send it all at once, then the browser has it cached. Using a pre-processor like Sass or LESS can bring this step into your build process instead of letting Magento do it inefficiently.

For JS, ideally you should not be combining these server-side. Client-side script loaders like AMD/RequireJS are better choices and help manage dependencies, which Magento's Layout XML does not. In the real world though Magento drops in scripts at several points in the checkout flow. You're still better off taking the initial page load hit of multiple requests and having separate but cached assets afterwards.

The Fooman Speedster Advanced extension is your best bet for intelligently combining assets without duplication (today).

You are somewhat limited by the Magento 1.x architecture which starts off with a heap of poor practices for frontend performance. It's not realistic to change the course of that ship. Contribute to Magento 2.


We have been using the Fooman Speedster Magento Extension. It's a wonderful extension that handles the merging of CSS and JS file to increase the performance of your page.

From the page:

Speed up your store by combining, compressing and caching Javascript and CSS files. Fooman Speedster combines multiple Javascript and CSS files into a single Javascript file and single CSS file, to enable faster page load times.