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.
How can I create it in my theme and what's the purpose of this?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.Sign up to join this community
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.
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
You can create a
critical.css in your custom theme as the example below.
Reference: Magento 2.4 DevDocs - CSS critical path