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?
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.
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.
.cssand.jsfiles. In a Magento default installation actually the.cssfiles are pretty much globally the same, so the merged file has an identical hash. But for.jsthis 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.