Remove unused CSS/JavaScript

Retired Boards Appdev Store Design
,

Topic summary

Main issue: how to identify and remove unused CSS/JavaScript in a Shopify theme to improve load speed.

Key guidance provided:

  • Audit the theme’s Assets folder for unused .js/.css files and remove them; uninstall unused apps and clean leftover code. Strong caution to have technical knowledge.
  • Conditionally load scripts per template in theme.liquid (e.g., only on home/product/collection) using Liquid if statements. Code snippets were shared and are central to the advice.
  • A risky suggestion mentioned: commenting out {{ content_for_header }} if no apps are installed; advised only for experts.

New concerns raised (no-code focus):

  • How to reduce excessive DOM size, minimize main-thread work, and improve Core Web Vitals: LCP (loading), CLS (visual stability), and INP (responsiveness) without coding, and whether design changes can help.
  • Another user reports GSC issues: INP problems, an excessive DOM (1,360 elements), images missing explicit width/height, and inefficient cache policy (6 resources), and requests a services quote.

Status: No confirmed resolution. The thread broadened from unused CSS/JS removal to wider performance optimization questions; several items remain unanswered.

Summarized with AI on December 21. AI used: gpt-5.
1

How i can find Unsed CSS/JavaScript files in my Shopify Store?

SpeedoDeveloper_0-1680000132592.png
SpeedoDeveloper_0-1680000132592.png2560Ă—14486 2.29 MB

2

Hey @SpeedoDeveloper

To make a long story short, optimizing the load speed of your Shopify store needs technical know-how and experience with handling liquid code.

As most of us are unsure how removing unused javascript works, we will try to address all your doubts and queries concerning removing unused javascript from the Shopify store script.

However, for practicing this you must have some basic coding knowledge and must be versed with javascript to follow the below instructions.

Else, you can Inbox our Experts team who can help you completely optimize your page speed at no cost for the first time.

What is Unused Javascript or CSS?

Your Shopify store’s front-end code uses a wide range of programming languages like JavaScript and CSS for an interactive user experience. However, it has its implications, adding coding resources in the form of scripts and apps usually comes with performance downgrades on your sore page.

Unused Javascript is the non-critical Javascript that is not used for the content in the webpage. These are generally left behind after you remove the previously added third-party apps into your Shopify store script.

Note: Don’t follow this without a technical background, we suggest you take the help of a technical expert like us.

Remove unused CSS and unused Javascript:

  • Check the Assets folder of the theme and check for unused JS and CSS files
  • Now remove unused CSS and Javascript files
  • Check and remove the unused apps, if any
  • If your store has not installed any app you can comment {{ content_for_header }} code in the theme.liquid

To remove unused apps along with the code use scripts under the condition of the theme.liquid file.

For example:- If a script is required to only load on the home page then you need to set a condition like this

{% if template == “index” %}

//script goes here

{% endif %}

To include the script on a product page, use the below-provided code:

{% if template == “product” %}

//script goes here

{% endif %}

To include the script on the collection page, use the below-provided code:

{% if template == “collection” %}

//script goes here

{% endif %}

Note: This is not advised if you don’t have knowledge about liquid.

The above steps help you remove the unused Javascript(JS) file and CSS files that make your website page script heavier resulting in slower load performance of the page.

Although, removing unused javascript is one of the many processes of speeding up and optimizing your web page speed. You can try other solutions also.

If you want to learn more about Optimizing your Shopify store and increasing website speed by upto3x, Connect with us.

Hope this solution was helpful.

1 Like
3

Hi @Moeed

How can I avoid an excessive DOM size, minimize main-thread work, and fix LCP and CLS without coding? Should I implement anything in the design to address these issues?

4

Hi

We have a number of issues showing in GSC which are affected our metrics

Interaction to Next Paint (INP)

Avoid an excessive DOM size 1,360 elements

Image elements do not have explicit width and height

Serve static assets with an efficient cache policy 6 resources found

Plus several other issues

Could you please contact me for a quote

Regards

Amar