I noticed that I have a critical.css file configuration in my new Magento 2.4 installation as you can see in this image below.

Magento 2.4 critical css file

How can I create it in my theme and what's the purpose of this?


All CSS styles loaded from external files are considered as render-blocking. This means that a web page will not be displayed until these files are loaded.

By using ‘CSS critical path’, we deliver minified critical CSS inline in <head> and defer all non-critical styles that are loaded asynchronously. Thus we can significantly improve the time to first render our pages.

How to enable it

You can enable the admin panel as your image or running this command below.

bin/magento config:set dev/css/use_css_critical_path 1

How to customize it

You can create a critical.css in your custom theme as the example below.


Reference: Magento 2.4 DevDocs - CSS critical path

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.