Optimizing my store regarding unused javascript and css code

Technical Q&A
1

hey, i have some question regarding optimizing my store.

i ran my store through GTMetrix and its always devastating scores,

Screen Shot 2021-10-06 at 15.41.49.png
Screen Shot 2021-10-06 at 15.41.49.png1362Ă—853 162 KB

and im trying to figure out how to make it better. i have problems with some gifs but thats another topic
im trying to understand on Un used javascript and CSS on my site. i read about a Coverage commend on chrome that can show me unused parts i can remove but i dont understand where are they located in the Shopify code. can someone help me on the matter?

Screen Shot 2021-10-06 at 15.39.12.png
Screen Shot 2021-10-06 at 15.39.12.png831Ă—947 169 KB

2

It’s not worth it in my opinion to try and break out all unused css / js on every page, it’s a large project with tiny gains and can make your site susceptible to layout glitches. (For template based sites like Shopify where you did not build a theme from scratch, and where you use 3rd party apps).

Most ecommerce sites using templated themes and 3rd party apps will score low on general analysis tools like that.

But if you’re committed to doing it, here’s how:

  1. First, make sure you don’t have any unnecessary files loading, for example old files from apps you deleted but did not remove the theme contents.

  2. Next, you’ll need to dissect each file and break those into smaller files to load on each template. For example, it’s common to have 1 single theme.css file in your Assets. What you’ll need to do is figure out the code that is used globally (for things like your site structure, header, footer) then remove that and put into a file called global.css and have that load on every page. Next, find the code that only gets loaded on the home page, remove that and put into a file called home.css, and in your theme.liquid, add a conditional statement to only load that file on your home page ( {% if template == “index” %} )

For example, if you see a CSS class called .index, that’s most likely only being needed on the home page, so you could move that into your home.css file.

  1. After you’ve done this for all of your CSS and JS files that your theme uses, it’s time to move onto apps. You can’t edit app code, so if you see warnings for this, you can request the app developer to split that up into multiple files and load depending on the template the user is viewing. Most likely they won’t do it, because it’s cumbersome and will have zero affect on perceivable load speed.

Some analysis tools will recommend you to not load unused CSS / JS, because in theory it’s a good idea, but in reality it’s not worth it unless you are building your site from scratch and have access to all the code.

If you successfully are able to dissect all the code and split to only where it’s needed, if you’re lucky you’ll save a little bit of page weight but it will not make your site feel any faster, files are just text, and text is very lightweight already. The real savings come from image optimization and cutting out file requests from 3rd parties that are not needed.

1 Like
3

hey, i understand your point regarding digging the code,
how can i go and delete codes of removed apps?