Sign up
Quick links
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to remove unused JavaScript?

‎06-20-2020 01:52 PM
saifirko
New Member
1 0 4

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!

Reply
‎06-24-2020 01:58 PM
TheExtraSmile
Excursionist
10 0 7

Same diagnosis here, same question!

0 Likes
Reply
‎07-03-2020 06:40 PM
FliCityKulture
Tourist
6 0 1

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

0 Likes
Reply
‎07-07-2020 02:13 PM
Theriion
Excursionist
24 0 4

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

0 Likes
Reply
‎07-12-2020 12:30 AM
KatherineFaith
New Member
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?

0 Likes
Reply
‎07-13-2020 07:43 AM
RichardNguyen
Shopify Partner
476 68 250

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.

CRO Expert at PageFly - Advanced Shopify Page Builder.
- Use the Christmas template to skyrocket your sales.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube.
- [Tutorial] Get more tips on using PageFly to soar sales this season
Reply
‎08-29-2020 08:30 PM
greenforest
New Member
1 0 1

Hi @RichardNguyen 

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!

Reply
‎09-05-2020 12:44 AM
KatherineFaith
New Member
3 0 0

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

0 Likes
Reply
‎09-05-2020 02:44 AM
diego_ezfy
Shopify Partner
1495 226 292

@RichardNguyen 

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.

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Available for hire! Same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ Upgrade your theme for free with code snippets coded by me. Just click here!
0 Likes
Reply
‎09-11-2020 07:41 AM
Guido_Michele
Shopify Partner
61 19 45

Hey @RichardNguyen 

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 

 

0 Likes
Reply
Most Liked Authors
View all badges
Quick links
Facebook Twitter Youtube Instagram Linkedin Pinterest
Terms of Service Privacy Policy