Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Eliminate render-blocking resources
The Score on Desktop is higher at a score of 82%
But has the same problems as the mobile view
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
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
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:
The above optimizations will likely give you the most impactful results.
Best of luck!
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
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.
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.
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.
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.
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 🙂
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
We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024