Back
How To Optimize Shopify Page Loading Speed In 5 Simple Steps

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.

Table of Contents:

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.

Possible Optimizations suggested by Google PageSpeed insight tool.

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:

i) To eliminate render-blocking JavaScript and CSS in above the fold content: This is one common issue found in any JavaScript/CSS heavy website. These JavaScripts and CSS codes can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait longer to see the page. These scripts and stylesheets are referred to as render-blocking JavaScript and CSS. The fix for this is to load the scripts priority wise.

ii) To minify HTML and JavaScript: Every website loads a lot of files containing HTML, CSS, and JavaScripts. And most of the files include a lot of space, comments, Block delimiters etc. So, significantly it takes extra times to load properly. Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up the loading of the pages. This is also one thing for which you will need professional help.

To conclude:

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.

Read more articles