A Step By Step Guide On Shopify Speed Optimization

Introduction

There are so many superheroes that exist today, but Flash from DC comics is one of the favourites that people love over and above the prime superheroes.
But do you know what is the main reason behind it? Is Flash more powerful than Superman or more intelligent than Batman? No!

The reason why people love Flash is that he has got the power to travel anywhere with lighting speed!

We all love speed, isn’t it? It can be either you want to download videos over a high-speed internet or want to travel somewhere so you prefer one of the fastest modes of transportation and choose to travel by plane even if it is expensive.

As knowing the fact that “Time Is Money!”

Considering the same fact when we talk about the loading speed of any website, it can have a direct effect on the conversion of the traffic of the people visiting your website.

An article by Neil Patel revealed stats that says How Loading Time Affects Your Bottom Line could result in a 7% reduction in conversions, while a 1-second delay on a website generating $100,000 per day could cost you $2.5 million every year!

We will present some easy tips and tricks to optimize your Shopify website speed which will help you keep up with the expectations of the impatient online users.

But how can you know whether the process of speed optimization is for you or not?

Well, for an instance, what you can do is check the speed of your website with the help of Impact Calculator. This is a useful tool that not only allows you to compare your mobile speed with other companies but also with just a few inputs the tool estimates the revenue impact that could result from improving the speed of your mobile site.

So with the help of the Impact Calculator, make a quick test to determine whether or not you should go ahead with speed optimization.

Are you done?

Hope you will be shocked to see the results that the Impact Calculator gave you. So do you still need a reason to get started with the speed optimization process? Well, we guess you don’t!

Therefore, we recommend you read this entire article because it is in the form of a comprehensive guide, where we will explain each step in detail.

the best part about this guide is that even if you aren’t tech-savvy you will be able to accomplish the process.

So without wasting time, let us get started!

Here at the beginning first we will try to understand what shopify speed optimization is all about.

What Is Shopify Speed Optimization?

Shopify Speed optimization is nothing but a process where we are optimizing our Shopify sites in order to increase the page speed of our Shopify sites which results in increased conversions, generating higher traffic resulting in higher revenues, and also ranking higher at the top Google Search results.

EXPLORE OUR SHOPIFY SPEED OPTIMIZATION SERVICE

Hire Us Now

Talk to our Expert

Name *

Email *

Phone *

Website / URL *

Message *

Submit

x

How Can I Optimise My Shopify Site?

Before you begin with the speed optimization process, you need to understand that there are certain factors that are in your control while there are some which cannot be controlled and for that you will have to look at the table below:

(Source: Shopify)

To know more about the factors in detail check the article by Shopify where they have mentioned everything in detail. Let us go further with the speed optimization process.

The process of Shopify speed optimization consists of 3 important stages which are:

1. Create Backup
2. Check The Speed
3. Follow Steps To Optimization Shopify Site Speed

1. Create A Backup

   The very first step of speed optimization is to create a backup of your files. Since your data is important and cannot afford to lose it, you will have to store it. For that shown below is how one can back up their files:

   1. First hover over the action and click duplicate:
      
   2. Once you click on the duplicate it will show below the list of all other themes:
      
   3. Create two backup files of the theme and give different names to both of them:
      
   4. Apply optimization to either of the two backups if any issue arises, either backup can be checked. This will prevent the live theme from being affected.

2. Check The Speed Of Your Site

   1. GT Metrix

      GTmetrix is a website speed check tool that allows you to see how fast your website loads. This tool will help you check the speed of your Shopify site.

   2. Google Page Insights

      Another great way to test the speed of your site is using Google Page Insights. It is a free tool that helps you identify and resolve issues slowing down your Shopify site. It’s easy to get your hands on this tool by following an easygoing process.

   3. Through Shopify Itself

      While the above two mentioned tools are helpful enough to test the speed of your Shopify website, Shopify itself provides you with the in-built tool that can be accessed through your admin.

3. Shopify Speed Optimization

   After creating a backup of your data it’s now that you go for site optimization. This can be done by solving errors like broken links, fixing issues with the redirect pages, optimizing images, and performing many more activities.

   But before you go further with checking errors you need to understand other technical aspects which are “Core Web Vitals” to get better with the speed optimization process to speed up the Shopify store. Let us understand this in detail.

Core Web Vitals

The Core Web Vitals are a set of specific factors that Google believes play a key role in determining the user experience of a website. Core Web Vitals consist of three metrics pertaining to Shopify page speed and user interaction: LCP (Largest Contentful Paint), FLD (First Input Delay), and CLS (Cumulative Layout Shift).

1. Largest Contentful Paint

   The Largest Contentful Paint (LCP) is the largest content your Shopify page has, which certainly can be a video, article or any image files on your site. It is said that it should take around two seconds or less for your LCP to fully load. Ensure that lazy loading is not applied to LCP as this can affect the page loading time and speed as it would allow your page to load in LCP, which takes a while.
2. First Input Delay

   The First Input Delay (FID) measures responsiveness and interactivity are very important for your website. Usually, the FID of the site should be 100 milliseconds or lesser for optimal user experience. You can improve your FID by removing other scripts that are not necessary or by using a browser cache to make your response time faster.
3. Cumulative Layout Shift

   Cumulative Layout Shift (CLS) measures the stability of every element of your website. It prevents your viewers from clicking the wrong button on your site and ensures functions don’t move while the page is loading. In order to provide a good user experience, pages should have CLS values of 0.1 or less. It is advised to assign enough space to each element would avoid interruptions with other elements.

   Now we will go further with the site optimization process and fix errors.

Clean Up Theme

Cleaning the theme can help you remove unnecessary stuff from your websites like broken links or any other errors, resulting in eventually speeding up your Shopify website. Below are some of the mentioned ways through which you clean up your theme:

1. Fix Broken Links

   Broken links are usually the links to web pages that can’t be found or accessed by a user, for various reasons. Most of the time when a user is buying something online and finds the 404 error, he would usually not like to go further with the site. So it becomes crucial to solving this as this may keep driving customers away and it may result in a loss of your revenue.

How To Fix Them?

Follow the below-given steps to fix the broken links:

1. Go to https://www.brokenlinkcheck.com website and add the URL of your website there as shown in the below image:
   
2. After that, you will have to add security code as shown in the below image:
   
3. The below image will guide on how to find the broken link:
   
4. Later you will get a list of broken links that are present on your website you have to simply click on the “URL” as it will take you to the section where there is the broken link, you have to just navigate the text given in the parallel column of the “link text” by searching it on the website.
5. After finding the broken links, you can either remove them or fix them by replacing them with the new update link.

Remove Unused Js & CSS

Try removing Unused Js and CSS by checking the coverage section in the console and for that, you have to follow the below process

1. Open browser’s console -> click esc button :
   
2. After the reload you will find the list of js and CSS usage and you can also check for only CSS and js:
   
3. In some of the cases you will find that the js or CSS is not used on that specific page which will show 100% unused in the unused bytes column and in the usage visualization column you will find the line is completely Red:
   
4. If you find something like this first of all makes sure it’s not used elsewhere before completely removing it or you can make a page, collection or index conditional statement using if-else to load the JS or CSS.

Remove Unused App Codes

Oftentimes the apps’ unused codes usually slow the loading speed of your Shopify site, so it’s better to remove them in order which results in increasing the speed of the site. Here you will have to manually delete the app codes with the help of a developer. Below is the way how you can remove the unused app codes:

1. For example, As you can see we don’t have page fly app here in the store app list:
   
2. But as you can see there are many files and codes in the store that are related to it:
   
3. You can also try searching on the search bar as shown below in the image:
   
4. Open each app’s file and delete it, then look for the app code in theme.liquid, collection, index, product, and cart pages and delete those files.

Remove Unnecessary Installed Apps

Do you keep the trash inside your home, are you going to dispose of it?

Obviously, you are gonna dispose of it!

Here it may happen that you must have installed too many apps that are not of much use to you and this affects the loading speed of your website, so here you have to remove the number of apps installed just the same way you remove unnecessary apps and data from your smartphone.

To minimize the number of apps installed, you should also remove apps and plugins that are no longer in use and keep only those you need.

Minification of Js & CSS & HTML

Minification is the process of eliminating all unnecessary characters from JavaScript source code without altering its functionality. This includes removing whitespace, comments, and semicolons, along with using shorter variable names and functions. Here the process of minification is overall a technical process, so here you will need help from a developer with the process of minification. For instance, you can hire a Shopify developer, who will assist you in the same. The below image will give you an idea of how minification works.

1. Minify Js but firstly you will have to check if there are any liquid tags or codes in it.
2. Here if there are liquid codes then check how much and can temporarily replace them with dummy code, Minify the Js, and then replace the code back again.
3. You have to keep one thing in mind liquid codes cannot be minified, which is the reason why we choose to replace it.
4. Same is the case when we minify CSS for liquid code but here, you will have to check for the font family as it will be later on easy for your to work with script and if you find font CSS add font-display:swap; at last if in case there are no font-display property in the CSS

   Example: @font-face { 
   font-family: ExampleFont; src: 
   url(/path/to/fonts/examplefont.woff) format('woff'),url(/path/to/fonts/examplefon 
   t.eot)format('eot'); 
   font-weight: 400;
   font-style: normal; 
   font-display: fallback; <- replace with swap; }
   

5. If no font display attribute then add this: font-display: swap;
6. Even you are able to recognize a string like this

   {{ settings.heading_font | font_face }}
   then add : font_display: 'swap' 
   Example: {{ settings.heading_font | font_face: font_display:
   'swap' }}
   

7. For google font’s URL add:
8. Remove Commented code

   {% comment %} code/html {% endcomment %}

9. Load Js and CSS coming from CDN to our store if possible and defer the Js
10. Remove Duplicate script: Remove duplicate Js and CSS

Minify HTML

To Minify HTML you can simply visit this link of HTML Compressor that explains in detail how you can Minify HTML. Minifying your HTML can improve the speed of your website, decrease the render and load time of your page, and also reduce your overall page size.

1. To minify html add new snippet:
   
2. You can name the file to “compress”:
   
3. Next, you will have to copy the code from the library using the below link: https://gist.github.com/JimmyRittenborg/6f0bb74a996f9676ead5
4. Then paste it into the compress.liquid, as shown in the below image, and click on save:
   
5. Add this line of code {%- capture minified -%} at the top of theme.liquid:
   
6. Add at the bottom of theme.liquid after </html>:
   
7. Save the file and the HTML will now be rendered into minified form.

Using Website To Minify Js And CSS Codes

Here, there are two different websites available for you to Minify Js and CSS files and codes and we have mentioned both of them below:

1. Minify Js
   1. For the Js script, all you have to do is visit: https://www.toptal.com/developers/javascript-minifier/
   2. Then you have to paste the code which you have to minify in the Input JavaScript.
   3. Once you receive the minified output as shown in the following image, you simply paste it after you find that the code is correct.
2. Minify CSS
   1. Here for the CSS script, simply you have to go to: https://www.toptal.com/developers/CSSminifier/
   2. Then you have to paste the code below which you have to minify in the Input CSS.
      
      
   3. Later on, you will receive the minified output as shown in the below image and later on after finding that the code is correct, all you have to do is just go and simply paste it and you’re done!
      

Optimize Images

The process of image optimization includes reducing image size, compressing images, and loading images faster helping your site load faster. Here to optimize images all you have to do is determine the size of images you want to get your image to load, so every time the site loads, it will load in the same image size which you have specified. For example, you want your image to load of size 150×150 then simply use the code given below:

src="{{ image | img_url: '150x150' }}"

Top Apps To Optimize Images

Certain Shopify apps help optimize images in Shopify to help you increase the page speed of your web page which we have mentioned below:

1. Image Optimizer

   Image Optimizer is an app that compresses images automatically to minimize file sizes without degrading the quality of the image. The app reduces the time required for images to be transmitted over the Internet or downloaded. Compression of images enhances store page load times, user experience, and search engine optimization.

   
2. Crush.Pics

   Crush.Pics images use helps us to reduce the size of the file through image compression without letting it be a high-quality image and help reduce the load speed of the Shopify sites. This tool also offers options for optimising images for SEO.

   
3. TinyIMG SEO & Image Optimizer

   Images can be recovered to their original state at any time, and they can also be manually optimised.

   
4. SEO Audit + Image Compression

   SEO Audit + Image Compression is another great Shopify app that will help you increase the speed of your web page by assisting to compress image files and letting your site load quickly along with optimising your images so that you rank better in terms of SEO.

   
5. SEO: Image Optimizer Page Speed

   SEO: Image Optimizer Page Speed increases the load time and speed and assists to compress images without compromising the quality of the image. Additionally, it provides detailed SEO analysis as well as problem reports and suggestions for improvement.

   

Lazy Loading

Lazy Loading is nothing but a technique in web development that helps in solving the issue of deferring offscreen images. Defer offscreen images are below the fold content of the web page and are preloaded even before they are needed. This reduces the speed of our web pages.

So with the help of lazy loading, the website data does not preload. Instead, here the browser loads the content that the visitor is likely to see first, that is, the above-the-fold content, so the content below the fold won’t be visible unless the website visitors scroll down.

Since the browser doesn’t have to load the entire website content simultaneously, it reduces page loading time, resulting in fast loading web pages and helping enhance your website performance.

How To Apply It?

Here we have presented two ways to for the same:

1. Through Code
   1. 1. If a store has a youtube video & has lazy-sizes.js in it then you can lazy-load the iframe like this:

      Example: <iframe class=”lazyload” data-src”youtube video source”></iframe>

   2. 2. Some of the stores use different classes instead of lazy load for lazy-sizes.js so make sure you check it first:Example: Image–lazyLoad, Img–lazyLoad etc.
   3. 3. You can just simply visit Lazy Sizes and Jquery Plugin.
   4. 4. If a store has a .mp4 video then you can change it to lazy load like this:

      Example: <video class=”lazyload” data-src”video source”></video>

   5. 5. If the video is coming from the product description then you can replace the part of the video like this to make it lazy load:

      Example: <div class=” rte
      product-single__description”
      itemprop=”description”>
      {% assign descriptionmain = product.description
      %} 
      {% assign descriptionone = descriptionmain |
      replace:'<div class=”video-wrapper”><iframe
      src’ , ‘<iframe class=”lazyload” loading=”lazy”
      data-src’ %}
      {% assign descriptiontwo = descriptionone |
      replace:'</iframe>’,’</iframe></div>’ %}
      {{ descriptiontwo }}
      </div>

2. Using Plugins

   Below are some of the mentioned plugins that can help you with the Lazy Loading:

   1. Lazy Sizes

      Lazy Sizes is one of the most useful plugins that is used for the purpose of lazy loading. It helps to intelligently load images resulting in reducing the loading time of your website. When you visit this link, you can see that they have also shared examples of how you can work with Lazy sizes.

      You will be able to see various examples provided by Lazy Size when you click on “Demo with code examples.”

      
   2. Jquery Lazy

      Jquery Lazy is a Lazy Loading plugin that speeds up page loading time and reduces traffic to your site by only loading the content that the user can see. You can easily install the plugin as all the details are available on the website.

      

      After you are done applying Lazy Loading, it’s time to check by scrolling down on your website and also checking the Shopify site speed. You can also check manually by inspecting the browser code by clicking right on View score and searching for “lazy”. As you scroll the website, you will be able to see the difference, as below-the-fold content is not preloaded in advance and only loads when you scroll towards that section.

Still, Speed Core is not optimized? No Worry!

Wait the story doesn’t end here. You followed all the suggestions that were mentioned in this guide, made all the changes by yourself, and even after spending hours and performing the various activities to fix the page speed issue but you still didn’t get a satisfying score. So what should you do now?

It is said that there is always a hero with a cape that arrives and fixes everything at the end of every story. Well, here we are not going to talk about a superhero again, although, we will speak about something that is no less than a superpower. Here we are going to talk about how Kill script is the last thing you can try going for. The process of using Kill script is much more technical so you will definitely need the help of a developer. However, this assures that your work will be done completely and you will be able to notice effective results.

Let us understand it more deeply.

What Is a Kill Script?

Kill Script is generally used for third-party scripts. It can be quite difficult to block third-party apps like party popup apps, chat apps, rewards apps, and review apps since they are intended to start immediately and rely on minified code snippets and script tags. It is possible to modify the minified code yourself, but it becomes messy and difficult to maintain, especially if you use several libraries. For this purpose, Julien Elbaz developed an open-source library called Yett that handles blocking analytics script execution automatically. In addition to blocking scripts, the library offers an option to unlock scripts later on, once a user has consented.

How Can Be Used To Increase The Speed?

Many a time it happens that there are some elements that we do not need immediately like for example, when your user is visiting the home page at that time the review section of the website which is located on the product page is not needed to be preloaded as due to this the website may take time to load hence using kill script we can avoid these pages to load earlier which can result in increasing the page speed. Hereby using Yett this issue can be solved. Since it is a free resource that you can use as the kill script for your web page. Simply just visit the Yett and you will get to see various examples that you can use for yourself.

We have provided you with an example that you can use to block third-party apps :

For example, if you are using Judge. me app for review or Tidio app for the chatbot you can use the below script to block them.

1. Block Third-Party Scripts:

   Below is how you can block third-party apps:

   
2. Unblock Like This:

   You can later also unblock it later:

   

What happens when you are successfully able to perform speed optimization?

1. Increase Conversion

   Lower bounce rates and increased conversions have been connected to conversion fast websites. According to Google, a one-second increase in site speed can boost mobile conversions by up to 27%. With 70% of shoppers purchasing on their mobile devices, site performance in terms of speed surely has a significant impact on your earning potential. So we must draw attention to our site performance and make necessary changes when needed.

2. Build Customer Loyalty

   A loyal customer is more important than many new customers and considering this fact we have to optimize Shopify site speed in order to boost the performance of our web pages. This will help us not only retain our loyal customers but keep them visiting our site as they will not improve the website performance.

3. Improve Google Search Ranking

   More potential clients will find your business if you rank higher on search engines like Google. Google, the most prominent search engine, uses site speed as a ranking component for search results. Faster sites will rank higher on Google, making new clients find them easier. Here the journey of speed optimization follows a systematic process that will guide you in a detailed manner.

Final Note To The Speed Optimization

And here we end with the speed optimization process! So this was a detailed guide where we have included all the points that you can consider while you are looking to optimize the Shopify speed on your own. While we tried to include all points and all the steps necessary for the optimization process, you can let us know in the comment section below if we missed anything!

Also, if you are someone who does not want to go through the process and would rather want someone else to help manage the task of speed optimization for you, then you can always reach out to us!

At Huptech Web, we have a team of Shopify developers who are capable of handling all the tasks and concerns related to Shopify for you.