Page speed optimization is an integral part of technical SEO. Today, we’ll show you how to define what slows down your Shopify store and improve your online store’s page speed.
Overview
Part I: Introduction to page speed optimization
- What is page speed and how does it differ from site speed?
- Why should you optimize your Shopify store’s page speed?
- Factors that affect your Shopify store’s page speed
Part II: The basics of page speed optimization for Shopify
- Built-in performance features in Shopify
- The Shopify Online store speed report
- Troubleshooting tools
Part III: How to optimize your Shopify store’s page speed?
- Choose the right theme for your Shopify store
- Choose the right font
- Assess the apps you have installed
- Simplify your homepage design
- Optimize collections and filtering
- Minimize redirects
- Minimize broken links
- Optimize your images
- Optimize your video content
- Implement AMP
- Avoid excessive DOM size
- Remove unnecessary HTTP requests
- Unblock the browser from parser-blocking scripts
- Organize your tracking code with Google Tag Manager (For Shopify Plus merchants only)
- Optimize your code
Part IV: Bonus section
Part V: Final thoughts
What is page speed and how does it differ from site speed?
Page speed (or page load time) is the time it takes a page to properly load. Google recommends that page load time is under two seconds. Site speed is a metric that represents the overall performance of your website.
Why should you optimize your Shopify store’s page speed?
Your Shopify store’s page speed is important for several reasons:
- It affects your customers’ shopping experience. A faster website = a better shopping experience. A better shopping experience = higher user engagement, increased customer satisfaction, and lower cart abandonment rates.
- It impacts your customers’ buying decisions.
- It affects your conversion rate.
- The highest ecommerce conversion rates occur on pages with load times between 0-2 seconds.
- Website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5).
- Website conversion rates drop by an average of 2.11% with each additional second of load time (between seconds 0-9).
Source: HubSpot, 12 Statistics That Show How Page Load Time Impacts Conversion Rate
- It affects your bounce rate.
As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%. Source: Google/SOASTA Research
- Page experience is a ranking signal. Therefore, page speed affects your ranking and your Shopify store’s discoverability. Source: Evaluating page experience for a better web
- Page experience affects your website’s accessibility and its overall performance.
Factors that affect your Shopify store’s page speed
A number of factors affect your Shopify store’s page speed.
Some of these factors are beyond your control. Such factors include your customers’ device, internet connection, browser, location, etc. The Shopify infrastructure (e.g., servers, CDN (Content Delivery/Distribution Network), browser cache, server-side cache, etc.) is also outside of your control.
Other factors you can control. For example:
- Your Shopify store’s theme
- The font you choose for your store
- The apps you have installed
- Your homepage design
- The organization of your collections and filtering options
- The number of redirects and broken links on your website
- Your images and video content
- Whether you have implemented AMP (Accelerated Mobile Pages)
- DOM size
- The number of HTTP requests
- Parser-blocking scripts
- Unorganized tracking code
- Inefficient or useless Liquid code
- Unoptimized JavaScript and CSS files
We’ll have a look at each of the factors you can control in Part III of this guide - How to optimize your Shopify store’s page speed?
First, let’s dive into the basics of page speed optimization for Shopify. We’ll discuss built-in performance features, the Shopify Online store speed report, and the tools that can help you identify page speed issues.
Built-in performance features in Shopify
- Shopify is fast out of the box. Thanks to its cloud-based infrastructure, Shopify Plus has a 99.98% overall uptime. Compared to BigCommerce, Shopify Plus storefronts load 2.97 times faster (source: BigCommerce vs. Shopify Plus). Also, Shopify’s new infrastructure upgrade - Storefront Renderer (SFR) - accelerates site speed even further.
- Shopify hosts your website on fast, reliable, and scalable servers with unlimited bandwidth. Thus, ensuring your website performs well even on high-traffic and high-transaction days. Learn more about Shopify hosting → Shopify, Unlimited web hosting, worldwide
- Shopify provides world-class dual CDNs powered by Fastly. A CDN is a group of servers (dispersed at strategic locations around the world) that distributes the content delivery load (e.g., images, JavaScript or CSS files, etc.) through the server located closest to the visitor’s location. This increases your store’s page speed and helps you deliver a better shopping experience.
- Shopify automatically sets local browser caching for cacheable resources (e.g., images, pdfs, JavaScript and CSS files, etc.). In this way, the resources can be stored within the browser of users who have visited your store once. As a result, upon their next visit, your website will load much faster.
- In 2020, the theme engine (the engine that translates theme.liquid files into HTML) was rewritten, which “accounts for a 40 to 200 percent improvement in load times on live stores” (source: Shopify, Everything We Announced at Shopify Reunite 2020, Performance).
- Shopify is constantly improving its code and infrastructure. So, in the future, we can expect even more (and better!) performance features!
The Shopify Online store speed report
In July 2020, Shopify introduced the Online store speed report (source: Shopify Developer changelog, Measure storefront performance with new Online store speed report).
To access the Online store speed report, open your Shopify Admin panel > Analytics (left sidebar menu) > Reports > Behavior > Show All > Online store speed.
Your Online store speed report evaluates your website’s performance compared to best practices, industry standards, and similar Shopify stores.
It gives you a speed score (based on Google Lighthouse performance metrics) and a speed ranking (which tells you if your store is slower, faster, or has the same speed as similar Shopify stores). Also, you can see how your speed score changed over time (over the past 7 or 30 days).
In addition, you have access to resources that can help you improve your store speed.
What does the Shopify speed score mean?
Your speed score is a number between 0 and 100. It measures how your store performs in the Shopify test environment, based on Google Lighthouse metrics.
Your speed score is based on the average of the Lighthouse performance scores for your homepage, the product page with the most traffic over the last 7 days, and the collection page with the most traffic over the last 7 days. Since 60% of Shopify sales are from mobile devices, Lighthouse runs reports on the mobile versions of these pages. This is why it’s essential that your Shopify store is optimized for mobile. Learn how to optimize your website for mobile devices: Mobile usability: 10+ ways to deliver a stellar mobile shopping experience
In general, the higher your speed score is, the better. For example, a score above 70 means that your online store is perceived as fast by the wide variety of customers who access it. A lower score could mean that your online store isn’t as accessible to customers who have slow devices or poor internet connection.
Your speed score is calculated every day and can frequently change. For example, optimizing your images, or minifying your code may raise your score (note that it may take some time for the changes to be reflected). On the other hand, if a competitor makes improvements to their online store, your score could lower in comparison (even if you haven't made any changes to your store). Note that the higher your score is, the harder it is to improve it. Of course, it is borderline impossible to achieve a score of 100.
I don’t have a speed score. Why? If your Shopify store is password-protected, Lighthouse won’t be able to access it, and you will not see a speed score in your Online store speed report. Also, a score might not appear if you’ve just removed your online store password or your store hasn’t had any traffic in the past 7 days. Learn more → Shopify, Online store speed report, Frequently asked questions
Important: Your speed score is not the same as your speed ranking! Your speed ranking indicates how your website performs compared to similar Shopify stores, i.e., it tells you if your website is slower, faster, or has the same speed as similar stores. A similar store is a store that has approximately the same number of sales, similar number and types of products, similar number of apps, etc.
What does the “Speed score over time” section mean?
The “Speed score over time” section consists of a chart (that shows how your speed score has changed over the past 7 or 30 days) and a table (that lists your speed score on different days over the selected time period). Speed scores are recalculated every day at 9:00 am UTC.
Note that the table in your “Speed score over time” section contains events - app installs or uninstalls - that happened each day. This information is important because app-related events can directly impact your speed score. For example, if you install an app and notice a drop in your speed score, you can instantly weigh the benefits of the app against the effect it has on your store’s performance. If the benefits of the app don’t outweigh the impact on your store’s speed, you should remove it.
Need more information about the Online store speed report?
Check Shopify’s detailed documentation → Online store speed report
Troubleshooting tools
In this section, we’ll have a look at some of the best tools that can show you what slows down your website:
Google PageSpeed Insights (PSI)
Google PSI is a free tool that analyzes the performance of your web pages on desktop and mobile devices. Also, it gives you actionable tips on how to improve them.
PSI provides:
- A performance score determined by Google Lighthouse. Note that your Google PSI performance score may differ from your speed score in the Shopify Online store speed report. Why? Even though both reports use Google Lighthouse metrics, the Shopify Online store speed report uses the Shopify test environment to calculate your score. This means that your website is compared only to Shopify stores instead of a wide range of various websites. Note: Your goal is to reach a score above 90 - this is what Google considers a good performance score. If your score is below 50, you must make immediate improvements.
- Lab data about your web pages - based on a simulated load of a page with a fixed set of conditions; useful for debugging performance issues. If available, PSI reports First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, and Total Blocking Time. Each metric is scored and can be classified as Good, Needs Improvement, and Poor.
Learn more about Google PSI → About PageSpeed Insights
To test your store’s speed with Google PSI, open Google PageSpeed Insights > Paste your store’s URL in the “Enter a web page URL” field > Click “Analyze.”
GTmetrix
With GTmetrix you can test your Shopify store’s speed in different countries, on different browsers, connection speeds, and more. You get detailed performance reports. For example, you can track your store’s performance over time, set up alerts and get notifications when your website doesn’t perform well, see how your page loads on different devices, and more.
To test your Shopify store’s speed with GTmetrix, add your store’s URL (or the URL of a particular web page) in the “Enter URL to Analyze” field > Click “Test your site.”
You can start using GTmetrix for free and choose the plan that meets your needs later on.
Pingdom
Pingdom is another tool that lets you test and analyze your Shopify store’s load speed. It uses over 70 global polling locations and offers reliable uptime and performance monitoring of your website.
To test your store’s page speed, open Pingdom > Enter your store’s URL (or the URL of a particular web page) in the “URL” field > Select a testing location from the “Test from” dropdown > Click “Start test.”
You can mix and match Pingdom’s capabilities to fit your monitoring needs and choose the best pricing plan for your business.
The Shopify Theme Inspector for Chrome
The Shopify Theme Inspector for Chrome identifies changes in your theme.liquid that slow down your Shopify store. It provides a visualization of Liquid render profiling data and helps you identify, prioritize, and fix the slowest parts (down to the exact file and line of code) of your theme.
When you install the extension, you will be able to sign in with your Shopify credentials and see a “Shopify” panel in Chrome DevTools.
Learn more about the Shopify Theme Inspector → Shopify Theme Inspector for Chrome
Important!
If you’re not familiar with Shopify Liquid or are not comfortable reading and editing code, it is best to avoid using the Shopify Theme Inspector for Chrome. Instead, consider contacting a Shopify Expert who can help you use the tool and improve the performance of your Shopify store.
Important!
Optimizing your Shopify store’s speed requires technical knowledge - completing some of these steps requires a good understanding of HTML, CSS, JavaScript, and Shopify Liquid. If you don’t have such expertise, consider contacting a Shopify Expert who can implement the changes for you.
If you’re tech-savvy and will implement the changes yourself, make sure to backup your theme before you begin. To backup your theme, open your Shopify Admin > Online store > Themes > Actions > Download theme file.
Choose the right theme for your Shopify store
Shopify themes are made up of Liquid, HTML, CSS, and JavaScript code. Theme file sizes, features, fonts, etc. affect your store’s speed.
Your Shopify theme should be:
- Responsive. In 2022, with mobile traffic accounting for 54.86% of all traffic (source: statcounter, GlobalStats), this is self-explanatory.
- Lightweight. Choosing a fast and lightweight theme will give you a huge advantage from a performance standpoint. According to GoFishDigital - a company that tested over 200 Shopify themes - the best-performing Shopify themes are Toy, Warm, Light, and Outdoors.
- Up-to-date. Outdated Shopify themes may contain outdated JavaScript libraries which can negatively affect page speed.
Pro tips
- To optimize the performance of your theme even further, disable all theme features you don’t use. Learn more → Improving your online store speed, Theme or app features
- Before choosing a theme for your Shopify store (or changing your current theme), run its preview page through Google PageSpeed Insights. This will give you a better idea of the theme’s performance.
Choose the right font
There’s one rule of thumb when it comes to fonts and page speed optimization - use a system font. System fonts are installed on most computers. This means that your font doesn’t have to be downloaded to a customer’s computer when the customer visits your website (which means your page will load faster).
System fonts are classified as mono, serif, or sans-serif. Each of these font families consists of different fonts:
- Mono: Consolas, Liberation Mono, Lucida Console, Menlo, Monaco.
- Serif: Apple Garamond, Baskerville, Droid Serif, Iowan Old Style, Source Serif Pro, Times, Times New Roman.
- Sans-serif: BlinkMacSystemFont, Helvetica Neue, Roboto, Segoe UI, Ubuntu.
Shopify recommends using the following fonts: Courier New, Garamond, Lucide Grande, Monaco, Palatino, Times New Roman, and Trebuchet MS.
Of course, you can choose to use a different font for your Shopify store. You need to keep in mind that if the font is uncommon, it could take more time for your pages to load (as the font will first have to be downloaded to your customers’ computers).
There might be a way around this. For example, if you want to use an uncommon or a custom font, you can load the page with a default font (for a faster load time) and switch to the custom font once the customer’s browser has finished downloading it. This is possible thanks to the font-display: swap property. Its setup requires code editing, so you must be familiar with CSS and Shopify Liquid (or outsource the task to a Shopify Expert).
Assess the apps you have installed
Shopify apps are great - they can make your store more appealing, help you deliver a better shopping experience, increase user engagement, boost sales, etc. To change the functionality or the appearance of your store, apps add code to your theme. In some cases, this code may slow down your website (especially if it is not properly formatted).
So, to improve your store’s page speed:
- Go through the apps you have installed. Remove all apps you don’t use. Remove all residual code. If needed, contact the app developer and request help. Removing unnecessary apps is an effective way to reduce the number of HTTP requests.
- Assess all apps you use. Ask yourself if it is worth keeping them - how do they help you run your business? If an app works properly, but you don’t use it as frequently as you thought you would, weigh the benefits of keeping it - remember that all apps run in the background and affect your store’s speed.
- Before installing a new app, ask yourself if you really need it. As always, you must be mindful of the balance between features and speed.
- Regularly monitor your apps’ performance and their effect on your website’s performance. If you notice that an app you use slows down your website, it’s best to evaluate it and decide if it is worth keeping.
Learn more → Shopify, Working with apps
Simplify your homepage design
To simplify your homepage design and reduce page loading time:
- Eliminate unnecessary sections. Instead of posting huge chunks of content, give customers a preview and a “View more / Read more / Learn more” link. Note: In Shopify, you can’t add more than 25 sections on your homepage.
- Consider removing social media feeds and widgets. Instead, implement them on other strategic locations across your website (e.g., your category pages).
- Use one hero image instead of a slider. Even though sliders are a great way to show off your products and engage your customers with different offers, they can negatively impact your page speed. The more images the slider contains, the more significant the impact is. To avoid this issue, you can use a single high-quality hero image. Focus on crafting the perfect offer with a clear CTA. Presenting your products in the best light is a must - your hero image should create a need and entice your customers to explore your products. Also, you can frequently change your hero image to promote different products. Still, if your heart is set on a slider, ensure to follow UX best practices, use a maximum of three slides, and implement lazy loading.
- Leverage heatmaps. This will help you understand your customers’ behavior patterns and optimize your homepage for speed, engagement, and conversions. You can use a Shopify app such as Lucky Orange Heatmaps & Replay (⭐⭐⭐⭐+, 700+ reviews, free plan available, $10 - $50 / month, 7-day free trial).
- Simplify and improve your homepage navigation.
If needed, consult with a Shopify Expert who can implement the changes.
Optimize collections and filtering
- The best practice is to create smaller and more specific collections with fewer products. The best part is that Shopify has already taken care of this - you can’t add more than 50 products on a collection page.
- Create only relevant filters and try to keep them to a minimum. The more filters you have, the longer it will take the page to load.
- Use pop-ups sparingly. Pop-ups are a great way to display more product details on collection pages. This should help customers decide if they’re interested in the product and provide a better shopping experience. However, it can significantly slow down your website if the pop-up preloads the entire information the product page contains. You can use a heatmap tool to define if your customers are using the “Quick view” feature (that triggers the pop-ups). If they don’t use it as much as you thought they would, remove it. If you want to use pop-ups (and your customers love the feature), you can save a limited set of product information as data attributes on the product grid item, and build the HTML and pop-up dynamically with JavaScript. If you’re not tech-savvy, consider contacting a Shopify Developer.
Minimize redirects
Redirects trigger additional HTTP requests and delay data transfers. To minimize the number of redirects on your website (and their impact on your store’s speed):
- Don’t redirect pages to pages that are redirects.
- Delete unnecessary redirects. Learn more → Shopify, URL redirects, Manage your URL redirects
Minimize broken links
Similar to redirects, broken links increase the number of HTTP requests (which affects your Shopify store’s speed).
To minimize broken links (and their impact on your website’s performance and your customers’ shopping experience):
- Use a site audit tool like Ahrefs’ Broken Link Checker to detect and fix broken links.
- Create custom 404 pages that assist visitors who have accidentally entered (or followed) an incorrect URL.
Optimize your images
Shopify automatically adds safeguards to prevent store owners from overloading their websites with visual content (images and video). Remember that you can’t have more than 50 products on a collection page and more than 25 sections on your homepage. Also, many themes load a specific image size based on the size of the screen the image is displayed on or defer loading images that are not currently displayed on the screen. Learn more about lazy loading in Shopify → How Lazy Loading can Optimize Your Shopify Theme Images
If your theme doesn’t implement lazy loading by default, you can easily install it:
- Download the lazysizes.js library to your theme’s assets folder
- Include the lazysizes.js library in your theme.liquid <head> tag
- Update your image tags - swap the src attribute to data-src
- Add the lazyload class (e.g., <img data-src="IMAGE_URL" class="lazyload">)
If you’re not familiar with Shopify Liquid and don’t feel comfortable editing code, contact a Shopify Expert who can implement the changes for you.
To further optimize your images in Shopify:
- Reduce their number
- Compress them
- Write descriptive file names
- Write descriptive alt tags
Reduce the number of images on your Shopify store
This step is straightforward - remove all unnecessary images (e.g., similar product photos, outdated product images, outdated banners, etc.) from your website. This will significantly speed up your store as each image creates an HTTP request, i.e., by removing unnecessary images, you’ll reduce the number of unnecessary HTTP requests.
Also, check your code for empty image sources (<img src = ‘ ’>). They create HTTP requests as well, so it is best to remove them.
Compress your images
Here’s what you need to know about image sizes in Shopify:
- Your product images and collection images can be any size up to 4472 x 4472 px (or 20 megapixels).
- Your product images and collection images must be smaller than 20 MB (otherwise you won’t be able to upload them to your Shopify store). A good rule of thumb is to keep your images below 70 kb.
- For square product images, a size of 2048 x 2048 px looks best.
Source: Shopify, Product media types, Images
Also, keep in mind that file types affect the size of your images. According to Shopify, the best image file type is PNG (30 kb - 100 kb), followed by JPEG (approximately 30 kb), and GIF (approximately 35 kb). Other accepted file types include PSD, TIFF, and BMP - note that these file types are converted to JPEG or PNG when you upload them to Shopify.
In general, higher image resolution means a better shopping experience. However, it also means a larger size. Of course, you already know that a larger size leads to an increased page load time.
This is why you must compress your images. One of Shopify’s built-in SEO features is that it automatically compresses your images. However, you can still use an image compression tool to achieve even better results. Here are some of the best options:
- Shopify’s free online image resizer
- Smart SEO (⭐⭐⭐⭐⭐, 880+ reviews, free plan available, $9.99/month - $29.99/month, 7-day free trial)
- The “Save for Web” command in Photoshop - Note that you should reduce the image size without compromising its quality
- Photoshop Express - Adobe’s free image editing app for smartphones and tablets which offers all basic image editing features
- Canva - A free online photo editor with advanced features (including an image resizer)
Write descriptive image file names
- Do not use default image names such as IMG1001.jpg - they are generic and do not provide SEO value. In addition, since Google won't understand what this image is about, it is highly unlikely that it will appear in Image results. Instead...
- Create short and descriptive image file names. Include keywords. For example, if the image is of a black leather Biker jacket and the target keyword is “Biker jacket”, the image file name should be “Black-Leather-Biker-Jacket.jpg” or “Black-Leather-Biker-Jacket.png” (depending on the image file type).
- Separate the words with dashes (“-”), not underscores (“_”).
- When naming your image files, think of how your customers look for similar products - what keywords or keyword phrases they use, in what order, etc. You can use Amazon’s autocomplete feature to define the search patterns.
Once you upload an image to Shopify, you can’t change its file name. If you want to change an image file name, you have to delete the image from Shopify, rename it, and upload it again. Therefore, the best practice is to make sure that the file name of an image is optimized for search before you upload the image to Shopify.
Write descriptive image alt tags
Alt tags (also called “alt attributes” and “alt descriptions”) are HTML attributes applied to image tags. The alt tag of an image describes what the image is about, i.e., it provides a text alternative to the image.
Alt tags give search engines information about the images they are applied to, i.e., they help search engines understand and categorize your content. Also, they help search engines define the relevancy of a web page.
But alt tags are first and foremost a principle of web accessibility - since they’re read by Screen Readers, they make your website more accessible to visually impaired customers.
This is why it’s important that you create descriptive alt tags that implement relevant keywords.
To change the alt text of a product image (or add alt text to a product image), open your Shopify Admin Panel > Products > All products > Select the product you want to edit > Hover over the product image which alt tag you wish to edit > Click on the “ALT” icon > Edit or enter your new alt text in the “Image alt text” field > Click “Save”
Image source: Shopify
Optimize your video content
- By 2022, 82% of all online content will be video content (source: Cisco).
- Video generates 1200% more shares than text and images combined (G2 Learn Hub). In fact, 92% of mobile video viewers share videos with others (Social Media Week).
Video is on the rise. It is only logical that you create more video content and upload it to your Shopify store. However, if video content is not embedded properly on your website, it can significantly increase page load time. To optimize your video content:
- Host your videos on external sources such as YouTube and Vimeo.
- Use lite embeds - This can reduce the size of your web pages by almost 1 MB. The standard embed code from YouTube requires some files to be downloaded even before your customers play the video. This may slow down your website. To avoid it, you can use lite embeds. In this way, when the page loads, the site only embeds the thumbnail image of the YouTube video, and the video itself (including all JavaScript code) loads only if the customer clicks “Play.” Learn more → Lite YouTube Embeds - A Better Method for Embedding YouTube Videos on your Website
Implement AMP
AMP (Accelerated Mobile Pages) is an open standard framework designed to speed up the mobile version of your website. Learn more → How Google’s AMP Project is Changing the Mobile Web
You can use the following Shopify apps to generate AMP pages for your Shopify store:
- AMP by Shop Sheriff (⭐⭐⭐⭐⭐, 520+ reviews, $9/month - $99/month, free plan available)
- Fire AMP (⭐⭐⭐⭐+, 160+ reviews, $7.99/month, 15-day free trial)
- AMP by Ampify Me (⭐⭐⭐⭐+, 400+ reviews, $9.99/month - $29.99/month, free plan available)
Avoid excessive DOM size
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. Source: Wikipedia, Document Object Model
In layman’s terms, DOM size refers to the amount of HTML code required to display your web pages. A large DOM size can slow down your website because it affects network efficiency, load performance, runtime performance, and memory performance.
To optimize your store and ensure it performs well, Google recommends the following:
- Web pages should have no more than 1,500 nodes
- Web pages should be no more than 32 nested levels deep
- Web pages shouldn’t have parent nodes that have more than 60 child nodes
Essentially, this means that you should aim to simplify your web pages. You need to assess which sections and widgets you need and which are nice-to-have.
Remove unnecessary HTTP requests
So far, we’ve mentioned HTTP requests (and how you can minimize them) several times.
To streamline the process of removing unnecessary HTTP requests, use the HTTP Requests Checker. This tool will tell you how many requests your web pages make to fully load. Then, you can use the insights to implement some changes and improve your website’s performance.
You can reduce HTTP requests by:
- Compressing your images
- Removing unnecessary images or page elements
- Minimizing redirects and broken links
- Combining and inlining your CSS and JavaScript files
- Simplifying the design of your website
- Minimizing the number of social buttons
Learn more → How to make fewer HTTP requests
Unblock the browser from parser-blocking scripts
In order to display a page, a browser must parse the page’s HTML code. Parser-blocking scripts can interrupt this process - when a browser encounters such a script, it has to pause the parsing process and run the parser-blocking script before it can resume parsing the HTML. To avoid this, you can use the “defer” attribute. For example:
- Parser-blocking: <script src="jquery.js"></script>
- Not parser-blocking: <script src="jquery.js" defer></script>
Organize your tracking code with Google Tag Manager (For Shopify Plus merchants only)
Collecting customer data is essential to your e-commerce success. But tracking code can slow down your Shopify store. That is, of course, if it isn’t organized with a TMS (Tag Management System) like Google Tag Manager.
Google Tag Manager is a free tool that helps you manage all your tracking code (and analytics) in one place. Also, it loads JavaScript files asynchronously, which means it doesn’t block the rendering of your content.
Note that Google Tag Manager is not available to all Shopify merchants - it’s available only to Shopify Plus stores.
To use Google Tag Manager, you must:
- Have access to the checkout.liquid file
- Use Shopify's integration for Google Analytics and Facebook Pixel
- Copy the code snippets that are provided by Google Tag Manager into your theme.liquid and checkout.liquid theme files
Learn how to add Google Tag Manager to your Shopify Plus store → Shopify Help Center, Google Tag Manager
Optimize your code
Important!
The steps described in this section require expert knowledge of Shopify Liquid, HTML, JavaScript, and CSS. If you don’t feel comfortable editing code, contact a Shopify Expert who can implement the changes for you.
To optimize your code:
- Run the Shopify Theme Inspector for Chrome and identify inefficient or useless code, i.e., the code that is slowing down your Shopify store. Remove this code.
- Merge all CSS stylesheets into one file. In your theme's asset folder, create a new file called application.scss.liquid. Paste the content from all stylesheets into this file. Remove all old stylesheet link tags from your theme.liquid. Add your new main file to your theme.liquid.
- Merge all JavaScript files into one file. In your theme's asset folder, create a new file called application.js.liquid. Paste the content from all JavaScript files into the new file. Remove all old JavaScript from your theme.liquid. Add your new file to your theme.liquid.
- Preload CSS and JavaScript.
- Minify your code, i.e., delete all unnecessary white spaces. Important: Don’t minify your theme.scss.liquid file - Shopify automatically mifies it. They also offer whitespace controlling tags.
- Remove complex and inefficient Liquid code. You can edit almost all of your Liquid code to improve the render time of your website. Use the Shopify Theme Inspector for Chrome to identify the exact lines of code that are slowing down your website. The Shopify Theme Inspector can also help you identify excessive Liquid loops. Liquid loops make your code slower (especially if you have more products). A looping issue can appear in several cases: advanced collection filtering and mega-navigation implementations, swatches, or paginating collections with thousands of products. To avoid looping issues, review your theme code and ensure you aren’t running liquid forloops multiple times looking for the same information.
5+ Shopify apps and tools to help you optimize your online store’s speed
Smart SEO
Smart SEO (⭐⭐⭐⭐⭐, 880+ reviews, free plan available, $9.99/month - $29.99/month, 7-day free trial). The app will help you optimize your meta tags and alt tags, fix broken links, remove microdata, and much more.
SEO:Image Optimizer,Page Speed
SEO:Image Optimizer,Page Speed (⭐⭐⭐⭐⭐, 1200+ reviews, free plan available, $29/month) is a Shopify app that will help you optimize your alt tags, preload your pages and optimize image sizes, and more.
Booster: Page Speed Optimizer
Booster: Page Speed Optimizer (⭐⭐⭐⭐⭐, 680+ reviews) is a free Shopify app that will help you make one-click page speed improvements. No coding required.
Page Speed Booster
Page Speed Booster (⭐⭐⭐⭐⭐+, 350+ reviews) is another free Shopify app that will help you boost your page speed to lower your bounce rate and increase your conversion rate. No coding required.
Page speed optimization tools
Conclusion
By now, you should know that improving your Shopify store’s page speed and performance takes time, but the changes have an almost immediate effect. It may seem daunting at first, but having the right knowledge and resources will help you immensely. Using the right tools is just as essential.
We hope this guide will give you the expertise and confidence to start optimizing your store and implement some of the changes yourself. Of course, if you’re not tech-savvy, it’s important to request help - contacting a skilled Shopify Expert who can take care of the more technical aspects of page speed optimization (such as code editing) is surely a step in the right direction!
If you have further questions, or need technical assistance, don’t hesitate to contact us or leave a comment below!
Food for thought
- Google Search Central Blog
- Chrome Developers, Optimize website speed
- PageFly Academy, How To Optimize Page Speed For Your Shopify Store: Technical Advice From CTOs (2021 Updated)
- Shopify, Online store speed
- Shopify, Online store speed report
- Shopify, Improving your online store speed
- Shopify Plus, Improve Your Ecommerce Site Performance & Speed to 2x Conversions