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.
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.
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)
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.
Hi @csmithdvin28b7 ,
Hope you have created and applied custom theme already.
If not then follow this link to create and apply theme first: https://www.dckap.com/blog/how-to-create-child-theme-in-magento2/
Now, follow this link https://developer.adobe.com/commerce/frontend-core/guide/css/critical-path/ 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!
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
import os from 'nodes';
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)