CSS critical path

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 of our pages.

Enable CSS critical path

data-variant=info

data-slots=text

CSS critical path configuration is located on the Stores > Settings > Configuration > ADVANCED > Developer tab. However, the Developer tab is hidden in production mode. Once in production mode, CSS critical path can only be enabled using the CLI.

To enable the CSS critical path:

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

Make sure that there is a critical.css file for your theme. Other non-critical CSS files will be loaded asynchronously.

Overview

The 'critical' CSS file should be located in app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css The default Luma theme critical CSS file is located in app/design/frontend/Magento/luma/web/css/critical.css If there is not a critical.css file for the custom theme, but there is one for the Luma theme, Luma's critical.css will be used. The critical css file path can also be configured in di.xml as a constructor filePath argument in the Magento\Theme\Block\Html\Header\CriticalCss block.

To generate a critical CSS for your theme, critical path CSS generators like Penthouse or Critical can be used, or you can create it yourself. While creating critical CSS, adhere to the following principles:

Minify your critical.css to reduce its size.
Do not duplicate styles in critical.css and non-critical style sheets.
Do not introduce new styles in critical.css that are not present in non-critical style sheets. CSS rules from non-critical style sheets should overwrite critical CSS rules. Otherwise your styles can be broken.

Critical CSS loader

If 'CSS critical path' is enabled in the configuration, a preloading spinner will be used. It is added in Magento/Theme/view/frontend/layout/default.xml. After non-critical CSS is loaded and applied, the spinner disappears. The spinner will disappear automatically only if you have CSS styles from the 'Blank' theme CSS. If you have your own CSS rules, you should hide the preloader by using the data-role='main-css-loader' attribute.

Critical CSS performance improvements

Introducing a critical path CSS leads to performance improvements:

Eliminated render-blocking CSS resources. As a result, the time for loading render-blocking resources decreases substantially.
The first meaningful paint time improved from 3.5 seconds to 2.3 seconds.
The speed index increased by 0.8 seconds.

As a result, the Google PageSpeed Insights score improved by 5 points.

data-variant=info

data-slots=text

These are results for mobile devices with slow connection from Google PageSpeed Insights.