Critical CSS in Shopify

This is the process of reduce unused css.this is the 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 asyncronously.

Tools like GT metrix,lighthouse,Page speed insights

Tools like GT matrix,lighthouse,Page speed insights

GT-Metrix – https://gtmetrix.com/

Page Speed – https://pagespeed.web.dev/

LightHouse – Available In DeV Tools

i) To create your own CSS file go to store admin > Online Store > Themes > Actions > Edit code> Assets folder, and click on Add a new asset. On the pop-up select Create a blank file and name it whatever you want.

For example: critical.css

ii) save the file in theme.liquid on the top head section.

{{ ‘critical.css’ | asset_url | stylesheet_tag }}

iii) Main css file Add on the footer.

Example

< link rel=”stylesheet” href=”{{ ‘pre_theme.min.css’ | asset_url }}” type=”text/css” media=”print” onload=”this.media=’all’;onLoadStylesheet()” >

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.

vi) After that you will get your result.