CSS Critical Path

[csmithdvin28b7]

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.

[Bhanu Periwal]

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.

[julianne49]

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: 

Output:
================

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.

[Ankit Jasani]

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!

Thanks

[julianne49]

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

Output:
================

Error Output:
================
path/node_modules/critical/cli.
js:2
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)
at internal/main/run_main_module.js:17:11