Speed of your online store plays a big role in generating revenue. A slow site not only negatively impacts reputation of your brand but also dampens conversion rate. E-commerce shoppers don’t want to shop on slow sites. Even if they are loyal customers, they won’t wait much before hopping onto another store.
According to a study by Digital.com, 53 percent shoppers expect e-commerce stores to load completely within three seconds. 79 percent shoppers said that they are not willing to return to the site if they weren’t happy with its speed, as per a blog published by Neil Patel. So, what can Shopify store owners do to improve speed of their site? Well, there are certain measures which can be taken to improve the speed but before that merchants need to understand factors affecting the speed. There are factors which can be controlled and those which can’t.
FACTORS NOT UNDER CONTROL
- Customer’s Network, Device, Location
Online shoppers visit your store via different devices and internet connectivity. This simply means that your Shopify store’s speed might vary as per their internet connections. Hence, if a customer reaches out to you regarding slow loading of the store, enquire if they are using the latest version of browser, cleared their cache and if there is any issue from their internet service provider.
- Shopify Infrastructure
Shopify store is hosted on fast and global servers. The e-commerce giant doesn’t limit the bandwidth of your store. The status of Shopify store can be checked on Shopify status. Meanwhile, the company is constantly working to improve its code and infrastructure. Some features that impact online store’s speed are listed below: - Content Delivery Network (CDN)– Shopify provides content delivery network run by Fastly. This makes sure that the store loads quickly anywhere across the world. CDN status can be checked on Fastly status page.
- Local Browser Cache– Online store saves or caches few elements on local storage of customer for temporary basis. When customer returns to your store, the browser load resources from cache instead of again sending request to the server. Shopify sets browser caching in your online store for a year for each file. PDFs, JS files, CSS files and image files can be cached.
- Server-Side Page Cache– Besides local browser caching, Shopify also caches pages on server side. Page might be slower to load for the first time but later the speed is faster as customers are getting a cached copy.
- Liquid Tag– Liquid tag usually injects assets used by store features such as performance analytics and dynamic checkout buttons. Loading the tag and related asset can impact store’s speed. Shopify is working on optimising the tag and its assets.
Below we have mentioned factors that can affect your Shopify store’s speed and how you can fix them:
FACTORS UNDER CONTROL
- Apps
When apps are added to improve the appearance or function of Shopify store, they add code into theme to operate. If the app is no more in use, it is better to remove it. In case an app is hampering your store’s speed, consider taking following measures.
A. Merchants can disable app feature if the app is not being used.
B. Simply removing the app is not enough. It is better to remove the code as well. Few apps wrap their code in {% comment %} tags that mention app name. Store owners can remove unused app code. This will make theme code easier to read.
C. Reach out to app developer.
- Themes
Themes are developed with HTML, Liquid, JavaScript code and CSS. When a merchant customise or edit themes, file size can possibly increase affecting the store’s speed. If you think that the slow speed is due to issues in theme, then you can take following measures:
A. Considering the balance between your store features and speed, disable theme features which are not in use
B. You can use a system font
C. In case you are using free Shopify theme, Shopify support can assist you with basic performance improvements.
D. If you are using a third-party theme, then you can hire a Shopify Expert and get in touch with your theme developer.
E. You can install a theme that’s optimised for performance, like Dawn.
- Theme Or App Features
Some features, if enabled, can impact store speed. For example, there are some quick view pop-ups that pre-load information from each product page when a collection page loads. Consuming time to load extra data that are of no use to your customers can impact speed of your Shopify store without any value addition. If you think a particular feature is marring the store speed, following suggestions might help you:
A. Take the help of a heatmap tool to check if certain features are being used by customers. If not, they disable them
B. Disable features if you no longer use them.
C. Contact your app and theme developers and enquire if they are preloading data.
- Complex Or Inefficient Liquid Code
All Liquid used to render the Shopify store can be edited. There are both efficient and inefficient manner of writing Liquid code. Repeated complex operation increases Liquid render time, thus impacting store’s overall speed. Consider for example, if you are looking to order products in a collection by price, do that before you loop through products in collection and not as loop code’s part. Order of products doesn’t change for each and every product and calculation of order of the products adds the processing time to the request. In case your code isn’t optimised, you can take the help of Shopify Theme Inspector or Shopify Expert to help you identify useless code.
- Images And Videos
If you are using oversized images or there are images which are hidden from view, there is a possibility that your page might load slow. If customers have to wait for large images to fully load, they can well perceive that your online store is slow and can opt for other stores. Shopify helps merchants by adding certain safeguards to prevent them from overloading a page with videos and images. However, these safeguards are not fully effective. What are these safeguards? Let’s know:
A. There is a limitation of 50 products on the collection page or 25 sections on home page.
B. Several themes defer loading of images that are currently not onscreen.
C. A lot of themes load a particular image size based on screen size it is displayed on.
Still if you think that your Shopify store is slow due to the images, then you can consider taking the following measures:
A. Review the guide on image optimization.
B. Use only one featured image or limit the slideshows of featured images to 2-3.
C. Take help of your theme developer and seek their advice on how images can be used in the best way with their themes.
- Fonts
Text on your Shopify store can also impact the speed. There are plenty of font options out of which you can select the best which suits the tone and feel of your online store. However, if you use a font that’s not on your customer’s device, then they need to download the font before text gets displayed. To help your customer from downloading new font on their device, use system font. For unversed, system font is a font that’s already installed on most devices. You can pick font from mono, serif or sans-serif family. You can use styles such as bold or italic when you select any from the below-mentioned font families. Some examples are listed below:
Mono: Monaco, Consolas, Lucida Console, Menlo or Liberation Mono
Sans-serif: Segoe UI, Ubuntu, BlinkMacSystemFont, Roboto or Helvetica Neue
Serif: Apple Garamond, Droid Serif, Source Serif Pro, Iowan Old Style, Baskerville, Times New Roman ot Times
Merchants also need to know that font displayed on shopper’s computer depends on their operating system.
TROUBLESHOOTING TOOLS
Lighthouse and Shopify Theme Inspector can be used to check Shopify store’s speed. Let’s know more about them.
- Lighthouse– Online store speed report of Shopify uses Lighthouse to measure store’s speed. Merchants can run their own Lighthouse report with the help of Google PageSpeed Insights. This will help them to check more details metrics for pages. To understand about metrics, you can either refer to Google Lighthouse performance scoring documentation or hire a Shopify Expert.
- Shopify Theme Inspector for Chrome-Shopify Theme Inspector for Chrome helps merchants to identify lines of codes that degrades speed of pages in online store. It is a profiling tool to display Liquid render performance using a flame graph.
If above tips are not able to offer much help, you can contact Shopify support or Shopify Expert. In case you have agency partner or development team, then contact them for further assistance.
