Spelling the beans on

Speeding up your Shopify Site

This is a complete guide to speeding up your Shopify store that includes

  • How Does Shopify Speed Optimization Affect the Conversion Rate?
  • What Shopify Website Performance Depends On?
  • 5 Frequent Performance Issues or How to improve Shopify store speed
Shopify - Image Banner

Shopify is one of the most excellent platforms that offer a wide variety of opportunities to draw in more visitors to the online store, give them with the finest services, and turn them into regular clients. However, there's a but! Your site may be flawlessly designed, have various features, and offer the foremost competitive terms of purchase and delivery, but in case your site is slow, none of those benefits matter. Your potential clients will abandon the ship without making a single purchase.

We know this too well because each day we are working on performance improvements for Shopify stores, and we know exactly how Shopify store speed affects conversions.

Do you know how to optimize a Shopify page load speed? In this article, I'll provide you answers to the most burning questions related to optimize Shopify store speed and the ways in which quick websites impact Shopify conversion optimization.

How Does Shopify Speed Optimization Affect the Conversion Rate?

There are more than 1.9 billion people worldwide who have shopped online, at least once. Along with that stat, however, in 2018, the average online client conversion rate turned into 2.6%! This indicates most effective 26 out of 1000 potential clients who landed on a sure online store save proceeded to the purchase!

Conversion rate is affected by several factors. You should apply different advertising and marketing strategies to promote your brand, increasing brand awareness and brand loyalty. No matter how much money is spent on ads, however, unless your website is configured – all your efforts will be in vain.

Shopify website speed optimization has a huge effect on user behavior. If a website is not fully loaded within a few seconds, visitors leave the page and purchase from your competitor, whose site is quicker – thus, your sales and profits decrease.

To illustrate all the above, here are some facts taken from Kissmetricks and Google researches:

5 Frequent Performance Issues or How to improve Shopify store speed

Thus you lose more and more potential buyers with each passing second while your website loads. Not only does the number of customers who are willing to buy from you diminish, but also the probability they will visit.

Additionally, search engines take performance and load speed into account when rating them in their organic search results for Shopify website. So, this is yet another reason why a slower website gets much less targeted users, and therefore a lower conversion rate compared to faster online stores.

Shopify - Desc Images

What Shopify Website Performance Depends On?

After you measure the speed of your online store using one of the tools mentioned, you get a thorough test result with all the problems found at both the front and back end of your website. Next, with that knowledge in hand, it's time to understand where the Shopify store speed will continue to be Optimized.

The performance of Shopify websites mainly depends on the following factors:

Server Optimization

The farther the user is from the physical server, the more time it takes to send HTTP requests to it and receive a reply. Hosting can be chosen depending on the country, or countries, the emphasis is on your business. When your online store sells products well beyond one country's borders then using a CDN link makes sense.

This is by no means an issue in the case of Shopify. The provider assumes all responsibility for the hosting efficiency, and owners of online stores do not have to pay an extra fee for this service. What you can do here is update your hosting plan to take your store to the next level. Switching to a better plan will at times reduce the loading time by half.

Custom functionality

Increasing installed applications adds more weight to the website pages, increases the number of requests sent to the server and slows down the loading of the pages. In addition, some apps that contain code bugs which inevitably affect the site's efficiency.

Front-end

It includes the design of the website, theme chosen, layout and all the other choices that make the customer's journey quick, easy to understand and exciting. Each of the points mentioned also has a negative impact on online stores' efficiency and pace.

Undoubtedly, Shopify is one of the most convenient platforms for those new to the online retail industry and lacking ample technological expertise, time or ability to research the bulk of technical documentation which is a must for most e-commerce platforms.

On the other hand, the platform vendors are responsible for the success of most of the back end processes here. In this regard, there is neither direct access to the source code of the application nor is it possible to configure the features of third parties when it comes to the need to modify the online store Shopify.

Next, we will describe in detail all the issues slowing down websites, and tell you how these problems can be fixed.

5 Frequent Performance Issues or How to improve Shopify store speed

#1 Unresponsive Theme

Choosing the right theme for your online store is one of the cornerstones that directly affects the Shopify page load speed, and Shopify mobile optimization as a whole. General online store apps output analysis does not include information about how well the store layout is designed, so here is how to customize a Shopify theme.

Solution:

  1. You can review this separately in the PageSpeed Insights to find out if your current theme needs any improvements. To do this, run a preview page analysis of the theme, and you'll see if any changes are needed to your current theme. If you do not know exactly which theme you are currently using on your Shopify store, this service will be helpful.
  2. If the analysis has found any problems in the performance, the first thing you should do is look for theme updates available from its provider. It’s true, sometimes theme designers do not abandon their products, but continue to work upgrading and fixing bugs detected by users after the release!
  3. When choosing a theme, make sure it is device responsive. Today, at least half of customers browse and make online purchases from their smartphones and tablets, most of which have different screen dimensions. It is vital to optimize Shopify for mobile and to make sure that your users get the best experience when browsing your website.
  4. If there is a need for any improvements, you now have three options to choose from.

The first option to update your current theme is to change its code. This can only be coped with by those familiar with HTML, CSS and Liquid. Unless that doesn't fit you, you may need extra help from experienced developers.

The second option is choosing a new, perfectly optimized, and responsive theme from the Theme Store.

The third choice is the development from scratch of a custom theme. This decision would, by all way, be more expensive than the previous choices, and you will have to recruit a team of designers and developers with adequate expertise to cope professionally with this mission. Building up a new theme from scratch, however, will reap several benefits:

  • You can implement any features missing in the ready-made themes
  • Custom website design is another opportunity to make your store stand-out
  • In the future, all needed changes will always be available and easy to access.

#2 Too Many Apps

While the Shopify platform offers vast native functionality, other features are not included and can be introduced with the aid of third-party applications, however. Although some store owners carefully pick each app to be installed on the store, and after each installation check the output of the website, others pay attention only to the functionality of the device.

Each time you want to extend your store's functionality, it's important to note that the more apps you add, the greater the weight of your website, the more requests it will submit to the server, and the longer it takes to completely load the page.

The first thing you need to do is take stock of all of the installed devices. Sometimes, some built programs are used very seldom, while others are not used at all. Despite this disuse, however, even if the application is disabled, JS / CSS files are still running, using resources and, as a result, extending the load on the site.

Solution:

Sort out unused apps and remove them from the store. Before you do that, thoroughly read the Shopify support documentation and uninstall instructions to make sure you do everything right so as to not allow any app leftovers to burden the website’s performance in the future.

When you find any applications that provide useful functionality but overwhelm the output of the website, you don't always have to delete them. Instead, just optimize. You should combine all of the stylesheets into one single file for that.

To avoid common problems in the future, you should only select modules from trusted providers. Before installing, each plugin should be tested to reveal its disadvantages, like an excessive number of database requests, etc.

#3 Non-optimized Images

Pictures play a key role in the pace of loading on line. A common mistake is to upload high-quality pictures for use on homepage sliders or on product pages. Beautiful images are unquestionably a must-have for every online shop.

In addition, this is exactly what the customer wants to see when deciding whether or not they should buy from your store. In these cases, optimizing and compressing the image in Shopify can help significantly speed up Shopify website performance. Compressing 20 MB of images to weigh about 300 KB, for example, can often increase Shopify site speed by 70%.

Solution:

  • Use CSS sprites to consolidate multiple images, like icons, into one. This will limit the number of server requests and thus improve Shopify speed. The SpritePad tool will quickly create sprites and render the code for you. For this, you need to drag-and-drop images to the tool and then download the sprites. Instead of downloading all images one-by-one (1 HTTP request per copy), the CSS sprite loads one large image sending only one request to the server. CSS, in turn, allows the display of each element separately throughout the page.

  • To compress and reduce the size of images without losing their quality, we recommend using TinyJPG or TinyPNG online services. Just download or drop your files, download the compressed and ready-to-be-published pictures in a minute. For non-optimized pictures that are already uploaded to the site, you can install one of the available Shopify image optimization apps, like Crush.pics or Image Optimizer. These tools are made to take care of all existing pics and those that will be uploaded to the site in the future.

#4 The Thumbnail Image Size

If you use carousels on the product pages to highlight common products on the homepage and related items, I hope this advice will be useful to you. They are taken from the product page to show thumbnail images in those carousels, as is the related product details.

If you leave everything as it is, the system will take high-resolution images and the customer’s browser that will have to adjust the pictures to the requested dimensions, thus, making the customer wait longer.

For desktop browsing, the change in download speed may be minimal, but if the potential customer has reached your site from a mobile device, the situation may drastically change, and the Shopify page load speed will increase several times.

Solution:

  • You can make some changes to the Liquid code – just use the “srcset” attribute, and set different screen resolutions for images.

  • Use the Lazy Load technique which will load images only as soon as each of them appears in the viewport. For example, on the online store for our client, Generate, each drop-down menu on the homepage included product carousels with six products for each slider. This means that 48 additional thumbnail images had to be loaded to showcase popular products to customers who have just landed on the site. To better the website, we decided to replace all the sliders in the drop-down menus with optimized static images and used Lazy Load to make these pictures load as soon as the more critical elements on the page are ready.

#5 The Homepage Hero Slides

Big Hero sliders at the top of the homepage are one of Shopify's online stores' hallmarks. No doubt large sliders with high-resolution images can make your online store look elegant and draw the attention of the visitors. A slider with 4 to 6 high-resolution images does, however, place a destructive load on your shop.

Solution:

  • Decrease the number of slides. Leave no more than three photos in a slider and optimize the images for Shopify without losing their quality. Your slider should follow the best UX practices and also should be complemented with a Lazy Load feature.

  • Eliminate and replace a Hero Slider with a single, well-thought-out hero picture with a CTA button on it. Statistics indicate fewer than 1 percent of consumers today are clicking on sliders.

  • Others are either irritated by this feature or at least don't mind watching every slide. Of course, choosing which option is your decision, and if you decide that you do want to use a slider, just be sure to remember the previous argument.

Final Thoughts

Looking back and analyzing the results of the Generate optimization project, Lazy Load appears to be the most helpful tool. We applied it to several pain points at once, including:

  • Homepage Hero slider
  • Popular products carousel
  • All images

In my previous article, I’ve discussed Top Shopify Page Speed Optimization Apps. You might want to take a look :)

Thus you lose more and more potential buyers with each passing second while your website loads. Not only does the number of customers who are willing to buy from you diminish, but also the probability they will visit.

Additionally, search engines take performance and load speed into account when rating them in their organic search results for Shopify website. So, this is yet another reason why a slower website gets much less targeted users, and therefore a lower conversion rate compared to faster online stores.

Shopify - Desc Images

What Shopify Website Performance Depends On?

After you measure the speed of your online store using one of the tools mentioned, you get a thorough test result with all the problems found at both the front and back end of your website. Next, with that knowledge in hand, it's time to understand where the Shopify store speed will continue to be Optimized.

The performance of Shopify websites mainly depends on the following factors:

Server Optimization

The farther the user is from the physical server, the more time it takes to send HTTP requests to it and receive a reply. Hosting can be chosen depending on the country, or countries, the emphasis is on your business. When your online store sells products well beyond one country's borders then using a CDN link makes sense.

This is by no means an issue in the case of Shopify. The provider assumes all responsibility for the hosting efficiency, and owners of online stores do not have to pay an extra fee for this service. What you can do here is update your hosting plan to take your store to the next level. Switching to a better plan will at times reduce the loading time by half.

Custom functionality

Increasing installed applications adds more weight to the website pages, increases the number of requests sent to the server and slows down the loading of the pages. In addition, some apps that contain code bugs which inevitably affect the site's efficiency.

Front-end

It includes the design of the website, theme chosen, layout and all the other choices that make the customer's journey quick, easy to understand and exciting. Each of the points mentioned also has a negative impact on online stores' efficiency and pace.

Undoubtedly, Shopify is one of the most convenient platforms for those new to the online retail industry and lacking ample technological expertise, time or ability to research the bulk of technical documentation which is a must for most e-commerce platforms.

On the other hand, the platform vendors are responsible for the success of most of the back end processes here. In this regard, there is neither direct access to the source code of the application nor is it possible to configure the features of third parties when it comes to the need to modify the online store Shopify.

Next, we will describe in detail all the issues slowing down websites, and tell you how these problems can be fixed.

Leave a comment

Please note, comments must be approved before they are published.

Cart

Cart

Close

Your cart is currently empty.

Total