Re: Remove unused JavaScript

How can I remove unused JavaScript to improve mobile speed?

nothappyjan
Tourist
6 0 0

Hi 

 Recently I have been working on cleaning up mobile speed in relation to Google new page experience launching this month in May 

But have a problem with the mobile speed, on GTmetrix  Have managed to get the front page from F to an A  by working on the size of the images on the front page loading  BUT  nothing has changed on the mobile side  still hovering around 21  on Google Speed Check 

My question is - who and how do I get a response from Shopify to look at and remove the unused Java Script? I have contacted other app developers and they have deleted their code that was leftover in the coding but Shopify seems to not want anything to do with helping to clean up the code 

 

Remove unused JavaScript Mobile View 

Remove unused JavaScript.jpg

 

Eliminate render-blocking resources

 

Eliminate render-blocking resources.jpg

 The Score on Desktop is higher at a score of 82%

But has the same problems as the mobile view 

 

 

 

 

 

Replies 10 (10)

eStoreSpeed
Explorer
43 6 13

Hi @nothappyjan,

It is possible that you are using some of the unused Javascript/CSS files on other pages, just not on the page you ran the test on. This is why in order to find unused JS/CSS you will need to ensure you are not using those files anywhere on the site. But it's a big job, so I doubt Shopify can help you with this 🙂 . Alternatively hire some experts to do this for you or you can try yourself using the chrome coverage tool, here is guide https://web.dev/unused-css-rules/

Feel free to reach out!

Best,

eStoreSpeedOptimization

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
nothappyjan
Tourist
6 0 0

Thanks for the reply .. Yes I have all the tools you mentioned  hence why I have picked up on the problem, The desktop is fine to have  changed the home page and tested  thru gtmetrix and div  and a whole lot more to see if I was getting the same result even google speed test ... managed to get A and B results 

But seems made no difference on the mobile speed check thru Google speed page test when it came to switching from desktop to Mobile 

The desktop view is fine high marks 

but Mobile test is still low 

JohnCodes
Shopify Partner
134 10 73

Hi @nothappyjan 

Removing unused JavaScript coming from Shopify can definitely be a big job. This would require you or a developer to comb through all of the code in those files to see what's being used and what isn't. You'd also need to cross-check the code with every page on your site. 

Just about every Shopify website is going to have the same issues with unused JavaScript unless they've gone the route of building a headless e-commerce store. It's worth noting that spending all this time trying to increase your Google PSI score may not be worth it and could even negatively impact your website's performance. While it's important to resolve certain issues raised by Google's PSI tool, some other recommendations just aren't as applicable to Shopify stores.

We recently ran a case study where we tried to increase a Shopify website's PSI score as much as possible. It actually resulted in slower performance: Case study: Does Raising PSI Score Improve Page Speed?

I'd recommend focusing on the following areas and making sure they're as optimized as possible:

  • lazy loading
  • image optimization (compression and image sizing)
  • 3rd party apps (remove unused apps and check for leftover app code)
  • minify all possible stylesheets and scripts

The above optimizations will likely give you the most impactful results.

Best of luck!

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
nothappyjan
Tourist
6 0 0

Hi 

I agree  by using a few programs I have  tested my competitors' websites checked what they have done and haven't done and can tell they have no idea about the new change coming up everything you mentioned above I have almost completed them all 

Have managed to get high score ranks and have tested all settings from different server locations as well gtmetrix is great for this ... One thing I have noticed and have sent an email thru to shop and asked where are your servers, reason been I have noticed a shift of 777ms on some test 

meaning seems to me they are more set up for the American market, not Australia or Asia, 777ms is a long wait when it comes to response time from servers transmitting from Canada to Australia so I questioned Shopify and asked do you have servers within Australia? The answer I got back was " we are global" so no they don't 

Conclusion 

Seems that everyone is having the same issue 

oreoorbitz
Shopify Partner
261 31 132

So for a full optization, you should hire someobdy, but here are some things you might be able to do on your own:

 

1.

You theme is loading jquery 1.1 and 3.4, this is HORRIBLE. You should find the script tag for Jquery 1.1, remove it, and see if there are any errors, if there aren't errors, don't add it back.

2.

There are some resources that can be made non render blocking without worrying about making critical css:

font-awesome, google font for Roboto, all the globomenus

Find the Stylesheet tags and scritps for each of these resources, and place them within the following noscript tag:

 

 

 

<noscript class="defer-tag">
<!---- script tags or stylesheet links or style tags go here ---->
</noscript>

 

 

 

 

You can use that multiple times, you don't have to put everything in just one of those noscript tags.

 

Then place the following script tag at the end of your body tag.

 

 

 

 

    <script>
       // Credit: https://github.com/oreoorbitz   
        document.addEventListener('DOMContentLoaded', () => {
            const noscriptTags = document.querySelectorAll('.defer-tag');
            noscriptTags.forEach( noscriptTag => {
                const doc = new DOMParser().parseFromString(noscriptTag.firstChild.textContent, 'text/html')
                Array.from(doc.firstElementChild.firstChild.children).forEach(e => document.head.appendChild(e))
            });
        })

    </script>

 

 

 

Be sure to check for errors, and make a theme backup before.

 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
cupidscorner-eu
Tourist
5 0 1

wouldn´t it help to have a standard that all developers ensure all remnants of their app be uninstalled when the app is uninstalled?  Why allow the installation of a list of apps to try when the all leave bits and pieces when they´re deleted?  So basicly because there is no guideline for developers on this level we have to hire a third party developer to comb through our site in order to fix a problem which could be avoided in the first place.

oreoorbitz
Shopify Partner
261 31 132

Yup, it would help.

One reason that there is no standard is probably to account for the diferent needs of diferent apps and not constrain what can be made by demanding a specific way of loading the code, but it would really help with the merchant expierence if they can come up with at least some standardization that could apply to most apps.

 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
cupidscorner-eu
Tourist
5 0 1

There should always be a standard.  I get that during the installation, however the deinstallation is my issue.  I’m a fairly new store and since my second month it’s been doing nothing but crawling.  I’m reducing pics from products, used page optimizers and pic compressors and I’m still fluctuating between 20-23 whereas I was at 34 until middle/end of month two.  The optimizer says its because of unused Java and yes pics and … but unused JavaScript is the biggest issue which means it needs to be stated , all remnants need to be removed when the app is removed.  If it’s slowing our sites down this much it’s not just a bit of JavaScript which is being left behind but big chunks.

Marc_Mayr
Shopify Partner
76 1 14

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

 

It allows you to switch on/off Javascript files on specific pages 🙂

CL32gJHdy_MCEAE=.jpeg

elizabethpsar
New Member
4 0 0

Hey,

 

I am totally agreed the answer of EStoreSpeed which is really simple and to the point that how can we remove this unsed javascript problem.

 

Regards