How To Improve Your Site Speed
Have you clicked on the 'Online Store' tab on your Shopify Admin panel recently? Chances are that you have seen the new feature that Shopify released last year, the 'Online Store Speed' and after seeing the number you probably had a mini heart attack thinking that your website is too slow and that you are losing customers because of it!
First of all, slow down. This is why we are here to help you, this guide will explain about this new tool, and how we should use it, and then show you things that you can do to increase your websites load speed.
So, why does it even matter? Research has shown that if your website is slow to load, then the customer is more than likely going to abandon their efforts to go onto your website and do something else. This time can be as low as 3-5 seconds.
But there one thing to note:
Shopify websites are generally incredibly quick to load because of the high-quality servers that they use. The score that is shown on your admin panel is a score of yours relative to other Shopify stores, this means that even if you have a lower score you are probably still faster than most other websites out there.
So what to look for, If you score more than 50, well done, there is probably very little that you need to do, scoring between 20-30, this is nothing to worry about, there are some things that you can do to improve your website, but it is nothing worth stressing about. Below 20, There are probably some large issues that are slowing your website down, and these issues will be affecting the way that your customers are experiencing your store, and thus impacting your sales.
So what can you do?
Don't go overboard on your apps
Whenever someone opens a website, the data for that page is sent over to the customers' website - A little bit like sending a letter - but the more apps that you install the larger the letter gets, and if you’re not careful you'll be sending over a huge parcel instead!
There are two questions that you should ask yourself before installing an app
- Do I really need this app, or is there another way to achieve the same functionality?
- Is this app well written and developed, What are the reviews, documentation and supporting information like?
- There is a big difference between a well-written highly optimised app and one that has been quickly developed and put up on the app store. One will do the job in as quick and efficient a way as possible, the other will more than likely contain a lot of unnecessary code and perform tasks in a less than optimal way.
Another thing to note is that by just deleting the app from the app manager on your admin panel, you will not be deleting the code that is on your website, by deleting the app you will be deactivating it. So if you choose not to use the app any more, go into the app and see if they have an uninstallation process, if not, then you will need to go into the code and remove it manually, which you should only do if you are comfortable reading and writing code. If not get in contact with a Shopify developer (ahem - US) and they can do that for you.
Optimise your images
Every image that you have on your website has to be sent over the internet to the customer, so the more images you have the more data has to be sent. But, it's not necessarily the number of images that you have, rather the size of these images. If you aren't careful the file size of one image can soar, meaning the amount of data that needs to be sent increases fast, resulting in slower load speeds.
How do we combat this? There are a few ways, but here are the main few:
Three of the main formats are JPEG, PNG and SVG. Remembering which is which can get confusing though, so here is a quick explanation and some examples of when to use them. SVG's are vector-based, used for flat line drawings, icons, and logos that will scale to any size while the file size remains small. PNG's are lossless and raster-based, used for images that need crisp lines or text (but do not need to scale), and for images that need transparency and have few colours. JPEG's are lossy and raster-based, used for photos and images with lots of colours where crisp lines aren’t essential, and transparency is not needed.
Choosing the wrong image format could result in the size of the files being much larger than they need to be. So make sure you choose the correct image format.
The biggest reason for image files being too large is that you are uploading images that are too big for the context where they are being used. While some platforms handle re-sizing for you, it is always best to upload an image that is only a few hundred pixels larger than what you need it for, this way the image will never lose quality and become grainy, and the file size will be a lot smaller than the original file.
A small rule of thumb is that a hero image never really needs to be larger than 1600px wide, and a product image 800px. The size of the image will depend on where you are using it, and there are tools available to help you find out the size required.
Image files also come with a lot of data that is not seen, this data is called Metadata. While this information is useful for your computer to tell you where and when the photograph was taken, you don't need this information on your website. Luckily several websites will automatically remove all unnecessary data from the photograph. Just Google "Image optimiser" and upload your photos, and they will return images that are as small a file size as possible.
Slideshows - You don’t need them
Research has time and again shown that users do NOT use slideshows, the number can be as low as 1% (source) So what does that mean... GET RID OF THEM.
Including a slideshow, means that Shopify will need to send over multiple large images to the user, which increases the file size, for something that is highly likely never going to be seen.
If you do want to include a slideshow on your website, try limiting the number of slides to only 2 or 3, to reduce the payload of your website.
Lazy Loading and Asynchronous loading
This is a little more technical so if you cannot comfortably read and write code then it will be best to consult a Shopify partner on looking into this for you.
When you load a page, the browser goes through each line of code and will download it and render it to what you see on your device. The problem is that when it comes to a large file, perhaps an un-optimised image or a script for an app, it will load that before moving onto the next thing. Which if you have multiple large files and scripts, can eat up time.
Fortunately, some things can be put in place to mitigate this. For example, you can set up lazy loading on your images, so they are only loaded once the user scrolls down to the section on the page, meaning that the initial load is much much faster.
Secondly, you can make it so the scripts that are loaded are done so asynchronously, which tells the computer to load this file, but while you are doing so continue to move on and load the next items at the same time. meaning that there is not such a slowdown. Or if you do not need the code upon loading you can also tell the computer to defer loading until the browser has finished loading everything else.
So in conclusion,
Don't panic when you see a low score, it may not be as bad as it makes it seem!
Minimise the number of apps that you download onto your store, and make sure they are reputable and high-quality apps
Optimise optimise optimise your images!
Make sure the code for your theme is loading correctly