Speed is of great importance for the success of an online store. The faster the pages load, the lower the bounce rate will be. If it has a high speed, there is a good chance of ranking in the top, compared to slow ones with a high bounce rate.
Page speed is a critical factor when it comes to boosting your search engine rankings. We will figure out what are the ways to optimize your Shopify store.
What are the tools to check the speed
Gtmetrix is recommended, but there is also Google Speed Insight. In the process, you will need technical knowledge. Before you start optimizing your online store, be sure to back up your theme. This can be done using the following algorithm: Administrator> Themes> Actions> Load the theme file. Shopify plus agency can help with this.
One of the key factors affecting the speed of a Shopify store or other page that will reduce conversion rates is images.
There are two ways to compress images. In the first case, you can use Shopify applications. But you can use the site to compress images on the Internet. You will need to upload the image to the resource, and then replace it with a compressed image. One of the best options for this is TinyPng.
Shopify is capable of auto-serving WebP, which provides excellent web image compression in PNG and JPEG formats.
Removing unnecessary applications
Most Shopify online stores use apps, some of them affect loading speed, but not all owners are aware of this. But just deleting applications is not enough, you also need to remove files from the theme. Some applications may automatically insert files into the theme during the installation process.
Only visible images need to be loaded
First, this concerns off-screen images, when the user visits the page and sees the images from above, but the browser loads everything that we cannot see. To fix this, you can use the lazy loading method. It will load images until the user scrolls down to it. Some themes already have lazy loading.
Preloading web fonts
This method requires preloading fonts. As soon as the browser is required, the font will already be loaded, which will significantly reduce the loading speed. In this case, the browser will not download the font.
Most online stores use Google Web Fonts, so they can also be used as visual material.
It is possible to simply add parameters to the Google font link. This will eliminate the chance of blocking rendering and will also skip any further steps in the web font preloading process.
Js and CSS preloading
Apply Google Tag Manager
To improve the page loading situation, we can also use the Google Tag Manager. It will allow you to organize and manage tags like Facebook Pixel, Google AdWords Pixel, Google Analytics, etc.
To do this, follow these steps:
- register with Google Tag Manager;
- create an account in Google Tag Manager;
- add the Dispatcher script to your theme.liquid, according to the instructions on the service;
- add tracking tags.
After that, you need to click on the “Add new tag” button. Click on “Edit”, and then select the type of tag. If you want to add a Facebook pixel, you need to click on the “Custom Html” tag. Now go to your personal Facebook business manager and select the desired pixels.
On the drop-down menu of settings, you need to use “Installation”, then “Manual installation”. Copy the resulting code into the custom HTML tag of the Tag Manager. Alternatively, you can connect to a partner using the platform, and then select a tag manager from the list that opens. These simple steps will help you to do Shopify speed optimization.