Shopify Speed Optimization: 11 Effective Ways (2023)
In the eCommerce world—speed does matter!
Whether customers are browsing your website on desktop or mobile, they want a seamless experience throughout their buying journey.
Yes, gone are those 2G internet days when people would patiently wait on their mobile for a website to load. The internet speed has increased significantly over the past few years and so have your customers' expectations.
Considering these trends, Shopify speed optimization has become a critical component of the success for all store owners.
This blog will help you understand how to measure Shopify page speed, the importance of optimizing your Shopify store, and the effective ways to improve your Shopify store speed.
Why Should You Improve Shopify Page Speed?
Your Shopify store speed influences two essential aspects:
- User Experience (UX): No one likes waiting these days. If a page takes too long to load, customers may lose patience and abandon the purchase, leave your website, or have negative emotions during the buying journey.
All these aspects can directly impact some crucial factors as follows:
- Conversion rate
- Bounce rate
- Brand perception
- Google Search Ranking (SEO): Google’s Core Web Vitals is a signal guideline that determines the factors that can affect website search rankings. Speed is one of them that can impact SEO and it can be verified using the Google PageSpeed Insights tool. But that’s not to say that you should be focusing only on page speed in your SEO efforts. Keep in mind that the relevance of your website content still plays a huge role in Google search rankings.
Unbounce did a survey with 750 consumers and found that nearly 70% of consumers say that site speed influences their willingness to buy from an online store.
In another interesting study with 188 marketers, Unbounce found that 85% of marketers' landing pages were slower as compared to Google's recommended speed of 5 seconds or less with a 3G connection.
How to Measure Shopify Page Speed?
When thinking of speed optimization for Shopify, the first thing that you need to check is the ongoing trend of your site’s speed.
It’s imperative to measure website speed not just for desktops but also for mobile users. Here’s an interesting finding from Skilled based on multiple studies:
64% of mobile users expect a website to finish loading within four seconds, whereas 47% of online shoppers expect a website to finish loading within just two seconds.
Now, there are different ways to check your Shopify store’s speed score. Let’s take you through a couple of important methods:
Check Your Store Speed through The Shopify Admin
You can view your store speed within Shopify Admin by following these steps:
1. Go to Shopify Admin and click on Online Store > Themes. Above the current theme section, you’ll be able to see your store’s Speed score for the last 7 days and how it is (good/slower) as compared to other similar stores on Shopify.
2. For a more detailed report, click on the tab above the current theme that displays the Speed score. You’ll be able to view the detailed report with:
- Page type wise report
- Speed score over time (in the last 7 days/30 days)
- Day-wise score with events
Shopify's score is based on Google Lighthouse performance metrics, which are as follows:
- 90 to 100: Good
- 50 to 89: Needs Improvement
- 0 to 49: Poor
Test Your Store Speed with PageSpeed Insights
Google’s PageSpeed Insights is one of the most popular tools to analyze the speed of your store. In 2018, Google announced that Pagespeed Insights would be powered by Lighthouse. So, you can get the Lighthouse analysis within the PageSpeed Insights tool.
How to use PageSpeed Insights:
1. Go to Google’s PageSpeed Insights tool
2. Enter the URL of your webpage
3. Click on the Analyze button
Now, let’s take the example of the same Shopify store which has a speed score of 31 as per Shopify’s Online store speed report.
As you can see above, it gives an overall idea of the Performance, Accessibility, Best Practices, and SEO scores of your website - for both mobile as well as desktop versions.
Read more About PageSpeed Insights
11 Effective Ways to Improve Your Shopify Store Speed
Before we jump on to the different ways to optimize your Shopify store speed, it’s important to know that there are many factors that affect Shopify page speed, and not all of them could be under your control.
So, these factors are divided into two major categories:
- Issues with your customer's device, network, or location
- Shopify's infrastructure
- Local browser cache and server-side cache
- The assets inside the content_for_header Liquid object
- Content delivery network (CDN)*
- *Note: Although this is a non-controllable factor for most Shopify store owners, if you use GemPages, you can eliminate this problem. GemPages is partnered with UploadCare & AWS to speed up your content.
- Shopify Apps and their features
- Themes and their features
- Complex or inefficient Liquid code
- Images and videos
Now, let’s see how to improve Shopify store speed based on the controllable factors, using some of the best practices:
1. Remove Shopify Apps You Don’t Use
Shopify apps are essential. They help add features, enhance the style and improve your store performance.
But having too many apps can slow down your site speed. Especially customer-facing apps, which are used to display information on your web pages, can impact your store speed.
So, ask yourself a question - Do you really need all the apps that you installed?
And then, keep all the must-have Shopify apps. Re-evaluate the ones that just add bells and whistles, if any. And remove the ones that are not adding any value to your business but just adding some lines of code to your website.
2. Install A Fast Loading, Responsive Theme for Your Shopify Store
Choosing the right theme for your Shopify store has to be one of the most critical and well-thought-out decisions. Why? Because your Shopify theme is one of the key factors influencing your site speed and you don’t change your theme every day.
Here are some of the things to consider while choosing your theme-
- Balance between style and performance:
While speed is obviously an important factor, the fact is, you also need to consider the theme that matches the brand style and content requirements. Check out demo stores for style and reviews for speed and performance. Make sure your theme is fully responsive on all devices.
- Try and test your theme:
Before you finalize your theme, you must test if it meets your expectations, especially when you’re buying a paid theme. The good thing about the Shopify theme store is you don’t need to buy the theme until you publish it.
And if you’re looking for a free theme, Shopify has recently launched many free themes with Online Store 2.0 capabilities. Dawn is one of the free themes that focus on speed and it was built to create a great experience on all browsers.
Dawn Shopify Theme
- Install the latest and licensed version:
This may seem obvious but still, some new Shopify store owners make this mistake. If you’re hiring someone to create and design your store, make sure that they install the latest version of the theme and not an outdated or pirated copy of a premium theme.
- Upgrade your theme:
Check the theme developer change log at regular intervals and upgrade your theme whenever there are any major updates are launched.
3. Optimize Images and Videos Before Uploading
Images and videos help you express your brand’s message and emotions.
While you would love to make your website and content look rich with images and videos, you also need to be mindful of how they can impact your store’s speed.
Recommended image formats
Use Image Format Converters:
If you do not have images in WebP format, you can use a WEBP Converter like CloudConvert.com to convert your PNG or JPG images into WEBP image files.
Using JPG to WebP Converter, four JPG images with a total size of 830 KB were reduced to a total size of 327 KB.
Compress and Resize Images:
If you want to use JPG or PNG file formats but the image files that are too big in size, it can impact your page load speed. It’s highly recommended to compress or resize images whenever needed. To compress PNG images, you can use online tools like compresspng.com and compressjpeg.com for JPG images.
First, let's see the basics. There are two ways to upload videos for your products in Shopify:
1. Upload a video file
2. Embed a YouTube or Vimeo video link
An embedded video on the Blog page
For uploading a video, here are the Shopify criteria:
- Video length: Up to 10 minutes
- Video size: Up to 1 GB
- Video resolution: Up to 4K (4096 x 2160 px)
- Video file type: .mp4 or .mov
However, we recommend embedding YouTube videos because it won't require meeting these criteria and it'll also help you optimize your store speed.
4. Use a System Font
Many of us would love using specific fonts. But keep in mind that you may have to compromise your page load speed when your favorite fonts are not that common.
When a customer is browning your website, and you’re using a font that’s not pre-installed in the customer’s device, the system will have to download the fonts to display the texts.
Technically, this would just take a fraction of a second but it still impacts the page load speed. So, if your Shopify store speed is your priority, consider using the system font only.
System fonts help enhance the page load speed as they’re available on most systems worldwide, and thus, it eliminates that little step of downloading the font. Below are the examples shared by Shopify as to which fonts could be displayed when you choose a system font family:
- Mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console
- Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue
- Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro
5. Use a Hero Banner Instead of a Slideshow
At the top of a website homepage, usually, there are two types of sections:
1. A slideshow (a.k.a slider or carousel), that displays constantly changing images, either automatically or manually. OR
2. A Hero banner, which is a single static image.
As a Shopify store owner, you might have that tempting urge to add a slideshow with multiple images to cover everything that your business has to offer.
But is it a good idea to display a slideshow on your website?
Well, for your site speed and user experience, it could be a not-so-good idea. Since the slideshow uses multiple image files, it can increase the overall page load time and slow down your website.
YouSea uses a hero banner image instead of a slideshow, and it not only avoids distractions but also makes it easy for the home page to load.
6. Reduce Redirects and Broken Links
Redirect is a technique to send website visitors to a different URL instead of the original one that the visitor entered or clicked on.
Redirects can be helpful in many scenarios such as when you need to move a page from one URL to another one, delete a page, move the website to a new domain, merge duplicate web pages, etcetera. Also, redirects can be helpful to connect high-ranking pages with newly created content.
The only issue is that redirects can impact your store’s speed. Similarly, if your website has too many broken links, it can become a barrier to optimizing your store speed. You must fix the broken links and reduce redirects to achieve your desired speed score.
7. Organize All Your Tracking Codes with Google Tag Manager
Google Tag Manager is a solution that lets you manage and deploy different snippets of code on your website. By doing this, it allows you to transfer tracking information from your website to Google Analytics.
Note: It is to be noted that Google Tag Manager is NOT available on all Shopify plans but only on the Shopify Plus plan. You can learn more about considerations for the usage of Google Tag Manager on Shopify.
8. Consider Using Lazy Loading
Lazy loading is a technique to enhance your site's speed by slowly loading images or media files when a customer scrolls down a page. This ensures that any non-critical resources are not immediately loaded but only when they’re actually needed on the web page.
When you're using lazy-loading content, the browser would require fewer resources and it boosts the page load time. This can also provide a better user experience to your customers and help with SEO as well.
If you’re using the GemPages page builder, this feature is available out-of-the-box on all paid plans, starting from $29/month.
9. Make Your Page Lightning Fast with AMP
AMP stands for Accelerated Mobile Pages. It is an Open Source Project, originally created by Google, to optimize mobile web browsing and make it faster.
You can use AMP to speed up your Shopify site and there are two ways to do this:
1. Create AMP with custom coding
This method requires sound technical knowledge because it’s quite complex to create AMP through custom code. It requires adding alternate liquid templates and you can find more information here: How to Use Alternate Templates in Shopify Theme Development.
You can hire a Shopify Expert or freelance developer if you are not well-versed in these technical aspects.
2. Use a Shopify app for AMP
Now, let’s talk about the much easier option and that is using a Shopify app. There are multiple Shopify apps that can help you create AMP to improve your store speed and pass Core Web Vitals.
Shopify App Store has different apps to help you create AMP. Some of the apps that we recommend are AMP by Shop Sheriff, The AMP app, and Fire AMP.
Unless you're a coder yourself, it's not advisable to experiment with these technical activities without taking the help of a Shopify Expert or a freelance developer.
11. Install Shopify Speed Optimization Apps
So, the list that started with “removing unused apps” to speed up the Shopify site, will now be concluded with recommendations of some Shopify apps that are specifically created to improve Shopify site speed.
TinyIMG is your one-stop-shop for all website performance and SEO needs.
This app focuses on enhancing the website performance with its key features that include:
- Image compression
- Search engine optimization (SEO)
- Script control
- Broken link redirects
Boost your site traffic & sales with The AMP App
The AMP app aims at helping Shopify merchants to drive more traffic through AMP and reduce the bounce rate by increasing the website load speed. Its key features include:
- Enhancing 'Core Web Vitals'
- Theme editor for customization
- Integration with metadata and JSON-LD for SEO
Swift boosts your page speed using advanced techniques.
Swift app uses artificial intelligence (AI) system for Shopify page speed optimization. Its key features include:
- Speed optimization through preloaded content
- Image compression with optimal quality
- Speed analysis and suggestion
Shopify Speed Optimization: Important Notes
1. Always Prioritize The ‘Mobile First’ Approach.
Why? Because most users browse your store with mobile devices. These stats from Insider Intelligence will give you a good idea about the importance of the ‘Mobile First’ approach:
- In 2021, retail mobile commerce sales volume was valued at $359.32 billion, i.e., 15.2% more than what was in 2020.
- What's more interesting is that the same is expected to grow more than double, i.e., $728.28 billion by 2025, which would be nearly 44.2% of retail eCommerce sales volume in the US.
2. Focus on All Important Factors for Conversion Rates
Shopify speed optimization is important. However, keep in mind that it’s just one of the many factors that contribute to improving your sales and conventions.
- While putting in your efforts to speed up your Shopify store, don’t forget the other important factors such as detailed product descriptions, social proof, compelling website copy and headlines, and so on.
- Read more on Shopify Conversion Rates: A Beginner’s Guide.
3. Be Prepped for The Future of Commerce
The future of eCommerce requires you to be prepared for enhancing the experience for mobile users. And that’s why GemPages is bringing you the Instant Landing Page (Beta) mini app!
The Instant Landing Page (ILP) is an initiative from GemPages that aims to improve your store performance, help you achieve loading speed benchmarks, and provide you with a smooth page-building experience.
But most importantly, it’s built to help you build and launch fast-loading and mobile-optimized landing pages so that you can drive sales and conversions through your mobile and social media campaigns.
Ready to Speed Up Your Shopify Store?
Now that you know what all factors can impact your Shopify store speed and how you can optimize your Shopify page speed, it’s time to get into action!
Start with measuring your ongoing speed score. See if there are areas of improvement. And if yes, analyze what needs to be worked on or improved in your Shopify store.
Throughout this blog, if you noticed, many of the factors that influence your site speed are also the factors that are required to be in your store in some form or extent. So, you can’t completely remove or change all of them, but what you can do is optimize them as much as you can.