15

We have a lot of small CSS and JS files and enabling merging seems to be a good choice.

Many of the CSS and JS files are used on every page (home page, category page, product detail page).

Whenever we saw that a different merged file is loaded again on each page, even the contained CSS must be overlapping.

How can we avoid this and reuse more data?

3
  • Alex are you including different css and js files on different pages? Do you have a link or any info confirming that this extra compiliation/merging is happening? I saw somehting about it the other day and I'd like to know more. We've had issues getting our JS to compile/merge recently. Jan 29, 2013 at 13:52
  • Do not have a public link. But for example on product pages I have some additional .css and .js files. In a Magento default installation actually the .css files are pretty much globally the same, so the merged file has an identical hash. But for .js this differs a lot - so there is a newly combined file for product pages and for category pages and so on - always including the full prototype lib.
    – Alex
    Jan 30, 2013 at 18:57
  • I was searching for the "Merge Javascript Files" feature, to help with cache busting. Hopefully this comment updates the search engine and prevents dups.
    – Ray Foss
    Jun 3, 2017 at 17:41

2 Answers 2

14

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.

1
  • 1
    "Contribute to Magento 2."
    – benmarks
    Feb 12, 2013 at 3:02
6

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.

2
  • 4
    Thanks for the mention. I would like to point out my other free Speedster extension (Speedster Advanced) which comes with a theme optimiser to reduce the double ups in the merged Javascript files - Please see my presentation at the Ibiza Developer Conference 2012 here magento-developers-paradise.com/wp-content/uploads/… for details. Jan 24, 2013 at 0:08
  • I did a lot of testing. It doesn't get rid of all redundancies, but it does get rid of some. And it's not the best minifier, but the redundancy removal compensates for what you could do on your own with a shell script. @KristofatFooman If you could use the system uglifyjs --compress and deal with comments better, you could get an additional improvement of about 4% smaller with my code. im using uglifyjs v3 from node.
    – Ray Foss
    Jun 4, 2017 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.