According to Google, every one-second delay in your site speed increases your bounce rate. This metric becomes even more critical for eCommerce sites.
Every lost visitor is a lost dollar. In fact, Amazon calculated that a one-second delay in their site speed would cause them a loss of $1.6 billion per year. Of course, you’re not racking up the same level of sales and revenues like Amazon, the eCommerce giant, which means each dollar is even more valuable to you.
With Shopify stores being fully hosted and managed, speed and security aren’t usually a major headache for a store owner – as opposed to self-hosted solutions like WooCommerce where a store owner has to stay on top of everything including speed, security and performance. Read the detailed analysis of Shopify vs WooCommerce to learn more about the difference between self-hosted and fully hosted sites.
However, you do have to keep an eye on your site’s speed and performance and make sure things are going smoothly. This is especially important during the holiday season or peak season like Black Friday.
1. Clean Up Broken Links
Think of a broken link as another HTTP request that’s impacting your site speed without offering any benefit to the user which is very important to resolve the broken issues immediately so that on page SEO will not effect.
Broken links not only sting your site speed but also hurt your SEO rankings. Use tools like Broken Link Checker to check for broken links for page elements like images, CSS, and JS files and clean them up on a regular basis.
2. Reduce Redirects
Your site’s speed and SEO rankings get affected when you have too many redirects on your site. This happens when you change your site’s structure or move to another domain name. Once you try to reduce redirect issues your SEO will enhance more and you will be getting more customer visits and customer will stay more to your site..
When handling redirects, most people use 302 redirects, which mean that the page has moved temporarily. While 302 redirects are easier to implement, they hurt SEO and site speed, triggering too many HTTP requests and delayed data transfers. 302 redirects are also confusing for the search engine as you’re telling the search engine to keep the old page indexed and ignore the new one.
Instead of 302 redirects, you should do 301 redirects, meaning your page has moved permanently.
3. Use Font Swapping With Web Fonts
Web fonts help make our sites beautiful and stunning – and they may just be necessary to create your brand personality.
However, web fonts tend to slow down your site because they may not necessarily be installed on your user’s browser. And so, when rendering the page, the browser will first install the font before the page loads. This is a major problem as you need to make the text visible as fast as possible so the user can see the product name and description.
When using web fonts, use the font swapping technique that makes a fallback font show up if your desired font isn’t supported by the user’s browser and then swap it when it’s downloaded and available.
4. Compress and Reduce Image File Size
On eCommerce sites, high-quality images are a big winner, especially if your products are all about the visual aspect like clothing and fashion.
However, the higher the quality of your images, the more time it takes for your page to load up. But what do you do when images are critical for your site and you can’t compromise on the quality?
Image compression is a fix for that problem that compresses your image file size without affecting the quality of your images.
Tools like TinyPNG can help you compress image file sizes before you upload them to your store.
Also, make sure you reduce the image size to the maximum size your website can display. There’s no reason to upload a 3000px image when your site can only show a maximum of 800px. Reducing the sizes will decrease the file size even further. Do it before you compress the file size on TinyPNG.
But if you already have a lot of images on your site, you can use some Shopify app for compressing images automatically which is the best option of shopify.
5. Think before Installing Another Shopify App
Shopify Apps are important when you’re trying to improve the user experience of your online store. You want to offer your customers interesting and useful functionality that will make them feel positive when using your site, increasing customer satisfaction, and loyalty.
However, keep in mind the downside of installing third-party apps on your Shopify store: they can hurt the speed and performance of your site.
A third-party Shopify app isn’t always well-optimized and can hurt your site’s performance. When installing another app, weigh the benefits vs. the downside and see if it really improves user experience on your store, increases conversions, and if it’s worth the impact on speed.
Sometimes, all an app does is give a quick, one-click solution to the site owner who doesn’t have any HTML, CSS, and JS skills. In that case, it is better to hire the help of a developer and get the problem resolved instead of installing an app.
In some cases, the functionality you need can also be installed with a little bit of coding here and there, directly in the theme. if a bunch of code solves your problem and gives you the solution you’re looking for, it’s better to go with it rather than install a bulky app.
6. Go Easy On Hero Slides
Hero slides make your store look pretty – but there’s a catch: you need really huge and high-quality images to make the hero slider look good. That’s a big problem if you have quite a few hero slides to display.
If you can – skip on the hero slider altogether! But if you really need those, have one high-quality image with a persuasive call-to-action that gets the message across without compromising on speed.
7. Weigh the Benefits of Quick View Popup
The most common pop-up store owners use is a Quick View lightbox that displays product information without the user opening the actual product page.
A problem with the Quick View feature is that it often pre-loads information from the product page in case a user clicks on the Quick View button. So, if you have 20 products displayed on the Shop page, your site will fetch and pre-load information about all those 20 products. This is a lot of data to load and it impacts the speed of your site.
There are a couple of solutions to the problem. One is to use click mapping tools and see if your customers are actually using it or not. If they’re not, you just need to disable the feature.
If you think Quick View improves your customer’s shopping experience, use AJAX to pull information from the product page once the user clicks on the Quick View button instead of pre-loading.
8. Optimize Your Site for Mobile
A Google study revealed that 79% of smartphone users used their mobile to make a purchase online in a period of six months. And do you know when that study was carried out? 2010!
Its ten years later now and the number would have shot up crazily. So mobile testing and mobile speed matter more.
So, when we talk about optimizing the speed of your Shopify store, we can’t ignore mobile performance.
The first thing you need to do is making sure your site looks good and performs well on mobile. Use Google Chrome’s Developer Tools to inspect how everything looks and works on mobile. You even get the option to select the device you want to test it on like iPhone X. Inspect and analyze your site and make sure everything works seamlessly.
If you find problem areas in the looks and performance of your mobile site, you’ll need to fix your Shopify theme or find another responsive theme that works well on mobile.
9. AMPify your Store Pages for Fast Mobile Speed
But what if everything looks good and works well on mobile but only at a snail’s pace? Remember how page speed affects bounce rate and conversions?
Luckily, the answer to slow pages on mobile is AMP, Accelerated Mobile Pages, which load fast on mobile. In fact, studies have shown that people read AMP content for longer as compared to standard web content. This means that if people are hanging around on your site for a longer time, they’re more likely to convert, and even buy more.
To create AMP pages, what you need is a great AMP app from the Shopify store like AMP by Shop Sheriff. The app will create AMP pages for you and you can just hit the publish button to make them go live.
It even gives you customization options so you have full control over the looks of your store pages.
10. Minify Your Theme Code
While there are a lot of things you can do to optimize the speed of your site, you need to realize that your store is actually made up of nothing but code. Everything gets stored as code and it’s the code files that are loaded. Minify the theme code files that are sometime CSS files and sometime Javascript files and Ajax, HTML files as well.
To improve page speed, what you can do is minify or compress those code files. Minification is basically the process of removing the unnecessary parts that don’t affect how your store looks and functions but affect the size of the file.
There are two ways to minify your theme code. You can either download an app like Plug-In Speed to do it automatically or you can minify your theme files yourself using tools like CSS Compressor and Javascript Minifier. Either way, it’s important that you know what you’re doing and you have created backups in case things go wrong.
If you’re doing it yourself, you need to look for .css and .js files in your Shopify Theme folder. Open the file, copy the code from there, and paste it into the Minifier tool.
Click “Compress” and voila, you have the newly minified code that you can replace with the old bulky code in the theme file.
11. Slim Down Your Site
The more page elements you have on your store, the bigger the page size would be, and the slower the page speed.
To improve the speed of your site, try to slim down your site by removing the unnecessary elements that just add extra bloat to your site without adding any value.
The first thing you need to do before you can slim down your site is to figure out and detect those bloaty elements. Heatmaps can be useful in this regard.
To generate heatmaps for your store, you can use an app like Order Heat Map or Hitstep Analytics. The heatmap you’ll generate will give you an idea about the page elements your customers interact with the most as well as the parts that are being ignored.
Use that data to trim down your site and remove the elements that don’t add any value to your site.
12. Use External Platforms to Host Large Video Files
High-quality videos on your product pages can enhance the shopping experience and do a good job of convincing the customer to buy.
However, high-quality videos can also be really bulky and can slow down your Shopify store. To fix the problem, it’s better to host large video files on external platforms like YouTube and Vimeo instead of hosting them on your site. This will reduce the burden on your site while still adding pretty video elements to your store.
It’s now time to fix your site and boost your speed up! Implement these quick fixes and improve your site performance to enjoy more conversions and more sales.
