Optimizing your Shopify store - how to spot slow apps
I'm a software engineer and it surprises me how many apps out there are unoptimized and slow down the stores, so I wrote a guide on how to spot those apps. Hope it's not too technical.
Table of Contents
Apps on Shopify are important, they make the amazing platform even richer by adding extra functionality like reviews or drop shipping etc.
However, even some of the popular apps can slow down the loading of your pages. That means fewer customers will be buying because of a sluggish website. Research by Google indicates 53% of people will leave a mobile page if it takes longer than 3 seconds to load. I'll show you how to avoid those slow apps.
From the hundreds of Shopify that I have supported so far, more than half of them have optimisation problems. Many times I’ve had merchants complaining that Opinew is slow which when looking at the amount of work we have put into making it lightweight, comes always as a surprise (Opinew usually makes either zero or just 2 small requests, everything is minified and compressed). So I put their shop through a page speed tester and what do I see?
Page load time: ~10s Requests: 270 Weight: 8.9MB
Not good. The average page on the internet makes around 90 requests and weighs around 3MB.
The extremely long 10s page load time is a consequence of those requests, how long they take and the weight of data that your browser downloaded.
"Make sure they [web pages] load fast, for your users. I aim for less than 2-3 secs", John Mueller, Google (2016)
To clarify:
Request - it's a piece of information/data your browser requests from the internet to build the webpage you're looking at. Your browser requested for example the image of the tortoise on top of this article.
So in this case each of those 270 requests takes some time to finish loading.
And the more data each request sends to your browser - the longer it takes. (Takes even longer if you have slow internet)
When you set up a fresh Shopify, without any apps installed, Shopify will always be very lightweight and responsive. Think of getting a new laptop. Initially, it starts up quickly, everything works so fast.
Then you start installing apps, some of them are poorly developed, some of them run in the background, consume the memory and processor -- slowly but surely your laptop becomes slow. Same with a store on Shopify. You need to be extremely cautious about which apps you install.
How apps can slow down your shop
The app makes too many requests. Anything above 4 is too many.
The app is simply slow - I've seen apps that take 15s to fetch data from their server. Oh my.
Files aren’t minified -- Some of the files that your browser requests should be compressed (.js and .css files) It’s a bad sign if they aren’t. Example of an unminified and minified .js file:
Requests are heavy. (300-500KB and more can be considered heavy)
Apps will leave code behind after you uninstall them, sometimes that code still works and adds extra requests that do nothing.
How to diagnose?
We will use GTMetrix. It does require some knowledge of networking to fully understand but don’t worry. I will give you a few rules of thumb on how to spot an app that is slowing down your Shopify.
- Check for an app that makes lots of requests.
This is important if you have a lot of NEW customers that will open the website for the first time. The first few pages open will load every resource, before your browser gets smart and saves some of the frequently used files on your computer.
Go to gtmetrix.com. Paste a link to one of your product pages. Then click "Analyze".
- slowClick on the “waterfall” tab to see what resources the browser downloads when somebody opens that page for the first time.
1st column shows the name of the file, 2nd the server that your browser downloaded it from, 3rd - the weight of the request and 4th column shows how long it took to download.
Look through the file and server names. If something repeats a lot, you found an app that makes lots of requests
Hint: Click ctrl+F to open a search bar in your browser and type the app name. Your browser will highlight the text if it finds it on the page.
- Check if the files are minified (css.min, js.min, gzipped)
- In Gtmetrix go to the “Page Speed” tab. Find a row called “Minify Javascript” or "Minify CSS".
- This will show you which files aren’t minified. Some poorly developed apps don’t minify so if you spot their names and files are big, -- you know what to do. Uninstall.
- Check if the app is slow
Some apps contact their servers every time you open a page. We will spot which ones do it slow. Go to one of your product pages.
Open the Network tab of your browser. Firefox: ctrl+shift+q Chrome: Press F12, then select “Network” from the top menu.
Refresh the page.
The network tab looks similar to the “waterfall” tab in gtmetrix. You have the first column with the file name. But the important one is the “time” column. Click on it to sort the requests by time.
On top you will see the slowest requests. Look through them, see if any of them match the app names. If they do -- gotcha! -- you found a slow app :)
Chrome
Firefox
Check how heavy the requests are.
Do that both in steps 1 (column 3 in Gtmetrix) and 2 (column named “size”). Check how heavy each request is.
Check for the zombie code. Many apps will install some code into your theme.liquid main theme file that you can remove. CAUTION -- be careful when editing your theme files -- you might want to ask your IT person to do it for you.
You can go to theme.liquid by clicking Online Store>Actions>Edit code
Then find “theme.liquid” at the top and search for any code elements with the uninstalled app name. Remove those.
What can you do once you have spotted a slow app?
This is rather simple.
- Uninstall the app.
- Check for the code that the app might have left behind. If you’re not comfortable with looking through your code ask your IT person to do it for you.
- Find a better-optimised app.
Conclusion
Be careful when installing apps. They may have very good ratings because they look and work well at first glance but they actually might be a real Trojan horse of your Shopify. Always make sure the app is making the smallest possible impact on your page load speeds because a slow Shopify makes your customers less likely to buy. I just hope that this article will help you optimize your Shopify even a little bit.
Fast Shopify => Better conversions => More money for you
It just makes sense. Happy optimizing!
Opinew Blog Newsletter
Join the newsletter to receive the latest updates in your inbox.