The result of a business is a satisfied customer
Shopify is one of the best platforms that offer a wide variety of opportunities to attract more visitors to the online store, provide them with the best services, and turn them into regular customers. However, there is a but! Your website might be beautifully designed, have numerous features, and offer the most competitive terms of purchase and delivery. But if your site is slow, none of those benefits matter. Your potential customers will abandon ship without making a single purchase.
We know this too well because every day we are working on performance improvements for Shopify stores, and we know exactly how site speed affects conversions.
Do you know how to optimize a Shopify store’s speed? In this article, we will give you answers to the most burning questions related to Shopify store optimization and the ways in which fast websites influence Shopify conversion optimization.
How Does Shopify 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 shopper conversion rate was 2.6%! This means that only 26 out of 1000 potential customers who landed on a certain online store proceeded to the purchase!
There are many factors that influence conversion rate. To promote your business, increasing brand awareness and customer loyalty, you should apply different advertising and marketing techniques. However, no matter how much money is spent on marketing, if your website is not optimized – all your efforts will be in vain.
Shopify speed optimization has significant impact on user behavior. If within a few seconds a website is not fully loaded, visitors leave the page and buy from your competitor, whose site is faster – hence, your decreasing number of sales and profits.
Thus, with each passing second while your website loads, you lose more and more potential buyers. Not only does the number of people who are likely to buy from you decrease, but the likelihood they will return also decreases.
Additionally, search engines take into account Shopify website performance and load speed when ranking them in their organic search results. So, this is yet another reason why a slow site gets far fewer targeted visitors, and consequently, a lower conversion rate compared to faster online stores.
The Best Tools to Check Your Site’s Performance
If you are unsure if you need Shopify site speed optimization, we recommend using one or several of the tools below to start. Each of them has its advantages and unique features, and it’s up to you to decide which one is best for your use.
Google PageSpeed Insights
The PageSpeed Insights (PSI) provides page performance reports on both mobile and desktop devices and gives detailed recommendations for improving the page you check.
At the top of the report, PageSpeed provides an estimate that summarizes page performance.
- 90+ points – this speed is considered fast
- 50-90 points – shows an average speed
- Less than 50 – illustrates that you need to optimize the Shopify speed as soon as possible
The analysis is carried out for the current page in the conditions of an emulated 3G network. The results are more or less approximate and can change from day to day.
PageSpeed deserves your attention because:
- it tells you how to optimize your Shopify store for mobile, giving detailed data and recommendations
- recommendations are provided first hand by Google itself, which is worth taking into account, especially if you are interested in Shopify search engine optimization, as well.
To use the GTmetrix, you just need to enter the website URL, press the Start button, and wait a few seconds. After that, you will see the Page Speed score and YSlow Score (a separate service that analyzes 23 different parameters) and detailed guidance with recommendations for Shopify page speed optimization steps.
As well as in other similar tools, the test result is displayed in a table with recommendations.
GTmetrix is useful thanks to its easy-to-understand interface and the great variety of parameters tested. It is also convenient that the data from the YSlow Score service is integrated with GTmetrix. The service provides extensive information on the load time of each element of the page being tested (“Waterfall” tab). The main disadvantage of GTmetrix is the limited choice of test server regions, which influence the speed test results. To measure the performance more accurately, choose the closet test server manually.
DevTools Google Chrome
DevTools Google Chrome is a useful tool for analyzing fast page load speed and pointing out the files that slow down performance.
To open the tool in Chrome, use the keyboard combination Ctrl+Shift+I (for Windows), or Cmd+Opt+I (for Mac), or via Menu>Additional Tools>Developer Tools.
At the bottom of the panel, you’ll see the final number of requests and download speed. It is worth noting that you will only see those requests that occurred after launching the DevTools, so refresh the page to see the fresh results.
Why is DevTools good? Because it is easy to access, free of charge, and if you have enough skills to use it properly, you will get a lot of useful information from it.
However, there are a couple of cons. You need to study the technical nuances of the tool and its visual display. Also, it gives no recommendations on Shopify website optimization – you need to dig deeper to understand and implement all the required steps yourself.
Web Page Test
WebPageTest is a free, simple, and useful service. To test the speed, you need to:
- Enter the website URL
- Select a region from the list or on the map
- Choose a browser
As a result of the test, you’ll get:
- The main indicators: Load Time, Time to First Byte, Start Render, First Interactive, Number of Requests, Fully Load Time.
- Page load statistics in the form of a diagram: breakdown by content, by domain, and a screenshot of the page.
Additionally, WebPageTest provides a tool for optimizing images, which operates by compressing them.
The main advantage of WebPageTest is its convenient and detailed breakdown of test results by speed and queries. As for the drawbacks, it lacks optimization recommendations.
Fortunately, there are plenty of other tools that help to analyze and optimize a Shopify website, like Pingdom, or Yellow Lab Tools. You are free to choose the one with the interface and set of services you like the most.
What Shopify Website Performance Depends On
After you analyze your online store speed with one of the listed tools, you get a detailed test result with all the issues detected on both the front- and back-end of your website. With that information in hand, next it’s time to understand where you should start to optimize the Shopify speed.
The performance of Shopify websites mainly depends on the following factors:
- Server optimization. The farther the physical server is located from the user, the more time it will take to send HTTP requests to it and receive a response. Hosting should be chosen depending on the country, or countries, your business is focused on. If your online store sells products far beyond the borders of one country, then it makes sense to use a CDN connection. In the case of Shopify, this is not a problem at all. The provider assumes all responsibility for the quality of the hosting, and online-store owners do not have to pay an additional fee for this service. The only thing you can do here is upgrade the hosting plan to take your store to the next level. Sometimes switching to a better plan may halve the loading time.
- Custom functionality. Each installed application adds weight to website pages, increases the number of requests sent to the server, and makes the pages load more and more slowly. Moreover, some apps may include bugs in the code, which inevitably affect the performance of the site.
- Front-end. This includes the website design, chosen theme, layout, and all the other options that make the customer journey simple, easy-to-understand, and exciting. Each of the listed points often negatively affects the performance and speed of online stores.
Undoubtedly, Shopify is one of the most convenient platforms for those who are new to online retail business and do not have enough technical skills, time or desire to study the bulk of technical documentation, which is a must for most e-commerce platforms. On the other hand, the performance of most of the back-end processes here is the responsibility of the platform providers. In this regard, when it comes to the need to optimize the Shopify online store, there is neither a full access to the platform’s source code, nor is it possible to customize third-party functionality.
Next, we will describe in detail all the issues slowing down websites, and tell you how these problems can be fixed.
6 Frequent Performance Issues or How to Optimize Shopify Speed
#1 Unresponsive theme
The choice of the right theme for your online store is one of the cornerstones directly affecting website load speed, and Shopify mobile optimization as a whole. A general performance analysis of online store pages does not provide any details about how well the store theme is optimized, so here is how to optimize a Shopify theme.
- 1. To find out whether your current theme needs any improvements, you should separately check it in the PageSpeed Insights. For this, run an analysis of the theme’s preview page, and you’ll see if your current theme needs any improvements.
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 is updating your current theme by changing its code. Only those comfortable with HTML, CSS, and Liquid can cope with this. If that doesn’t describe 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 option is to create a custom theme from scratch. This decision, by any means, will be more expensive than the previous options, and you will have to hire a team of designers and developers who have enough skills to cope with this task professionally. However, building a new theme from scratch can reap a lot of 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.
- 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.
- If you find some apps with useful functionality, but that overload the website performance, you do not always need to remove them. Instead, simply optimize. For that, you can merge all the stylesheets into one single file.
- Use CSS sprites to consolidate multiple images, like icons, into one. This will limit the number of server requests and thus improve the page 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.
- 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.
- 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 a Hero Slider and replace it with a single, well thought out hero image with a CTA button on it. Statistics show that today less than 1% of customers click on sliders. Others are either annoyed by this feature or at the very least, do not bother to watch every slide. Of course, it is your choice to decide which option is for you, and if you decide you still want to use a slider, just be sure to consider the previous point.
- Combine CSS
- Make sure that CSS and JS are in-line
- Make CSS sprites for faster image loading
- Keep the theme and images design to a reasonable minimum
- Revise the installed apps
- Homepage Hero slider
- Popular products carousel
- All images
#2 Too many apps
Although the Shopify platform provides vast native functionality, there are many features not included that can however be implemented with the help of third-party apps. While some store owners thoroughly choose each app to be installed on the store, and after each installation, revise website performance, others only pay attention to the app features.
Each time you decide to expand the functionality of your store, it is crucial to remember that the more apps you install, the more your website will weigh, the more requests will be sent to the server, and the longer it will take to load the page fully.
The first thing to do is to take stock of all the installed apps. Often, it turns out that some installed applications are used very rarely, while some of them are not used at all. However, despite this disuse, even if the application is disabled, JS/CSS files are still running, using resources and, as a result, making the site load longer.
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 an essential role in the site loading speed. Uploading high-quality pictures to use on homepage sliders or product pages is a common mistake. Undoubtedly, beautiful photos is a must-have for any online store. Moreover, this is exactly what the client wants to see when deciding whether they should buy from your store or not. In such cases, Shopify image optimization and compression will help to speed up website performance significantly. For example, compressing 20 MB of images to weigh about 300 KB can sometimes improve the website speed by 70%.
#4 The thumbnail image size
If you use carousels to showcase popular products on the homepage and related products on the product pages, we hope this advice is useful for you. To display thumbnail images in such carousels, they are pulled from the product page, as is the related product information. 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 page load speed will increase several times.
#5 The homepage hero slides
Large Hero sliders at the top of the homepage is one of the distinctive features of Shopify online stores. No doubt, large sliders with high-resolution images make your online store look sophisticated and will attract visitor attention. However, a slider with 4 to 6 high-resolution images puts a destructive load on your store.
#6 Large number of HTTP requests
When we open a website page, it accesses the server to receive information such as the list of products, shipping or payment methods, images, and other content. Sometimes the generation of a complex page with a bulk of content may imply up to 100 requests. However, if the store is not optimized, the number of requests may increase indefinitely. Each request may require about 20 ms. The more of them there are, the longer it takes to fully load the page. How can we reduce this number?
Caching. This is a mandatory feature, especially for pages with large amounts of data, images, videos, and other files. An example of “long” requests for online stores is one in which the products list page contains more than 100 products. If the data is cached, the server does not need to regenerate it every time the user lands on your website. This significantly speeds up the data receiving process and relieves the server load.
In fact, each element on the page requires sending a separate HTTP request. Hence the more complicated the page is, and the more details, images, CSS and JS files it contains, the more requests it will send to the server and the longer your customers will wait for the complete picture to appear on their screen.
In addition to caching, to eliminate redundant HTTP requests you can also do the following:
In our optimization project for Generate, we faced an unexpected issue. Five forms were using Magento validation. We replaced them with Shopify validation forms and deleted all the extra scripts. As a result, several additional HTTP requests were eliminated. Additionally, some of the removed Magento JS scripts were found in the main file with scripts. Although their elimination did not lead to a decrease in server requests, the file weight decreased, and now it loads much faster.
In general, after we removed the demand for missing style files and jquery recalls, and deleted the redundant CSS and JS files, the website load time reduced by 6 seconds.
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:
Lazy Load helped us save 11 seconds of the customer time, which is a great result! 11 seconds may not sound like a lot of time, but when it comes to loading a webpage, it is an eternity.
In total, it took us about 30 hours to remove more than 80 HTTP requests, halve the page weight, and make the Generate online store load 23.5(!) seconds faster. Just look at how the homepage performance indicators changed:
Depending on the number of issues found at the stage of analyzing your online store performance and on the experience of a specialist, it can take from a couple of hours to several weeks to optimize a Shopify store’s performance.
Remember that the only irreversible consequence of online store speed optimization is your conversion rate optimization! Shopify’s platform provides a lot of opportunities to implement steps for fast and high-quality speed optimization techniques. The process can be complicated, but no matter what issues you face with your Shopify store, Whidegroup is always ready to assist in optimizing, regardless of your store’s size or the site’s complexity. Drop us a line today so we can help your e-store be a success!