|
| 1 | +--- |
| 2 | +group: frontend-developer-guide |
| 3 | +title: CSS critical path |
| 4 | +functional_areas: |
| 5 | + - Frontend |
| 6 | +--- |
| 7 | + |
| 8 | +All CSS styles loaded from external files are considered as render-blocking. It means that web page will not be displayed until these files are loaded. |
| 9 | +By using 'CSS critical path', we deliver minified critical CSS inline in `<head>` and defer all non-critical styles that are loaded asynchronously. |
| 10 | +Thus we can significantly improve the time to first render of our pages. |
| 11 | + |
| 12 | +## Enable CSS critical path |
| 13 | + |
| 14 | +{: .bs-callout .bs-callout-info } |
| 15 | +CSS critical path configuration is located in **Stores** > Settings > **Configuration** > **ADVANCED** > **Developer** tab. But **Developer** tab is hidden in [production mode][production-mode]. Once in production mode, CSS critical path can only be enabled using the CLI. |
| 16 | + |
| 17 | +Enable CSS critical path: |
| 18 | + |
| 19 | + ```bash |
| 20 | + bin/magento config:set dev/css/use_css_critical_path 1 |
| 21 | + ``` |
| 22 | + |
| 23 | +Make sure that there is a `critical.css` file for your theme. Other non-critical CSS files will be loaded asynchronously. |
| 24 | + |
| 25 | +## Overview of Magento's critical CSS |
| 26 | + |
| 27 | +The 'critical' CSS file should be located in `app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css` |
| 28 | +Default Luma theme critical CSS file is located in `app/design/frontend/Magento/luma/web/css/critical.css` |
| 29 | +If there is not `critical.css` for the custom theme but there is Luma theme, Luma's `critical.css` will be used. |
| 30 | +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. |
| 31 | + |
| 32 | +To generate a critical CSS for your theme, critical path CSS generators like [Penthouse](https://www.npmjs.com/package/penthouse) or [Critical](https://www.npmjs.com/package/critical) can be used,or you can create it yourself. While creating critical CSS, adhere to the following principles: |
| 33 | + |
| 34 | +- Minify your `critical.css` to reduce its size. |
| 35 | +- Do not duplicate styles in `critical.css` and non-critical style sheets. |
| 36 | +- 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. |
| 37 | + |
| 38 | +### Critical CSS loader |
| 39 | + |
| 40 | +Ff '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`. |
| 41 | +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. |
| 42 | + |
| 43 | +## Critical CSS performance improvements |
| 44 | + |
| 45 | +Introducing a critical path CSS to Magento leads to performance improvements: |
| 46 | + |
| 47 | +1. Eliminated render-blocking CSS resources. As a result, time for loading render-blocking resources decreases substantially. |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +2. First meaningful paint time improved from 3.5 sec to 2.3 sec. |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +3. Speed index increased by 0.8 sec. |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +As a result Google PageSpeed Insights score improved by **5** points. |
| 60 | + |
| 61 | +{: .bs-callout .bs-callout-info } |
| 62 | +These are results for mobile devices with slow connection from [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) |
0 commit comments