.jpg)
Sep 19, 2020
You don’t need to be a web developer. To improve your loading speed, reduce the amount of apps you use, compress your images, learn the difference between png and jpg, keep the design simple, and avoid creating huge collections with many filters.
On average, every second of loading time means a 7% reduction in conversions.
That means that if your store is making $10,000 a month, and your site slows down by just one second. You’re losing $700 of revenue each month.
Many studies have been done on the importance of page speed. Top SEO blogs such as Moz, Neil Patel, and Google themselves have all published their findings.
I’ll summarize it briefly:
Google sees speed as a major ranking factor, and every year they are getting more strict, now encouraging websites to use their AMP (Accelerated Mobile Pages) technology or else they will never get a full score in PageSpeed Insights.
The message is clear, make your website fast and mobile-friendly, or your Google ranking is likely to fall.
According to 2018 research by Google, 53% of mobile users leave a site that takes longer than three seconds to load. The ones that stay are the patient ones, but don’t test their patience forever!
You want to make it enjoyable to browse on your website.
By removing barriers and making the shopping experience more enjoyable, more people will get to the checkout. In the end, it all comes down to the phrase we all know — time is money.
A fast store is a profitable one. You can even calculate how much more money you would make with a faster site by using an ROI Calculator.
There are plenty of tips about how developers can speed up a Shopify store. However, this isn’t easy for store owners and non-tech people to do themselves.
Today I will tell you what YOU can do to speed up your store, without any complex code changes.
The problem with apps is that they bring a lot of extra unnecessary code to your store.
Think about it like this, you buy some new furniture for your home. It makes your life easier in some ways, but it also takes up space and your home is sometimes more cluttered because of it.
Apps have their own ‘dependencies’ — that is, third-party scripts that they need in order to run and do their job. All of this combined can really impact your loading speed.
But don’t get me wrong, not all apps are bad. If an app just helps with the admin side of Shopify, like for inventory or email marketing — that is fine!
An app will slow down your store only if it’s an app that the customer sees, for example:
If you’re interested in which apps I recommend, check out our recommended apps and tools for Shopify.
Good Shopify themes will make sure to load your images in the correct sizes depending on the display, however, they can’t compress the images themselves, all they do is resize them. It’s up to you to upload images that are already compressed or optimized for the web. And if you’re uploading images straight from your photographer, it’s likely they are high quality and very heavy.
Product images shouldn’t weigh more than about 200kb.
The easiest way to compress hundreds of images on your Shopify store is using an app called Crush Pics.
It will go through your entire store and compress all your images, and it can automatically continue to compress new images for new products that you upload.
If you don’t have lots of images, you can do it manually one-by-one, using Squoosh.app. All you do is upload your image, and choose what level of quality is acceptable for you. I usually leave the default (75).
Both Squoosh and Crush Pics can often make an image weight two times less, with no visible difference in the quality.
Just make sure you’re not accidentally uploading any images weighing a whole 1mb. This can happen sometimes, especially if you incorrectly save a photograph as a png…
This gets it’s own point just because it’s such a common mistake. I’ve already written a short article about it, so if you don’t know the difference between PNG and JPG and when to use each, I recommend reading that article:
This common mistake ruins your loading speed. PNG or JPG images.
To summarize it quickly. PNG’s are for computer graphics, and JPG is for photography.
Image compression tools won’t help much if you are uploading huge photographs saved as PNG’s.
A simple example is background video. If you’re using one then obviously you are loading a large file to the webpage. You just need to decide if that is worth it for you.
Here are a few other design choices that can impact your landing page speed.
Most modern themes will use lazy-loading. This is a technique where images further down the page won’t start loading until the customer starts scrolling down.
However, things that are ‘above the fold’, or above the scrolling point, will still load right away and affect your loading time, so you should pay extra attention to what is on this part of the page.
Another thing I want to address is the use of animations. This isn’t exactly related to loading speed, but it does affect the user experience and conversion rates.
Some themes have lot’s of fancy animations right out of the box, and this can seem cool and modern with everything smoothly floating around.
But the entire experience is ruined when it lags. And that can happen when someone is using an older computer. Remember that function is the most important thing. You want your users to buy from your site! Keep the focus on your products, and not the website itself.
If you have a large store with close to 1000 products or more, then having really large collections can slow down your store on some themes.
You will notice this if your home page seems to load ok, but your collection pages are super-slow. You also might be seeing a spinner for a long time whenever you try to filter by tags.
This is one of the most annoying and hard to fix issues because it’s different from everything I discussed above.
Normally when we talk about loading speed we are focused on the ‘client-side’ — or how quickly a visitor can download your website files like images and scripts.
Large collections and filters can cause slow speeds on the ‘server side’. Meaning that Shopify servers take a long time to process your site and spit out the correct products to show on the page.
This happens if you are using lots of tag filters on a collection page. Because inside the theme code, Shopify needs to read all the tags for each product, and match them with the tags on the collection page filters.
This means looping through hundreds of products and hundreds of tags, which can add up to 10+ seconds of thinking time on the server before sending your page to the clients computer.
If you are testing your Shopify store in various speed tools, then you will see this in the ‘wait time’ or TTFB (Time to First Byte).
Excuse the rant, the point is if you have a huge inventory, then try to keep collections small, don’t use a ‘Shop All’ page, and try to minimize the amount of filters.
Speed optimization can be pretty simple. Just get the basics right and your loading speed shouldn’t be terrible. Here’s a quick recap:
If you need help with anything, feel free to reach out to us.
.jpg)
Have any questions?