Shopify speed optimization step by step guide

Do you want to achieve your site score is 90+ and load time less than 4 sec.
This article helps you to achieve the desired speed for your shopify store. Step by step instructions are given in this article so by applying these steps you can improve the site speed.

1. Quickread

One of the most important facts about ecommerce sites is ‘Speed’. If your site loads faster, then customers want to stay at your site for a long time that creates a smooth and easy shopping experience. At the other end, your site is ‘slow’ then customers prefer to buy from another website and in such case your site bounce rate will be increased and conversion rate will be decreased automatically. It affects your business profit margins and results in low traffic on your website.
So it’s very important to speed up your shopify site.
  • To increase traffic at your website.
  • To gain a customer preference to buy from your site only.
  • Increase in conversion rate.
Once you focus on the speed optimization of your site then it will add more benefits to your business.

2. Why speed optimization is needed?

Speed Matters!! There are many reasons for that we have to achieve site speeds.
User experience is a very important factor in any business. If your site speed is low and once users get a bad experience then there are big chances those customers will never come to your site again. So to make a good customer experience and to retain customers at your store Optimization is important.
As per standard defined criteria about speed load time of a website should not be more than 3 seconds. Anything longer than that, results in customers’ negative experience.
There are some tools where you can check your site speed and make a decision for site speed optimization.
  • GT Metrix
  • Google Page Speed
  • Pingdom
Using these tools you can check the current speed of your site and you can also see the recommendation report of your site for speed optimization.

3. Factors that affects website speed

There are some factors that affect the website speed. Some of the most common factors are given below:

Image or file Sizes

The use of heavy images on your website takes more time to load and increases in the number of requests.

Server/Hosting

It’s also a major factor that affects website speed. So as per your website requirement store owners should choose the hosting service. If there aren’t enough resources on the server, it will slow things down for everyone.

Use of more Shopify Apps

If you use more apps into your stores it will affect website speed. Each app in the repository has different functions and features. The apps load more js queries, increase the number of requests to load will slow down your load time.

More server requests

If more server requests are there then it will affect the site speed.

Step by step user guide to optimize your Shopify site

Below are given step by step instructions to optimize your website. Opportunities will vary from site to site.

Step 1. Shopify Image Optimization

Higher resolution images have larger file sizes and that can negatively impact the site speed. Generally it takes time to load the speed on mobile devices.
Using the below steps you can optimize images.

1.1 Serve scaled images

Scaled images useful to resize images and display size as close as possible to original size of the image. It is necessary to pay attention to image sizes and use perfect size images on your website.
For example, your website banner size is 1440 x 400 pixel and during display on the website the image size is using 2000 x 900 pixel. As a result, the browser has to download and scale the picture down before displaying it to the visitors. This process can slow down your website loading time.
However, this issue will not happen if you use scaled images. Smaller images use less space and speed up your site, which in return will improve your site’s SEO and ranking.

1.2 Lazy Loading

When a user opens the webpage, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load.
So instead of loading all of the images at one time, images can be loaded when the user accesses a part of the page that requires it.
With lazy loading, we can load on screen images first and on scrolling of pages load remaining images so that we can reduce the site load and make it fast.
For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.

1.3 Use of picture tags

Using a picture tag you can load the multiple images of different sizes and resolutions, which can be best fit for different viewports, so instead of loading a single image, the picture tag is useful to load multiple images as per viewport sizes. So it will help to reduce the size of images and helps to achieve speed of the site.

1.4 Optimize images

If you are using higher resolution images then this will negatively impact on website speed, specially when users access your website on mobile devices. Solution for this to optimize images. There are online tools available to optimize images or you can use Photoshop to optimize images.

1.5 Sprite Image

Instead of using a seperate images icons on header like social icons, mini cart icon, my account icon, search icon. You can use the sprite image and add all these icons in a single image and use that.

Step 2: Minimize redirect

One of the factors of site speed performance issues occur due to too many redirects on your site. There are in-built redirects function in Shopify, called “URL redirect” you can apply 301 redirects and minimize redirects.
  1. From your shopify Admin, go to Online Stores->Navigation
  2. Then click on URL Redirects.
  3. Click on Add a Redirect URL to create new redirect URL

Why is Redirect needed?

  • To indicate the new location of a resource that has moved.
  • To track clicks and impressions and log referring pages.

Step 3: Reduce number of requests

To load your site faster you need to pay attention to your site’s requests. If there are more requests then this will slow down your site. Using Gtmetrix you can check the number of requests generated on your website pages.
This tool also provides an opportunity to fix the website speed related issues. Once you are done with all the opportunity points it will help to improve the site score and reduce the requests.

Step 4: Remove unnecessary shopify apps

If any app is not in use or inactive then remove these apps from the site. It will help to minimize the requests and boost site speed. Because apps can add a lot of js or css and because of these pages weights are more and it slows down the website.

Step 5: Defer parsing of Javascript

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.
When we specify “defer” while calling a js file then the browser will not wait for this file to render and this will help reduce “first meaningful paint” as the js file was not holding rendering.
Async and Defer are two ways to defer a JS file.

Step 6: Minify js

Minify js allows you to merge all js files to one file. Doing this step you can to reduce the size of js files and it resulted into reducing the js requests.
Some online tools are available to minify JavaScript
  • JSCompress
  • JavaScript-Minifier
  • Minifier
  • MinifyCode

Step 7: Leverage browser caching

This is also an important step for a page speed, using browser caching mechanism you can improve the site load time. Leverage browser caching helps to download data faster. When visitors access the site in future it will display data from the browser caching and reduce the load time of your site. In Browser caching you can specify how long a web browser should keep images, css, js stored locally so that once a user access site is future this data can download faster.

Step 8: Eliminate render blocking resources

You can eliminate render blocking by moving critical code out of head.
In most of the cases it has been found that js and css are included in Head code.
If there is no defer associated with these includes then that code will block rendering.
This should be avoided if “defer” was not needed or reduced to the highest possible extent.
Also on times there are Java script lines embedded in head this again will do the render blocking if these are getting executed.

Step 9: Reduce the http requests

When a visitor loads your web page in their browser all files are loaded like, css, js, images, etc. Such a file is requested and it creates an additional request for the browser to process. All these requests are considered as HTTP requests. If there are more requests then the browser stops responding, as it has to wait for the unprocessed files to load until it’s done with loading the previous files, creating a load delay. So during speed optimization you may pay attention to reduce the http requests.
You can use below tools to check the http requests of your website:
These tools will help to check how many requests your web pages make. You can also see which type of requests your web pages make (images, css files, etc..)
Refer to this article for a step by step process for shopify speed optimization.

For Further Details or Additional Information

OR

If you want to know more about our Services