Defer JS / CSS Magento 2 via layout files?

Question

After reading a lot of devdocs, I can see there is a case for deferring in CSS and JS in the manual

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

However, I can not seem to get this method to work. I'm either placing the files in the wrong location, naming them incorrectly, or just not using the correct syntax as none is provided in the docs.

I've tried placing different methods inside app/design/frontend/theme/name/Magento_Theme/layout/default_head_blocks.xml but I've had no luck, other than removing some of the CSS, as described in

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-instructions.html

I don't seem to be able to remove any JS via the default_head_blocks.xml nor implement the defer to any CSS or JS. And to be honest, the directions in the docs are confusing and many of the examples, don't include the features. Or the directory structure doesn't exist. My Magento theme files are all inside /vendor/magento/ and not in /app/design/ - I am using a cloned copy of Luma where I changed the registration and other files to be able to use it as a renamed theme, but the XML layout instructions are not very well done.

If anyone knows what syntax to use to defer CSS or JS in the header, it would be greatly appreciated as ever method I've tried seems to have no effect.

• Ashar Riaz: any luck ? i have same problem.

Answer 1

For Deferring CSS, use Magento's CSS Critical Path: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-critical-path.html

Answer 2

You can defer parse the JS or CSS using the attribute defer

<script src="name.js" defer="defer"></script>
<css src="name.css" defer="defer"/>

Hope it helps you.

• dawhoo: In the app/design/frontend/theme/name/Magento_Theme/layout/default_head_blocks.xml on 2.2.8, I can't get it to work on CSS or JS, even if I remove first and then try to add back with the defer.
• Raj Mohan R: Can you share the code here
• Ashar Riaz: @RajMohanR have you tested this before ? because in my case it is also not working
• Raj Mohan R: I have tested it for custom css and js files which were not critical. I deferred them and they worked fine for me
• Raj Mohan R: If this is not working good for you try this module meetanshi.com/magento-2-defer-parsing-javascript.html