Skip to content
Critical CSS in Magento 2
Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. Above-the-fold is all the content a viewer sees on page load, before scrolling.The remainder of the CSS can be loaded asynchronously.
1. Identification for Critical css
Tools like GTmetrix,lighthouse,Page speed insights
2. Firstly Check the Score and prepare documentation of readings
Tools like GTmetrix,lighthouse,Page speed insights
GT-Metrix – https://gtmetrix.com/
Page Speed – https://pagespeed.web.dev/
LightHouse – Available In DeV Tools
3. Enable CSS critical path
CSS critical path configuration is
Stores > Settings > Configuration > ADVANCED > Developer tab>css setting
The Developer tab is hidden in production mode. Once in production mode, CSS critical path can only be enabled using the CLI(command).
$ bin/magento config:set dev/css/use_css_critical_path 1
Make sure that there is a critical.css file for your theme. other non-critical CSS files will be loaded asynchronously.
4. File setup for Magento2 critical css
The ‘critical’ css file should be located in,
app/design/frontend///web/css/critical.css
The default Luma theme critical CSS file is located in,
app/design/frontend/Magento/luma/web/css/critical.css
The critical css file path (call the file) can also be configured in
default_head_block.xml
app/design/frontend///Magento_theme/layout/default_head_block.xml
After Deployment.
5. After that Start an Integration & compare template to create a critical.css File.
i) open Dev tools of your site, Go to Network window then select the CSS filter after that,
go to source > as shown in the picture > Remove all CSS Properties then,
Open critical.css(blank file) as a temporary in your next window.
ii) After that in the next window(TAB) compare both CSS and start Integration both window
iii) Copy all used CSS as shown in your second Window after that paste it in the Blank.css file and Integrate.
NOTE: Take Above Fold only
iv) In this process you will see the changes.
iv) so,solution is the first open your reference site and also your site after that integrate according to reference site.
v) After that Check the score of your website through (Tools)
NOTE: After that if you score
NOTE: INCASE IF YOUR SCORE UNDER PERFORMANCE THEN RE-INTEGRATE STRUCTURE AND CLS.
