How to enable CSS Critical Path in Magento 2

Question

How to enable CSS Critical Path in Magento 2.3.0

Reff: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-critical-path.html

When I try to enable, I'm getting the below error. Magento v 2.3.0

The "dev/css/use_css_critical_path" path doesn't exist. Verify and try again.

For the compilation of the critical CSS, you can use this gulp implementation. github.com/bobmotor/magento-2-gulp — Volodymyr Lisniak, Nov 21, 2019 at 7:01

Victor F · Accepted Answer · 2019-09-09 10:20:14Z

5

answered Sep 9, 2019 at 10:20

Victor F

662 bronze badges

1

It's weird how the documentation for this is already live and for 2.2 as well despite the files not being in 2.2 or 2.3 yet.
– Ben Crook
Sep 9, 2019 at 13:15
2

This confused me as well and I was referred to the MR after asking around on the M2 Community Engineers Slack channel.
– Victor F
Sep 9, 2019 at 14:42

Add a comment |

Rafael Corrêa Gomes · Accepted Answer · 2020-07-31 18:15:33Z

1

You can enable it via admin panel Stores > Settings > Configuration > ADVANCED > Developer or via terminal.

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

How to use 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

answered Jul 31, 2020 at 18:15

12.4k13 gold badges74 silver badges140 bronze badges

Add a comment |