There’s quite a few things you can do to improve page speed, which is promising. I’ve pasted a list of Javasctipt requests from the Google report below.
I would consider the 400kb requests as really big. If you’re not using any of these apps, removing them would really speed things up.
I’m not sure what the first app is, as it’s a URL to a developers website. Next is a review widget, this should really bee around the 100kb mark, so over 400kb is a bit concerning.
Then there’s a customer loyalty app and then an API call to Google’s translation service.
I would go through these apps and make sure your using them all. If you’re not, you could follow the app developers uninstall guide, just to make sure you remove all of the code.
Been trying to post on here but not sure if my reply is even going through Do you mind pretty please taking a look at my store as well? Any advice you have will be so appreciated!!
Your product pages load pretty fast on my laptop by the way. In terms of Javascript requests, there’s a customer loyalty app in the top two spots. I’ve seen this particular app a couple of times now, so I looked a bit closer and it’s actually only loading after your main page has finished, so it’s not actually slowing your store down. Google just doesn’t seem to take this into account when giving it’s speed scores. So, my opinion would be not to worry about this.
However your chat and email marketing app are impacting load time, I’ve pasted the google report on this below.
If you’re using both of these apps, it might be a good idea to reach out to the developers and ask if the apps can begin after the main page-load has finished.
Such a great job you’re doing by helping others in this thread and keeping this well and alive.
I too, am struggling to improve my store’s speed and was wondering if I could get your help with this. My store’s link is https://thehappycerberus.com/
I’ve been using Google PageSpeed Insights to test my site’s speed and I’ve gotten 19 and 35 for mobile and desktop scores respectively. Shopify’s online store speed meter gives me a 6 only!
Like most people who’ve asked for help here, I’m not very code savvy. I’ve been looking around and trying to dig out and remove leftover code from apps that I’ve deleted, especially in theme.liquid.
For example, here’s the section from Google PageSpeed Insights regarding removing unused JavaScript (which takes up a good 5+s).
It looks like the first one is from a sales pop up app that I use. I use that app but it says that the .js file is unused. And I can’t seem to find that file called salespop.production.js in my assets and within theme.liquid. I’ve found a similar file called sales-pop.min.js. Would these be related?
Not sure what the rest are. Would it be worth to try and contact the app developers as you’ve recommended to others previously?
Regarding removing the code themselves, where else could I look other than theme.liquid?
No worries at all, happy to have a quick look for you. (that pet food measuring spoon is pretty amazing by the way, having a scale built-in to the scoop makes a tonne of sense).
So, in terms of the ‘salespop.production.js’ file, you probably won’t be able to find it in your theme file. That’s because it’s triggered through Shopify’s script tag system. Shopify allows apps to run a ‘script’ each time a page loads. It’s actually quite a nice way for an app to function, as these scripts run after the main page has loaded, so effectively not slowing down your page speed (although Google doesn’t always seem to take this into account).
So, I personally wouldn’t worry too much about this one.
By the way, removing an app automatically removes it’s Shopify script tag from your website.
There’s a section of the Google ‘lighthouse’ speed test called ‘Eliminate render-blocking resources’, that lists the requests that actually slow down your main page load speed. I’ve pasted yours below. The first couple are from your theme. The third one isn’t though and should be in the assets folder of your theme (I think), so if you’re not using it anymore, that could be a file you could test removing. The last one on the list might be coming from your theme too, so maybe best not to remove that.
Hi @OliUK really nice of you to help people so much! I was wondering if you could give me some advice, I have looked on insights and watched the guides etc but I can’t get my head around it all. I have also removed any apps we don’t use but I have no idea how to remove the code, I’ve tried scrolling through it and also searching for the code that comes up in the insights. Our site score sits between 16-21 on shopify and is 25 on insights, we are using Debut so not sure if that’s the issue and we need to move to a paid theme? These are our insights
I actioned all of your suggestions on the earlier speed results and thus have been in touch with all the top apps that were slowing my site speed (https://hygienesanctuary.com/).
“The size value you encountered is actually the raw value after browser de-compression.
We use Brotli compression. Therefore the actual script value before browser de-compression is 68kb. here an image example :”
and another one (Opinew) said : “You shopify expert isn’t quite right. Our script is 400kb after unpacking but actually comes at 140kb to your site” (Our test results from this site were 709/440 KB)
Hence, Is it possible that these both sites might be using some other criteria to monitor the speed on their end and thus might be correct too please?
Thank you SO much again mate for all your help! I really appreciate it!
Thanks for passing on the app developer’s replies, it’s handy to see.
All the figures I sent you were just copied and pasted from the Google report. So, it’s possible there’s some further context there.
Something I’d recommend is to open your site in Chrome, click ‘inspect element’, click the ‘lighthouse speed test’ from the top menu options.
Then after running that, there will be a section of the report called ‘eliminate render-blocking resources’. There will be a list there with how much time different requests slow the main page-speed down. If one of the apps is in there and taking up a sufficient amount of load time, then I would still worry about it.
Google sometimes doesn’t differentiate between processes that slow the main page load down and processes that happen after the main page has loaded. The ‘eliminate render-blocking resources’ lists the former. If any of the apps are listed here, you could ask theme if there’s any possibility of loading ‘async’?
I’m not a theme developer, but we have one of our test stores with the Debut theme. It’s pretty Javascript light and doesn’t have lots of bells and whistles, so it’s probably one of the better themes for page speed.
There’s a menu app that’s directly slowing down your page speed (2nd in the ‘Eliminate render-blocking resources’) section. Do you still have this app installed? If not, you could test removing it’s file in your theme => Assets folder. Just be careful to test that removing it, doesn’t adversely affect your theme.
The ‘Remove unused JavaScript’ section of the report isn’t as important for page speed, but I’m just having a quick look. The second request in the list is loading after the main page has loaded, so not really an issue (even if Google says it is). The rest are Facebook, Paypal or your theme. They don’t look like huge requests though, so I think you’re doing ok.
That menu app pops up again later in the ‘Reduce the impact of third-party code’ section of the report and Google claims it’s slowing your site by 2 seconds. So, I think this is the main area to look into.
Thanks for your comprehensive input (and also feedback about one of my products, always very useful!).
Your explanation regarding how the app scripts runs after the main page loads makes a lot of sense, seeing as from a layman perspective, it does load only after everything else has loaded. However, it still doesn’t change the fact that a huge portion of opportunities suggested by Google lighthouse speed test is related to removing unused JavaScript. I noticed a few of them could be related to Facebook, just a wild guess based on static.xx.fbcdn.net (could be completely wrong here). And also, I’ve been told that not necessarily removing scripts help but aggregating them makes pages load quicker? I’ve tried aggregating these when I implemented lazy loading based on tips from Shopify forums as well previously.
And regarding ‘Eliminate render-blocking resources’, I’ve removed the unused one. Thanks for that. However, the ones for my theme still contribute a good 2s to potential savings. Is there a way to optimise these? I noticed Google suggests deferring non-critical js/styles.
All those fbcdn links are coming from Facebook I think (or at least their content delivery network). I’ve had a quick look at the files from those requests and I don’t really understand what their purpose is. As far as I know, only Facebook services can use the FBCDN. It might be an idea to look into your theme’s ‘theme.liquid’ file and make sure there aren’t any double-ups or mysterious names in the section of the template. They’ll probably be in the format of ‘<script src=“XXX”…’ or ‘include XXX’, and just make sure you test anything that you remove.
In terms of the requests from your theme in ‘eliminate render…’, I personally wouldn’t touch any theme related files and requests. There’s just a lot of complexity there and it would be hard to start pulling things out without breaking things. That said, the top request is a stylesheet and there are tools that claim to show the unused code from the used.
Thanks for the kind words. Happy to have a quick look at your store.
Your store loads pretty fast for me actually and the only large request Google mentions that’s slowing down your initial page load is your theme’s stylesheet. So, nothing we can really do there.
In the ‘Remove unused Javascript’ section there’s quite a few requests from your theme, but there are also three different requests from Google Tag manager, with two different id codes. Is there any chance you’ve got Google Tag Manager installed twice? This could be a way to increase your score a little (it might be listed twice in the section of the theme.liquid file in your theme’s folder) .
In general though, your store runs a lot faster for me than I’d expect, given the Google speed test score.
The Google report mentions that you haven’t got lazy loading for your images. Lazy loading comes with a lot of themes out the box, but it’s quite easy to add in manually. You just need to add this attribute to any tag: loading=“lazy”
i.e.:
Also, Google mentions these requests are slowing down your page load:
The top ones from your theme, so can’t really be helped. The bottom one looks pretty substantial, maybe get in touch with the developers if you’re still using the app and ask what can be done to speed things up.
Well it would mean adding that code to every template file in your theme, i.e. adding it just once for the product page template would mean all of the product pages get it.
I don’t offer such a service, just because my Shopify app keeps me at capacity. I’d say any web developer could do it no problem though, junior etc.
Yeah, I know what you mean. The publisher name often isn’t much of a clue. I had another look and if you search ‘Change Image On Hover Effect’ on the Shopify appstore, it should come up. They look small-ish, so I’m sure they’ll be happy to help.
I have a similar issue. My website is severly slowed down & bugged because of doofinder with other apps I no longer use. Also it messed up my theme. I now have an unneccessary gap on my site.
I would recommend getting in touch with the company of the apps. They should have an official guide on how to uninstall the app in question.
Also, I’d make sure you’ve uninstalled the apps from the ‘app’ section of your dashboard, as well as checked the … … … section of your theme.liquid file (in your theme’s files) for any mention of these apps.
Do you mind pretty please taking a look at my store as well? Any advice you have will be so appreciated!!