A Step by Step Guide to optimizing Unused CSS in Shopify

Shopify stores can improve website performance and loading times by optimizing unused CSS. Guide to optimizing unused CSS that is not used can slow down your site and negatively affect the user experience.

CSS determines the colors, fonts, and page layout of a website based on its style.

Here’s a step-by-step guide to help you in your Shopify store.

Step 1. Remove unwanted css and comments

1. Check CSS file
2. Remove excessive comments
3. Eliminate unnecessary whitespace
4. Validate the CSS after removing it

Here are some extra code files and commented CSS files –

Step 2. For Product Page and Homepage guide to optimizing unused CSS

1. Inline CSS is not included.
2. Only examine the asset CSS files.
3. Looked for unused CSS in the files. 

Review the homepage and product pages on the website.

Step 3. Manage inline guide to optimizing unused CSS

When managing data, we encounter two primary types: “Dynamic data” and “Hard-coded data.”

Step 4. Sort CSS files

Sort the CSS for the product pages

1. Firstly select one file 
2. Make sure this file is not in use
3. Then find unused css

The finding will be easy by using DevTools like Coverage or Filter Styles.

a) Coverage will show you unused css for the current page as displayed below

Coverage: Find unused JavaScript and CSS – Chrome Developers

b) Filter Styles

Inspect Element will provide the filter option, as shown below:

Simply add the file name to this filter and get the same results.

c) Open Firefox Style Editor 

Check whether it is in use or not by toggling the stylesheet visibility.

Style Editor will show you, and allow you to edit the css file.

1. Css used for the product page, which we are separating 
2. The liquid code commented on and shown below which extra css for us
3. Some CSS is being used from other files

Read this Blog and Find:- Critical Css in shopify