How to remove unused JavaScript?

saifirko
Visitor
1 0 7

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!

Replies 20 (20)

TheExtraSmile
Excursionist
10 0 9

Same diagnosis here, same question!

FliCityKulture
Excursionist
12 0 3

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

Theriion
Excursionist
33 0 8

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
Visitor
3 0 0

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
Visitor
3 0 1

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
Shopify Partner
4164 935 1586

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:

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!


PageFly - #1 Page Builder for Shopify merchants.


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

greenforest
Visitor
1 0 1

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
Visitor
3 0 0

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

diego_ezfy
Shopify Partner
2935 562 883

@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.

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Guido_Michele
Shopify Partner
91 25 72

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
Visitor
1 0 1

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

I HOPE SOME ONE HELP ME

BI THANK U

Leily_a
Tourist
8 0 3

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
Tourist
5 0 0

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
Tourist
5 0 0

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
Shopify Partner
2 0 1

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
Tourist
5 0 0

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
Shopify Partner
71 1 10

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


CL32gJHdy_MCEAE=.jpeg

Vishwesh
Shopify Partner
11 3 1

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.

Vishwesh_0-1665043495449.png



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
Excursionist
21 1 2

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

Guido_Michele
Shopify Partner
91 25 72

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