How to remove unused JavaScript?

Highlighted
New Member
1 0 2

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!

2 Likes
Highlighted
Excursionist
10 0 6

Same diagnosis here, same question!

0 Likes
Highlighted
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
Highlighted
Tourist
23 0 1

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
Highlighted
New Member
1 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
Highlighted

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.

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes