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

cssfrontendjavascript

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?

Best Answer

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.

Related Solutions

Magento – Magento 2 – Heavy loading time (too many js files)

The amount of JS is huge, but if it sums up to 8MB there's something wrong. You should use the "Bundling" configuration in production mode if you don't want >100 files loaded.

With the default Luma theme, bundling, merge and minify enabled, the bundled JS file is 1.9MB.

Varnish is another topic and won't help with performance of generated static files.

Magento 2 – How to Add Block Specific JS and CSS the Right Way

For js it should be easy because magento 2 uses require.js.
So this means you can include a js on the fly when you need it.

A block has to be rendered (in most cases) by a template.
So you need to add this in your template:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

Now create your js file view/adminhtml|frontend/web/js/filename_here.js where all your js code is present.

require.js will know how to pick up your file when it is requested.

For css files I don't know if it's possible.
The css files should go to the head section of the page, but for example if you have your block inside the content of a cms page like this {{block class="..." template="..."}}, when the content of the cms page should be processed, the html up to that point is already rendered so you cannot add anything else to the head block via php. You can try to add it in the template like <style... but that's not what you want (I assume).

Best Answer

Related Solutions

Magento – Magento 2 – Heavy loading time (too many js files)

Magento 2 – How to Add Block Specific JS and CSS the Right Way

Related Topic