Back to Blog List

Fast Track to Success: Optimize Your Shopify Store Speed for Peak Performance

GemPages Team
Updated:
15 minutes read
shopify speed optimization

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.

Let's explore step-by-step with us!

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

Learn more: Shopify Conversion Rates: A Beginner’s Guide

    • 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.

    Learn more: How to Set Up Google Analytics 4 (GA4) for Your Shopify Store

      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.

      Results for landing page speed in a study by Unbounce

      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.

      Statistic about mobile conversion from Think with Google

      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:

      Step 1: Open your Shopify Admin.

      Step 2: In the left sidebar, select Analytics.

      Step 3: Open Reports.

      Step 4: Click Web performance.

      Step 5: You will see the Loading Speed section. Click the Customize button to view (Largest Contentful Paint) LCP documents or loading speed reports.

      how-to-see-your-shopify-store-speed
      how-to-see-your-shopify-store-speed-report

      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

      pagespeed-insights-tool

       

      As you can see above, it gives an overall idea of the Largest Contentful Paint, Time to first Byte, etc. Also the Performance, Accessibility, Best Practices, and SEO scores of your website - for both mobile as well as desktop versions.

      Learn more: About PageSpeed Insights

      Start selling on Shopify for $1
      Start with free trial, then get your first month for $1

      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:

      Non-Controllable Factors:

      • 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)*

      Controllable Factors:

      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.

      Pro tip: Take a look at this suggested package including: Free Shopify account for the first 3 days - 1$/mo Shopify subscription (for the first month) - Free GemPages premium templates - 50% off for every Dropshipman subscription - 30-day free trial for ParcelPanel.

      shopify-apps-store

      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.

      Pro tip: Actually, Changing Shopify Themes is quite simple. Let A/b test your Shopify store over a period of time  with different themes to see which one is most suitable.

      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.

      Learn more: 10 Fastest Shopify Themes in 2024 (Free and Paid)

      • Try and test your theme:

      First of all, choose a suitable theme, such as Best Shopify Themes for Clothing Stores, Best Shopify Jewelry Themes, etc. Shopify also has themes suitable for the entire blog channel, not just the sales channel and it indeed helps drive more traffic to your store.

      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 ThemeDawn 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.

      Learn more: Top 20 High-Converting Shopify Themes for Your Store in 2024

      • Upgrade your theme:

      Check the theme developer change log at regular intervals and upgrade your theme whenever there are any major updates are launched.

      • Researching rival stores should also be on your to-do list:
      It helps you understand who you are competing with and what you need to do to upgrade your store, instead of just waiting for the big fish Shopify updating the theme. But how?  Here the two important tactics: Find out what app your competitors are using and which theme those stores are using.

      Important note: Using third-party apps is considered as a must if you want to build your Shopify store in the fastest way. Talking about the Theme, GemPages is a Shopify page builder that stands out with helpful features such as Theme section. With just a few small tricks, you can easily synchronize updates to the entire storefront thanks to this feature. Try it to see your store soar!!!

       

      Not ready to commit but still want to kick the tires?
      No problem! Get started with GemPages' free plan. Explore wonderful features that can do wonders for your store.

      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.

      3.1 Image Optimization

      • Recommended image formats
      For product and website images, our recommended format is WebP for most Shopify stores. WebP is a modern image format developed by Google to provide better compression for images that are used on the web.
      This format helps to save about 26-34% in file size as compared to PNG and JPEG. Thus, making web browsing faster.
      Other than that, JPG and PNG images are fine if you’re not able to use WebP images. For logos or icons, use SVG format if you can.
      • 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.

      CloudConvert’s JPG to WebP Converter tool

      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.

      3.2 Video Optimization

      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

      Video embedded on Blog page
      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. Optimize CSS, JavaScript, and HTML

      By seeing the technical terms like CSS, JavaScript, and HTML; you probably already have an idea that things are getting technical here.

      Briefly talking, you can minify your store's CSS and JavaScript to optimize your Shopify store speed. Using online tools like CSS Compressor and JavaScript Minifier, you can compress your store's CSS and JavaScript.

      However, this entire activity would require you to download the CSS and JavaScript files from your store and replace them with compressed files.

      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.

      5. Use a System Font

      A lot of people enjoy using particular fonts, but it's important to consider that opting for less common ones could slow down your website. If a visitor doesn't have the font installed on their device, it has to be downloaded, which only takes a moment technically, but it does affect the overall speed of the page load.

      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

      Learn more: Shopify Fonts 101: How to Find the Best Font Combinations for Your Shopify Store

        6. 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’s hero banner image

        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.

        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.

        8. 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.

        Important note: Google Tag Manager is available to all Shopify stores with custom web pixe. You can learn more about considerations for the usage of Google Tag Manager on Shopify.

        9. 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 on all plans. Let's Speed up your page loading time.

        10. 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:

        • 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.

        • 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 with AMP apps

        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.

        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.

        SEO, Speed & Image Optimizer

        SEO, Speed & Image Optimizer Shopify App
        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

        The AMP app

        The AMP Shopify App

        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 ‑ Page Speed Optimizer

        Swift - Page Speed Optimizer Shopify App

        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
        • Minifying CSS, JavaScript, and HTML
        • Speed analysis and suggestion
        Boost the speed of Shopify store with GemPages
        Don't let your visitors wait. Optimize your Shopify store speed today, and watch the quality of user experience go right up.

        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.

        tips to speed up mobile site

        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 Prepared for The Future of eCommerce

        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.

        Important note: GemPages' is now offering Mother & Father's Day promotion: 20% Off Monthly Plans. It is exclusively for first-time GemPages users! From April 1 to June 30, 2024, UTC. Grab it now!!!

        Hot Deal: 20% Off Monthly Plans
        Exclusively for first-time GemPages users! From April 1 to June 30, 2024, UTC. Grab it now!!!

        FAQs about Shopify Speed Optimization

        What is a good Shopify store speed?
        Shopify's score is based on Google Lighthouse performance metrics. A good Shopify speed score is anywhere over 50, speed scores over 90 are awesome.
        How do I test my Shopify speed?
        You can test your Shopify speed through Google’s PageSpeed Insights tool. Also, you can check your Shopify speed score directly from Shopify Admin by going to Online Store > Themes, and you’ll see the score right above the current theme section. Learn more How to Measure Shopify Page Speed.
        What affects the speed score on Shopify?
        The are several factors that affect Shopify's speed score including:

        Controllable factors: Shopify apps, images, videos, fonts, and your theme.
        Non-controllable factors: Customer's device, network, location, Shopify infrastructure, Content delivery network (CDN), and so on.
        Topics: 
        Conversion

        Start selling on Shopify

        Start with free trial, then get your first month for $1.

        Start free trial
        Shopify Sign Up Shopify Sign Up