Remove unused JavaScript

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 

 

 

 

 

 

0 Likes

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

JohnCodes
Shopify Partner
105 9 56

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

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 

0 Likes
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 

0 Likes
oreoorbitz
Shopify Partner
127 13 77

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes