How can I eliminate unused JavaScript from my website?

saifirko · ‎06-20-2020

I ran my website on Google insight and in the report, it shows me that there are unused Javascripts which are taking 7.29s

How can I remove them? pls, help!

TheExtraSmile · ‎06-24-2020

Same diagnosis here, same question!

FliCityKulture · ‎07-03-2020

Same for me. My website takes forever to load and there is so much unused JS for it shown

Theriion · ‎07-07-2020

hey there.

Any luck with this? I'm having the same problem and don't know where to find this unused code lol.

Thanks

Regards

Theriion

KatherineFaith · ‎07-12-2020

Hi I'm trying to figure out the same thing. I need help! I hear there is no app for removing unused javascript. Is this true?

Adedayo · ‎10-26-2020

Hiya, my site has a speed score of 20. It has some many unused javascript. Can you help to remove them for a fee?

PageFly-Richard · ‎07-13-2020

I think optimizing load speed is a long story and would require a lot of technical knowledge. This shouldn't be something you do by following some online instruction. But if you have knowledge about JavaScript, here are some of the things I did to make my store 99 in Google Page Speed Insights.

Note: Don't follow this without technical background, I suggest you give this to your technical specialist.

Defer offscreen images:

Install lazysize script (https://github.com/aFarkas/lazysizes) and update image source in the theme

Properly size images:

Check the container size (wrap the image and crop the image as the same as container size)
Use img srcset instead of src to get 2 versions of image, 1 for retina screen and 1 for non-retina

Remove unused CSS and unused JS:

Check assets folder of the theme and remove unused CSS and JS file
Check and remove unused apps
If your store has not install any app you can comment {{ content_for_header }} code in theme.liquid (not recommended if you don't have a knowledge about the liquid)

Optimize, Minify code:

Minify HTML code: Add this code into theme.liquid file to minify HTML https://pastebin.com/raw/V9gRwnWR
Concat CSS files and minify all of them and load inline inside <head> tag
Concat JS files and minify and async load at the bottom of the page (before </body> tag)
Add font-display: swap into all external fonts

Though this is a a lot of technical work and you almost CANNOT do it without technical background, but understanding what needs to be done is important. Because not all technical guys know exactly what to do and you will need to work with him until he actually improves the load speed.

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

greenforest · ‎08-29-2020

Hi @PageFly-Richard

Thank you for your invaluable advice.

How would one go about hiring someone to improve the speed or seek out someone that could do this for our website to improve speed?

Thank you for your time!

KatherineFaith · ‎09-05-2020

Can you fix this issue? How do we find a technician? Thank you

diego_ezfy · ‎09-05-2020

@PageFly-Richard

Amazing tips. Just as a minor note, as far as I am aware, removing files from the assets folder won't make a difference if they're not being used on the website.

◦ Replace apps with copy/paste code snippets and save money.
◦ Follow my blog & youtube for coding tutorials | Let's work together - click here to hire me!

Guido_Michele · ‎09-11-2020

Hey @PageFly-Richard

great input for a no-coder to pass to a developer to point him in the right direction 😄

I tried many things with content_for_header, the worst line of code for pagespeed.

I know we shouldnt, that's why i started doing it 😛

I solved the problem, that the theme editor on those manipulated themes stopped working,

I implemented a backfall to {{ content_for_header }}, if it change.

I get very good results using an array, when erase parts, manipulate it, change position etc.

So far so good, but there is one major question:

there is nothing more powerful than commenting content_for_header,

I thought because of the not loaded scripts, but the shop is completely functional?

Do you know why?

Thank you, greetings from Barcelona

midomidi2013 · ‎09-26-2020

I HAVE SAME PROBLEM IN MY SIT https://sauditourguide.com/

I HOPE SOME ONE HELP ME

BI THANK U

Leily_a · ‎09-30-2020

hi @PageFly-Richard - is this something we can hire you to help with? Facing same issues; ive been able to locate the unsued code in the developer consile but not sure to to pull those up specifically in the theme editor.

We do also have to fix our image sizes but first looking for help to remove unused CCC & JS as well as optimize / minify code. please let me know if you can assist.

Thank you

Leily

parrotCath · ‎10-14-2020

Hi, thanks for the vert indept answer..it all went way over my head ..if somany ppl are having this problem can shopify help..at all..there normally very helpful.

parrotCath · ‎10-26-2020

That’s what I was thinking..there’s so much information..it’s great..I bet it’s there just finding it ..if you find it let us know..and I’ll be back with a link if I find it..everything else I’ve needed has been there..even if support had to point it out to me..

ThumperDev-Seth · ‎10-02-2020

Greetings All,

I have almost exactly the same load speeds on our and am just starting this journey myself. @PageFly-Richard 's advice is indeed priceless and reflected my initial thoughts as well. I am also considering going the PWA route as well once I get everything optimized simply to gain the extra favor from google.

A lot of my concern around minifying the JS and CSS from the apps and libraries used is versioning and the possibility of the store breaking upon a code change somewhere else in cyberspace and me not knowing which dependency broke. Anyone have experience with this?

Will report my results the best I can and anything else I might find helpful. We're all in it together, lets get it figured out.

parrotCath · ‎10-26-2020

You seem to have a better idea of what you are talking about..it sounded like french to me..I’m lost..what’s the least hiring an expert to do this could cost..I’m getting a small few sales but know once these ppl are happy they’ll tell there friends..it’ll take time but we’ll get there..but I need to watch every penny..or cent these days..I need to get a handle on my marketing outgoings..as I don’t need half of it as all my sales have come from unprompted posts..be nice to have a clue What I’m doing regarding the speed of my site..dose this only affect the site on mobile devices or all devices..my store is www.BigbieParrot.com if anyone can take a look..sincerely Catherine

Marc_Mayr · ‎03-04-2022

Hi, we had exactly the same problem and improved our own store by stripping the content for header and removing unnecessary javascript loaded by apps depending on the page (content, cart, homepage, product...)

As we noticed that quite a few people have that problem, we created an app doing that for you https://apps.shopify.com/pagespeed-javascript

Vishwesh · ‎10-06-2022

Lot of apps install code directly into theme.liquid file to load their code faster instead of using Shopify suggested script tag or theme app extensions. When you uninstall these app they no longer have access to API to remove these code, so these codes are permanently left over in your theme liquid files.

Here are some ways of identifying these codes,

- Check console, if there are error you'll find link to JS where this error is coming from. Most likely this is a script from an app you uninstalled.

- Go through all the sections under theme customize, see if there are any sections that are no required or corresponds to a block on storefront which is empty. Remove such sections.

- Go to theme.liquid file (Action -> Edit Code), you'll see codes like these, they'll usually have app name and a render or include tag. If you are not using any one them, remove them.

I am founder of an app called WishIt.app, you can use this app to create a task to audit and clean up your Shopify theme.

https://apps.shopify.com/custom-css-plus

Fahad_Ahmad · ‎10-24-2023

i have same problem, and tried alot but could not fix, any suggestions please

Guido_Michele · ‎11-29-2023

Hello @Fahad_Ahmad

Even for a skilled developer, to delete unused javascript , is not easy. There is no easy advice that we (developers) can give you. I offer speed optimisation as a paid service. If you are interested, send me a message or mail.

Kind regards Guido

How can I eliminate unused JavaScript from my website?

How can I eliminate unused JavaScript from my website?

Community Blog Articles