How to use the critical.css in Magento 2.4?

magento.stackexchange https://magento.stackexchange.com/questions/318789

Question

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?

Was it helpful?

Solution

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.

app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css

Reference: Magento 2.4 DevDocs - CSS critical path

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top