How To Optimize Shopify Page Loading Speed In 5 Simple Steps
If you are a serious Shopify sellers and depends on your Shopify store for the living then there’s no way around improving your store's page loading time.
Why is page loading speed important for your Shopify store’s success?
Google loves pages with quick loading time:
It’s a well know fact that page speed is one of the most important factors for SEO. The basis of the SEO started with the keyword match which evolved into content relevancy. Then Google took one step further to add on page user experience as a factor for ranking and not to mention that quick loading time is a crucial part of a good user experience.
To reduce the bounce rate and boost conversion:
If you are experiencing high bounce rates for your Shopify store’s landing pages, then the slow page loading may be one of the reasons behind it.
According to a recent report by Google “As page load time goes from one second to five seconds, the probability of bounce increases by 90%.”
Let’s take a step by step approach to optimize the page loading speed.
Step 1: Optimize your Shopify store for mobile devices
Do you know how much of your traffic comes from the mobile devices? If you don’t know yet, just go to your Google Analytics and check the Audience > Mobile > Overview report and don’t be surprised if you see more than 50% of your traffic comes from mobile devices. This is the reason Google has come up with Mobile first-indexing strategy for ranking websites. According to this strategy, the Google’s algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site.
This is the reason you need to focus on your Shopify site’s performance on mobile devices now or you may lose it to your competitors.
Have an AMP version of your Shopify store pages:
AMP is another project of Google with which you can dramatically improve page loading speed on mobile devices. The basic idea of AMP is to serve the web pages in a standard format predefined by Google to reduce the page size and loading time.
Shopify doesn’t offer AMP version of the stores by default. This is a significant drawback of Shopify regarding SEO.
The easiest way to get AMP version of your store is using a Shopify app like RocketAmp. This app will create an AMP version of your product pages and will submit to Google so that your pages rank on Google search.
Though this is a quick and easy solution, there is one drawback. Once your AMP pages get indexed on Google, you become dependent on the app's service. If you stop using the app, the indexed links will start giving 404 errors..
Step 2: Identify the factors affecting your page loading speed
To optimize your store, first you need to check the current page speed score of your Shopify store pages and note the scores in an Excel sheet so that you can compare before and after optimization.
Now to check the scores, first identify the store pages where most (more than 90%) of your visitors land. You will easily find the data in your Google Analytics’ Behavior >Site Content > Landing Pages report as shown below.
For most of the Shopify stores, it will be the home page and collection pages where most of the visitors land. Identify these landing pages for your store and put their URLs on an Excel sheet.
This will help you focus only on the important pages of your store.
Once you have the list of the pages, start testing with the Google Page Speed Insight tool.
For each of the URL of your landing pages, you will get the Page Speed scores for the desktop as well as for mobile devices as shown below:
As marked in the screenshot above, the Pagespeed score for the mobile device is 62. Similarly, check the Desktop tab for the Pagespeed score on Desktop.
Now you need to put these scores on your Excel sheet as shown below. This will help you to use these scores as the reference when you test the scores again after optimization.
Not only the scores, Google Pagespeed tools also points out possible areas of improvements.
There are many other tools to analyze page speed factors but one of our favourites is GTmetrix. This tool shows you the factors affecting your page speed along with their priority and your score.
Once you put an URL in GTmetrix and analyze, you get a result page similar to this:
The factors with least score and highest priorities will be on the top. These are the factors you need to focus on.
Now, you don’t have control on all of these factors as Shopify is a hosted solution and you don’t have access to the servers and all the codes. There are few things you can take care of yourself and for others, you need professional help until you are a seasoned developer.
Here are the low hanging fruits you should try first:
Step 3: Optimize the images of your Shopify store
Use compressed images:
Images are the most important content for any e-commerce store. There is no way you can compromise with the quality of the images but you also need to limit the sizes of the pages.
To reduce the image sizes without affecting the quality, you need to use lossless compression. It’s always good to compress the images before uploading. There are many tools like JPEGmini or Kraken.io which you can use to compress the images before uploading to your store.
But don’t worry if you already have too many images uploaded. There are many Shopify apps for image compression which you can use to compress the images of your Shopify store.
Serve scaled images:
The size of the images depends on two things, the dimension and the quality of the image. That’s why you should always use images of the exact dimension needed for the page. For example: If your home page’s banner dimension is 1500 x 500 px then use this dimension only, not bigger than that.
For product images, Shopify suggests using 2048 x 2048 px images so that the quality of the images doesn’t get compromised if you are using image zoom feature. But it can significantly increase the memory sizes of the images and may drastically slow down your website when you use multiple such images on a page. Until you don’t need to a pixel perfect images to show up every minute detail, 800 x 800px images will do just fine on your product page
Also, wherever you can, especially on the Home page and on your collection pages, reduce the no. of images.
Step 4: Optimize the use of Shopify apps
When you are running your store on Shopify, there is no way you can go without using third-party apps. But, many of the apps run scripts on your pages which reduces the page loading speed. Here are few measures you can take to minimize the effects on apps.
- Delete all the apps you are not using.
- There may be few apps which you are using but can do just fine without those apps. Test the page speed with or without these apps installed to measure how they are affecting the page speed.
- You may be using some apps which add new elements to your store pages. Try to restrict those elements to only the pages where you actually need them. For instance, maybe you are using some floating trust badges throughout your store, while you only need them on your product pages.
Step 5: Seek professional help
Till now we have discussed the things you can manage to do yourself. But there are few page issues which you can’t fix until you are a seasoned Shopify developer.
Here are the few things for which you may need professional help:
The page loading optimization is a continuous process. You need to regularly check the pages speed scores and note them to keep track of your page's performance. Get your hands dirty with the low hanging fruits first and then focus on other issues. If you need any professional help, hire the highest rated Shopify theme experts.