Page speed has been a crucial factor for ranking in recent years. Specifically, optimized page speed can make key contributions to user experience thanks to more efficient pages and a much better on-page customer experience. Besides, page speed measures the time it takes the content on a URL to load as well as estimates how your site is performing overall. What’s more, you can measure page speed by scores with tools like Google PageSpeed Insights which investigates various load times on your site in aggregate. Pages that load and deliver content faster can meet users’ requirements quicker, thereby growing your site’s SERP positions.

Alongside the proliferation of digital technology, mobile users increasingly expect fast load speed. In a survey, 73% of users assumed that the websites they visit are not fast enough, and they expect to access a website with a faster loading speed. On the other hand, conversion rate attributes a lot to page speed. For instance, Walmart, the leading American multinational retail corporation, pointed out that they saw a two percent increase in conversion per second of increased page speed.

In this article, we’ll show you useful tools for testing Shopify page speed, how to define what slows down your Shopify store, and then how to tackle Shopify page speed optimization.

The Shopify Site Speed Optimization Guide, in particular, has been developed by the BSS team and offers an actionable checklist for merchants to assess and optimize the loading speeds of their eCommerce websites. It’s available for free HERE.

Why is Shopify page speed optimization very important?

Unquestionably, page speed is an important factor determining search engine optimization (SEO). In 2010, Google claimed to include page speed as one of the ranking factors for their search index. Later, in 2017, Google announced incorporating mobile site speed to create site ranking on its mobile-first pages. In addition, Google is also working on a project aiming to make pages load more quickly on mobile devices named Accelerated Mobile Pages Project (AMP).

Needless to say, page speed is one of the most critical factors that affect mobile friendliness and ranking signals. Moreover, in the summer of 2021, Google rolled out the Page Experience update to enhance its algorithm. 

This new ranking signal associates Core Web Vitals with existing metrics like user experience and safe browsing to create ranking signals for the overall Page Experience. In addition, Page Experience signals aim to evaluate web pages by evaluating the customer experience while consuming the content. 

Source: Shopify Plus

You can also take a look at the numbers below to know why page speed has turned into a massive indicator of the site’s overall user experience. 

• 79% of customers “dissatisfied” with a site’s performance are less likely to buy from them again 
• 64% of smartphone users expect a website to load in four seconds or less 
• 47% of online shoppers expect web pages to load in two seconds or less

On the other hand, a time delay can affect total sales. For example, if your site yields $100,000 per day, a one-second faster page speed brings back another $7,000 daily output. Because online shoppers will never be patient with slow pages. 

The bottom line, with all the above factors in mind, faster load times and better site performance can help you generate more leads and win more customers.

>>> Recommended Reading: Shopify Speed Optimization: 8 Easy Tips To Improve Page Speed

What factors impact your Shopify store’s page speed?

You must consider these factors to achieve Shopify page speed optimization. Because it may slow down your site:

– Plugins and Apps

– Third-party libraries and services

– Analytic libraries

– Theme code

– The number and size of images and videos

First, a heavy page due to responsive or high DPI images definitely loads slowly. That’s why it is important to optimize images and prioritize using lightweight ones. Once you use lightweight images, they can be distributed through a content delivery network (CDN) to render from a location closer to where the user is.

In addition, app extensions and additional plugins are the key factors to enrich the functionality of your site without much fuss. However, having too many apps or plugins on your website can dramatically slow your website down. Each app or plugin with different functions and features usually makes a lot of database queries and requires a lot of assets to load, thereby slowing down your load time.

Unfortunately, there is no ideal maximum number of apps and plugins you should use on your website. Because it depends a lot on your website and which plugins you are using. While bad plugins can load more than 10 files, several good plugins can add just a few extra files. As a result, you must choose the right apps or plugins to obtain Shopify page speed optimization.  

Useful tools to test your Shopify page speed?

Before you embark on optimizing Shopify store speed, you must test your Shopify page speed first. Thanks to many innovative tools, measuring your store’s page speed has turned into a simple process. Fortunately, Shopify even launched its own Online store speed dashboard for evaluating the loading time for a storefront. Because slow page speeds can be detrimental to both customer experience and search engine optimization (SEO). Thus, you must consider using Shopify or other tools for testing the page speed of your storefront.

On the other hand, it is crucial to first identify testing tool limitations before using the online store speed dashboard or additional tools to evaluate page speed. Indeed, Shopify’s Online store speed dashboard, PageSpeed Insights, or Pingdom all evaluate a storefront according to its own criteria and standards. These tools, without a doubt, are helpful in estimating the overall health of a store’s page speed. Nevertheless, remember that they aren’t entirely accurate.

Shopify’s online store speed dashboard

Shopify has introduced a new tool for measuring page speed which can be accessed through your admin. 

Access the Online store speed report by following these steps:

Step 1: Go to your Shopify Admin

Step 2: Select Online Store > Themes

Step 3: Open the Online store speed score section and view your speed score.

Step 4: To view the full speed report, click View report.

Source: Shopify Plus

Daily recalculated speed score measures how fast your online store performs in the Shopify test environment, based on Google Lighthouse performance metrics. Thus, changes in your online store come alongside changes in speed score. Your score is calculated based on a weighted average of the Lighthouse performance scores for your store’s home page. Weights depend on multiple factors, including the relative traffic to each of these page types across all Shopify stores.

The online store speed score is an average of multiple days of Lighthouse performance scores because of slightly varied performance scores among tests over multiple days. Besides, lighthouse reports are also run on the mobile versions of these pages. It is essential for online businesses since 60% of sales yielded on Shopify stores are from mobile devices.

A higher score represents that customers can access an online store with less time. Online stores that provide even a customer with a slow phone and poor mobile connection a positive buying experience definitely win the games. A low score may prevent customers from making a purchase from your store.

To understand how your store is performing compared to other Shopify stores, view your speed ranking here. You can also use your speed score as a measurement to help you optimize your customer experience.

Additional tools to evaluate Shopify page speed

Using browsers

One reliable test is to simply open your store’s URL on multiple browsers, devices, and networks. Firsthand experience of a loading sequence is just as important as any platform-based or a third-party tool. Another option is to make use of the Network and Performance features found in browsers like Chrome and Firefox.

Google PageSpeed Insights 

Without a doubt, you might not know how users are interacting with your website if you don’t analyze page speed. Luckily, Google Page Speed Insights is known as one of the best page speed testing tools, so we recommend you take a look at it. 

Source: Google PageSpeed Insights

PageSpeed Insights (PSI) helps assess the performance of a page on both mobile and desktop devices and provides suggestions for Shopify page speed optimization. On the other hand, PSI features both lab and field data about a page which helps debug and capture true, real-world user experience. 

Besides, real-user experience data in PSI provides sufficient user experience data for a given page with user experiences classified into three buckets: Good, Needs Improvement, or Poor. As a result, you can get useful insights, thereby improving traffic and conversion rates on your site.

You can also use Google Lighthouse for recognizing core performance issues and evaluating whether progressive apps meet qualifications or not. This free, open-source tool analyzes the given URL and estimates page performance on different metrics, including First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, and Total Blocking Time. 

In fact, you can not directly measure the page speed, however, just gets advice on how to improve your website’s load time when using Google’s Pagespeed Insights. Enter your URL and see the score the tool gives you. If it’s high, shed light on other factors to investigate your load time. Nevertheless, a low score doesn’t necessarily mean that you have a slow loading time.

WebPageTest

WebPageTest is a reliable page performance testing tool developed by AOL and open-sourced in 2008. It produces its metrics using real-world browsers to load the web page being tested. 

Source: WebPageTest

WebPageTest maintained by Google on GitHub is probably the best and most comprehensive free tool for measuring your page load time. Unfortunately, it provides a lot of very complex data. Because WebPageTest is the only tool we know of that allows you to reliably determine the load time of your site with free of payment barrier and subscription model. Besides, valuable data and an API from WebPageTest allow you to automate the whole thing. 

Moreover, WebPageTest allows tests to be run from locations worldwide, using real browsers at actual connection speeds. This means that can test performance where your users are based rather than arbitrary scores out of 100. WebPageTest features a wide range of different tests, including conducting simple tests, advanced multi-step tests, video capture, content blocking, multi-site visual comparisons, and traceroute testing. 

Shopify Theme Inspector for Chrome

As a profiling tool, the Shopify Theme Inspector for Chrome utilizes a flame graph to display Liquid render performance. This tool helps you to recognize the lines of code that slow down pages in your online store. That’s why it is essential to learn how to use the Shopify Theme Inspector.

Source: Shopify Plus

The Shopify Theme Inspector for Chrome is a browser plugin that visualizes Liquid render profiling data in a flame graph. This graph and the profiling data are at your hands to investigate the parts of your theme code that are slowing down an online store.

Shopify themes are fast out of the box, which boosts Shopify page speed optimization, however, Liquid changes can result in slowdowns. Shopify Theme Inspector for Chrome can handle Liquid changes identification that are slowing your site down by featuring a visualization of Liquid renders profiling data. In that way, you are given the means to triage the slowest parts of your Shopify theme.

Even if a theme is designed to obtain high performance, apps and customizations made to theme code can lead to the online store slow-down. These slowdowns attribute a lot to liquid customizations. Because liquid templates can influence negatively server response times, which increases the time required for a page to start rendering.

After you identify the code needing renovation, you can optimize it to make the store faster and convert more visitors.

GTmetrix

GTmetrix is another free tool that we suggest for Shopify page speed optimization. Moreover, online merchants can analyze your page speed performance and grades web pages from A to F, thereby giving you helpful recommendations to implement. Besides, you can click on the “waterfall” tab and get to know the exact amount of time each request took to fulfill.

Source: GTmetrix

You should use this helpful tool to test various server points to fully investigate how fast your website loading time is. The basic version of this tool is completely free of cost and you can get access to a large number of options simply by signing up for an account. However, if you want to get more extensive features like unlimited report filters and resource usage graphs, you can give it a try with GTmetrix Pro.

A web page comprises different assets, such as HTML, JavaScript, CSS, and images. Each of these creates requests to render what you see on your website. Without a doubt, the more requests you have, the slower your website will load. When you run your WordPress website through GTmetrix it generates a performance report which includes your “GTmetrix Grade” and “Web Vitals”. Another thing worth mentioning is how GTmetrix incorporates results from Google PageSpeed Insights and YSlow to output the comprehensive performance score and recommendations.

Pingdom

Source: Pingdom

You can also monitor a Website’s Speed and Performance with Pingdom. Pingdom will test the load speed of your website for free and give you wise recommendations on how to make a website faster for ultimate visibility and enhanced troubleshooting. Thanks to the help of Pingdom, online merchants can deliver an exceptional customer experience with real-time, actionable insights into your site’s uptime and performance, so you can keep your users returning again and again.

>>> Recommended Reading: https://bsscommerce.com/shopify/how-to-increase-sales-on-shopify/

How to optimize Shopify store speed?

Shopify’s available features to optimize Shopify store speed

Leverage Browser Caching

When a browser loads a webpage, it has to download all the web files including all the HTML, CSS, JavaScript, and images to display the whole page. Browser caching is created to store some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however, next time users revisit your website, they already have some of the files they need locally. They do not need to refresh the page from scratch, which means users need to download fewer data and fewer requests need to be made to your server. 

Browser caching functions by identifying pages, or sections of pages that require updating at different intervals. Your website’s logo, for example, can not be changed frequently. We can tell the user’s browser to only download this logo image once a week by caching it. Every visit a user makes within a week would not necessitate a new logo image download. Browser caching is beneficial since it minimizes the load time on your web server, which in turn reduces the load time for your consumers.

Utilize A CDN

CDNs which stands for content delivery networks operate by hosting the media files across a large network of servers worldwide. This is one of the best choices to speed up the web page loading time. Besides, it can decrease the number of requests a website makes and store up to 60% of bandwidth. Thanks to a CDN, you cache your site on a global network of servers. For example, if a visitor who is located in Canada visits your site, their browser could download files from a nearby server. Moreover, CDN can not only increase the loading time but also prevent online attacks from damaging your website.  

Other solutions for Shopify page speed optimization

Compress images and reduce large size images

Image compression is a big deal and an essential step for faster loading web pages. Remember to upload acceptable-size images and do not integrate too many images on a single page to ensure image optimization. Besides, the quality of the image must be taken into consideration. 

Once you replace all the images with the optimized versions, the page load time automatically improves greatly. Images play a crucial role in increasing the visual appeal of any website. Nevertheless, when it comes to an online store, well-managed images of products displayed are essential so that customers know exactly what they are getting when they make a purchase. In contrast, high-resolution images undoubtedly tend to be larger files and can slow down page load speeds considerably. Furthermore, one cannot compromise on image quality when uploading images.

Leverage AMP for Shopify page speed optimization

Google launched AMP (Accelerated Mobile Pages) as a helpful solution to make the mobile web load faster. This app converts portions of a Shopify store to AMP and indexes them with Google, allowing for near-instant page loading, faster mobile page loading, and higher rankings in mobile search results.

It is estimated that 53% of mobile users will abandon a site if it takes longer than 3 seconds to load. That’s why speed really matters to online merchants. By 2021, mobile eCommerce sales are expected to account for 54% of total eCommerce sales. With Google AMP, you can make marked improvements to key metrics including a median load time of under 0.5 seconds, less data than an equivalent non-AMP site, and sales conversion rates by about 20%.

Furthermore, online Shopify stores should create a mobile-friendly interface and lightning-fast speed to optimize Shopify store speed. Fortunately, AMP offers these features, and thus allows users to access websites quicker on mobile devices.

Download a lightweight theme for your Shopify store

A Shopify theme is a template that determines how your online store will display to the customers. Shopify themes come with different styles and layout options to design and structure your web pages and product management. The best Shopify theme for your online business isn’t the one that just appears intuitive but also provides the best experience to the users.

Source: Shopify

Selecting a Shopify theme is the most critical step for a Shopify seller. A good theme acts as an attractive and appealing storefront for customers to explore the store and then make a purchase.

Hence, choose a suitable theme that sticks with your brand’s idea, voice, products, and target audiences. In addition, consider implementing themes that are fast and take minimal time to load the page. In contrast, themes with numerous sliders, fancy animations, advanced navigation systems, etc can slow down your page speed. Because each additional element adds a burden to your web page, it will take longer to load.

We strongly advise running the theme’s preview on Google Page Speed Insights before completing it. It will display the loading speed of the web page and give you relevant suggestions to improve the loading time and user experience.

Limit installed both third-party and Shopify apps 

Anyone running a Shopify store knows that they have to implement a multitude of third-party apps to enhance functionality. However, many of these apps run scripts on web pages which slows down Shopify page speed. Take a look at the apps. Are all of them in use? Are all of them helping the business? If not, delete them.

Source: Shopify App Store

Moreover, once an app is uninstalled, it does not completely disappear. That’s why you need to take a look at all apps to consider whether it is necessary or not. Once an app is installed, it adds its code to the Shopify website code to function. As a result, apps are very helpful and ideal for online business runners who have no coding background. You may add any functionality to your Shopify website by installing the appropriate app. For example, an eCommerce business can simply acquire a live chat app rather than constructing one from scratch, which requires both money and time.

Nevertheless, it is a downside to installing these apps because they add load on your web pages, even when they are not in use. These apps comprise numerous JS and CSS files that run in the background, slowing down the speed of your website. Hence, if there are any apps that you no longer need, remove them to optimize Shopify store speed. Another helpful trick is to find an alternative for the app you believe increases the loading time. After that, install it, and load your page again to check the difference in loading time. Experiment with different apps to discard all the apps that slow down your web page’s speed.

Reduce the HTTP requests

Every time you surf the web, a bunch of technical stuff operates behind the scenes to appear content to the interface. When a user visits a page on your website, a web browser sends an “HTTP request” to your website’s server for information on a web page. After that, your server heeds this request and returns the files contained on that page to the user’s browser. Moreover, HTTP requests can impact numerous key metrics that reduce Shopify page speed optimization. The fewer HTTP requests a website has to make, the faster the site can load. 

We highly recommend the HTTP Requests Checker tool by GiftOfSpeed for you to find out how many total HTTPS requests your page makes. You can reduce HTTP requests by combining & inlining your CSS scripts. Otherwise, it is also a good choice to inline smaller JavaScript. Besides, online merchants ought to minimize the use of design, functional images, and social buttons to ensure Shopify page speed optimization. 

Minimize redirects and broken links

What is a redirect? When you move or delete something on your website, you want your visitors to arrive at the new location, not the old one. Well, a redirect is a function that automatically brings your website visitors to a new location. With redirects, your visitors have to pass one or more multiple connections before they arrive at the new location. Regardless of one connection or various, your page will definitely take much longer to load. Moreover, the slow loading time will cause adverse effects on ranking your website. Furthermore, the wait is worse for visitors on mobile as they’re typically on limited data or leeching off free Wi-Fi in a public space. Unnecessary redirects can cause performance and speed issues, thereby affecting the overall load time of the website. The built-in redirects mechanism called “URL redirect” in Shopify can be used to apply 301 redirects.

A broken link is a web page that can’t be found for various reasons. Web servers will often return an error message like “404 not found” when a user tries to click on a broken link. Broken links or dead links can be harmful to Shopify page speed optimization. Because broken links can increase your unnecessary HTTP requests and make a bad user experience. The easiest way to minimize the number of Broken Links is to find and fix broken links across your website with free tools like Broken Link Checker and Xenu.

Switch Tracking Codes to Google Tag Manager

Google Tag Manager is a solution that enables you to easily add and eliminate tags from your website without changing the code. It is known as a wonderful solution to managing all of your website’s tracking codes all in one. Furthermore, one of the best features of Google Tag Manager is that all of the code is loaded asynchronously. This implies that the code loaded using Google Tag Manager will not prevent your site’s content from being rendered. This means you might want to consider performing a “tag migration” to migrate part of your tracking code to Google Tag Manager.

Use Hero Layout instead of Using Sliders

Sliders have been popular for a long time, and most users fill them with 5-6 high-quality photos, which increases the website’s overall load time. According to research, it’s time to utterly disregard them. Sliders are now quite useless, only 1% of website visitors click on them. Moreover, they sometimes annoy the users and minimize the visibility of significant content. What’s more, sliders do not function well with customer experience on mobile devices and affect negatively SEO.

>>> Recommended Reading: https://bsscommerce.com/shopify/guide-to-shopify-checklist/

Conclusion

Site performance is one of the most important factors for Shopify store owners. The capacity of your website to convert users is directly influenced by its performance. The faster your site loads, the more visitors you’ll get.

If you’re looking for ways to improve the pace of your Shopify store, these suggestions can help. Improving image optimization, decreasing queries, and adopting lazy loading can all help your site load more quickly.

Hopefully, your Shopify page can get higher performance that improves the user experience for all your digital channels. If you’re looking for a Shopify reliable partner, you can learn more about our Shopify development services.

Do you know of other tips for Shopify speed optimization? Please share it in the comments below.