0

I want to know what is use of critical.css file in Magento 2. I enable configuration for that. But, how that file will create ?

Note : After enable configuration, CSS not loading in network.

Can anyone please guide me?

Anyhelp would be appreciated.

Thanks.

2
1

You need to manually create this file and add it to app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css.

The ‘critical’ CSS file should be located in app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css The default Luma theme critical CSS file is located in app/design/frontend/Magento/luma/web/css/critical.css If there is not a critical.css file for the custom theme, but there is one for the Luma theme, Luma’s critical.css will be used. 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.

7
  • Hey Ben. So, I need to create blank file at that location? Mar 18 at 9:56
  • Not blank, it needs to be populated with all your critical CSS. Critical meaning the CSS that you want users to load as soon as possible, so things like widths/heights for your header, basic navigation styling etc.
    – Ben Crook
    Mar 18 at 9:57
  • Not getting your point. Can you please elaborate? Mar 18 at 9:59
  • I face issue like when i hard refresh website. Design will be broken for a second. It's because of critical.css Mar 18 at 10:00
  • 1
    My solution is not done. But, I understood concept. +1 Thanks for answer. Mar 18 at 13:26
1

Please find this might help you

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

For more https://www.erwinhofman.com/blog/improved-pagespeed-critical-css-magento/

In Stort: First you need to enable it command: php bin/magento config:set dev/css/use_css_critical_path 1 or by admin panel: Store > Setting > Configration > Advance > Developer > Css setting > Use CSS critical path change it to enable

Then you need to add critical.css file ( Might get error ) app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css

Now what is the use of it - easy way whatever we see on site on without scroll that CSS should be added over here

Why it is useful? - When we use CSS merge that file become heavy to get download and make TTFB take more time to load because of critical CSS that CSS file loses its a priority to get a load with HTML and push it down to get load after HTML make user interactive fast.

Thanks

8
  • It will be auto generate file after enable configuration? I face issue like when i hard refresh website. Design will be broken for a second. It's because of critical.css Mar 18 at 10:03
  • Do you know what will be the issue? Mar 18 at 10:04
  • Yes, It's because of it. See I have mentioned that the merge CSS file loses its priority and download it after HTML so what you have to do is add CSS for what you see first within the screen without scroll in CSS term 0 to 662+px height should be added in critical css Mar 18 at 10:07
  • In console network it's not showing. Mar 18 at 10:31
  • Yes it wont because it is inline CSS. Do ctrl + U and find criticalCss Mar 18 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.