Showing results for 
Search instead for 
Did you mean: 

CSS Critical Path

CSS Critical Path

Hello all!


I want to enable "Use CSS critical path" on my site but can't find the correct place to put the critical.css file. I have tried placing it here: app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css 


Creating the file here: vendor/magento/theme-frontend-atlete2/web/css/critical.css.


I also tried replacing the code in Luma's criticl.css file located here: vendor/magento/theme-frontend-luma/web/css/critical.css


I am currently using Magento 2.4.4 with a them called Athlete2.


*Any help would be greatly appreciated - thank you in advance.


Re: CSS Critical Path

Hello @csmithdvin28b7 


Please try below command to enable css critical path:

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

Or enable from configuration by below path



Go to Admin -> Stores > Settings > Configuration > ADVANCED > Developer > CSS Settings > Use CSS critical path

Now, For generate critical.css file first of all, you need to install grunt in your Magento store.




Problem solved? Click Accept as Solution!

Re: CSS Critical Path

Hello & thank you for responding.I tried installing Grunt first on my test site & unfortunately I kept getting the following error:

1. The command "'critical' '--version'" failed.

Exit Code: 127(Command not found)

Working directory: 


Error Output:
sh: line 0: exec: critical: not found


When I changed to the root directory I would get the following error:


There are no commands defined in the "m2bp:critical-css" namespace.


So, I just stopped trying with Grunt & decided to use a generator.  Which is why I am trying to figure out where to put the file. Any help with the above or file path would once again be appreciated. Thank you.

Re: CSS Critical Path

Hi @csmithdvin28b7 ,


Hope you have created and applied custom theme already.

If not then follow this link to create and apply theme first:


Now, follow this link to enable CSS critical path.


After enabling create critical.css file in your custom theme under path web/css/

or you can initially copy paste it from vendor/magento/theme-frontend-luma/web/css/critical.css


Problem Solved? Accept as Solution!


Hope it helps!


Ankit Jasani

Re: CSS Critical Path

Hello & thank you for taking time to help me with this. 


I think the initial problem was that I didn't have the binary path in the admin set correctly. (might still be wrong) It is now set as: node_modules/critical/cli.js


However, when I run: bin/magento m2bp:critical-css:generate I get the following error:



The command "'./node_modules/critical/cli.js' '--version'" failed.

Exit Code: 1(General error)

Working directory: /home/public_html


Error Output:
import os from 'nodeSmiley Surpriseds';

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:872:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
at Module.load (internal/modules/cjs/loader.js:790:32)
at Function.Module._load (internal/modules/cjs/loader.js:703:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
at internal/main/run_main_module.js:17:11