How to Improve Shopify Store Speed and Performance?

Introduction

Website speed becomes crucial to the success of any eCommerce project. Customers expect product pages to load fast, images to be available right away, and all navigation actions to occur instantly and seamlessly across different devices. The best-designed online stores cannot attract clients if their interaction with the site causes slow page loads or annoying issues.

Shopify merchants need to optimize the website performance to provide a good user experience, improve the store’s SEO rating, and eliminate any additional steps for customers that can cause frustration. Better site speed means better customer satisfaction and increased sales. There are many factors affecting the performance of Shopify stores, among which are themes used, size of images, third-party apps installed, analytics scripts, custom code, and content presentation methods. While Shopify takes care of most of the infrastructure needed to support the website, store owners have a significant level of control over all mentioned elements.

In this tutorial, we’ll show you how to improve the speed and performance of your Shopify store with various optimizations.

1. Measure Your Shopify Store’s Current Performance

Before making any changes, it’s important to understand what performance you’re currently getting out of your store. Using tests can help you understand which pages in your store are slow, and what technical issues are causing problems. Start by looking at your homepage, product pages, collection pages and other key landing pages. You might have a fast homepage but slow product pages due to large image galleries, reviews and extra scripts. Google PageSpeed Insights is a great place to start with. This will give you an insight into how well your site is performing on mobile and desktop, and will give you suggestions on how to improve your page speed.

Look out for the following Core Web Vitals:

• Largest Contentful Paint (LCP) – this tells you how quickly the main content appears on the page. You want this to be 2.5 seconds or less.
• Interaction to Next Paint (INP) – this tells you how quickly your page responds to interactions. You want this to be 200ms or less.
• Cumulative Layout Shift (CLS) – this tells you how much unexpected movement there is on your page. You want this to be 0.1 or less.

These are based on the 75th percentile of real user visits on mobile and desktop. Shopify also has analytics and performance features available that will give you some insight into what is happening on your store. However, lab results will not always reflect what your customers are seeing. Before making any changes, take note of your initial results.

2. Optimize Product Images

Images are an important part of any eCommerce store. Customers will use product images to understand what the product looks like, its quality and more. However, large images can cause your browser to load a lot of data. Large high resolution images that are not optimized can cause your product pages to be slow. Optimize your images by using the correct size and modern image formats. Whilst Shopify has responsive image sizing and modern formats, the images and theme will still have an impact.

Best Practice:

• Optimize your images. Use tools such as TinyPNG and Squoosh to compress your images.
• Use the correct image size.
• Use modern image formats where possible. WebP and AVIF can be used to give you smaller images.
• Reduce image duplication. Don’t upload multiple large images of the same photo.
• Use the main product image. The main product image will be displayed at the top of the page so this can be an important image.

Use lazy loading for images that are below the fold. However, don’t use lazy loading for your main above the fold image if it is the LCP element. For example, if you’re running a fashion store with multiple images, you want the images to be sharp but also the correct image size.

3. Use a Lightweight Theme

Shopify themes will provide you with much of the structure and styling of your store. However, if your theme has too many animations, complex layouts and extra scripts, this could cause performance issues. Look for a theme that will provide everything you need for your business, without any extra features. A clean theme will provide a good base for your store.

Before choosing or changing your theme, consider the following:

• Will it run well on mobile?
• Does it have the correct layouts and sections for your product range?
• Does it have any unnecessary animations?
• Does it have enough customization options?
• Is it regularly updated?
• Does it run well on key pages in the demo?

Just because a theme looks nice doesn’t mean it will be fast. Just because a theme has lots of features doesn’t mean it will be slow. It really depends on how it has been implemented, set up, assets, apps and content. If you have a theme with a lot of custom code and unnecessary features, you could consider looking through it. A professional Shopify developer can help you understand how well your theme is performing. They can help you identify what is causing performance issues and make improvements.

4. Remove Unnecessary Apps

Shopify apps can provide you with some great features to help your store. Such as reviews, subscriptions, loyalty, chat, email marketing and product recommendations. However, some apps can include extra JavaScript, CSS, tracking and connections. Having too many apps can cause your store to be harder to maintain.

Look through your apps and identify which ones are actually helping your business.

Start by:

• Listing your apps.
• Identifying any duplicate features such as multiple review tools or popups.
• Identify which are essential for selling, running your business and providing customer support.
• Uninstall any apps you don’t need. Follow the providers instructions to uninstall.
• Test your key pages.

Sometimes uninstalling an app won’t fully remove all the scripts and changes. There may be some snippets, theme changes or app embeds. Look through your theme settings and follow any cleanup instructions provided by the app provider. If you’re unsure whether it’s safe to remove a script, get help from a developer. The aim is not to remove all your apps, but to remove any that aren’t providing real value.

5. Minimize Unnecessary JavaScript

JavaScript can provide a lot of interactive features on your Shopify store. However, having too much can cause your pages to be slow and unresponsive. Third party scripts can cause extra requests to external services. This can depend on the external service, customer connection and when they load. Look through your scripts used in your theme, apps, analytics and marketing.

Optimize by:

• Using non essential scripts wisely. If possible, use deferred scripts.
• Don’t have duplicate tracking. Having multiple analytics or advertising tools can cause duplicate tracking.
• Don’t have too many popups. Having promotional popups that load straight away can interrupt the main content and cause issues on mobile.
• Use tag manager wisely. Whilst a tag manager can help organize your tracking, having too many tags can cause your website to be slow.
• Remove any unused custom scripts. You may have old promotional features and abandoned integrations that are still loading.
• Don’t delay essential scripts. Make sure any payment, consent, variants or other essential features are working.

Having a structured script audit can help identify what is causing your pages to be slow and what can be removed, deferred or optimized.

6. Optimize Theme Code & Liquid

Shopify themes use Liquid (Shopify’s templating language) to create your pages. If your theme code isn’t well structured, you may be causing unnecessary processes, duplicated code and inefficient assets. If you have a heavily customized theme, you may be able to optimize by looking through your code.

This can include:

• Removing any unused CSS and JavaScript.
• Avoiding duplicate scripts and stylesheets.
• Minimizing unnecessary DOM elements.
• Improving product images and media.
• Limiting expensive client side processes.
• Reviewing Liquid loops and duplicated content.
• Loading page specific assets where possible.

For example, if you have a product review script, you may not want this to load on an information page. Also, if you have a feature that is only used on certain product templates, don’t have it automatically adding unnecessary processes.

Be careful when making changes to your code. If your optimizations aren’t implemented correctly, it may cause issues with your navigation, product variants, cart or app integrations. It’s a good idea to have a backup or duplicate of your theme before making any major changes. Once you’ve made your changes, test your theme. If you have a complex customization requirement, a Shopify development company can help you review your code, identify performance issues and make improvements.

7. Optimize Fonts, CSS & Above the Fold

The resources needed to display the first section of your page can affect how quickly your customers perceive your page to load. Large fonts, blocking stylesheets and unnecessary effects can cause your key content to appear slowly.

Optimize by:

• Using a limited amount of fonts. Having too many fonts and weights can cause your browser to load more fonts. Only use the fonts you need.
• Using efficient fonts. Modern fonts such as WOFF2 are usually a good option.
• Don’t have unnecessary delays with fonts. Using the correct font display settings will help with keeping the text visible whilst fonts load. Test this.
• Minimize unused CSS. Remove any old styles and don’t use large libraries if you don’t need them.
• Only show visible content. Ensure your heading, main image and key product information is visible without too many scripts or processes.
• Don’t have too many animations. Decorative animations can cause extra processes and can take away from your key content.

This can help improve the perceived speed of your store.

8. Use Shopify’s Image Delivery & CDN

Shopify has image delivery capabilities to help deliver your assets. This includes a content delivery network for your images. As much as possible, use the features available within Shopify. When adding images to your theme, ensure the image URL’s and responsive image settings are being created correctly. Shopify themes can use Liquid image filters and responsive images to request the correct image sizes.

For example, using image_url and image_tag filters can help create the correct image sizes.

The srcset and sizes attributes will help your browser choose the correct image resource. Ensure your theme isn’t requesting large source images for small mobile elements. Responsive images will work best if your theme is providing the correct sizing. Don’t use an extra image optimization service unless you really need it and it’s compatible with your store. This can cause extra complexity.

9. Optimize Homepage & Collection Pages

Your homepage will often have a number of performance heavy elements. For example, hero banners, promotional videos, featured collections, product carousels and promotional popups. Whilst these can help with merchandising, having too many can cause your page to be slow. Look through your homepage and identify what is helping your customers understand your brand and find products.

Optimize by:

• Using the correct hero image size. Don’t use a large video.
• Minimizing product carousels and animated sections.
• Have a reasonable amount of featured products.
• Don’t have multiple promotional popups loading.
• Ensure your main value proposition and navigation is clear.
• Remove any old campaign banners and duplicate sections.
• Collection pages can also be an issue, especially if you have a large product range.

Having too many products on your page can cause more content and images to load. Ensure you have a reasonable amount of products per page and provide pagination or other options. Filters and sorting should be useful but don’t cause unnecessary client side processes. Test your collection pages with realistic amounts of products. Often a focused layout will help improve performance and help customers find products.

10. Optimize for Mobile

You want to make sure your store is performing well on mobile. Customers may be using devices with less powerful connections, less processing power and smaller screens. Even if your store is performing well on desktop, it can still feel slow on mobile due to large images, lots of JavaScript and complex layouts. Start by testing your key pages on mobile.

Look at:

• Image sizes. Are you loading large desktop images on mobile?
• Navigation. Are your menus clear and aren’t causing too many interactions to get to key categories?
• Buttons and forms. Are your buttons easy to use for purchasing?
• Third party tools. Are your chat widgets, popups and tracking scripts causing delays?
• Product media. Are your galleries and videos causing issues with scrolling and interacting with your products?
• Checkout. Test your full checkout process on a smartphone.

Your store should be easy to use on mobile. Whilst you will have a responsive design, you should also have a practical design with easy to find key actions.

11. Track Performance After Any Major Changes

Optimizing your speed should be an ongoing process. Theme changes, new apps, campaign scripts and product changes can all affect your performance. Once you’ve made any changes, test your pages again. Compare your results to your original results. Use Google PageSpeed Insights to get lab results. Use any real user data available. Shopify has analytics and performance tools which can give you more information.

Follow the following process:

• Get your baseline results for your key pages.
• Identify the biggest or most common issues.
• Make a specific change.
• Test your pages again under similar conditions.
• Ensure your key functions are still working.
• Monitor your performance.
• Try not to make multiple unrelated changes.

Performance can vary depending on your network, caching, browser and third party tools. Look for consistent improvements.

12. When to Use a Shopify Development Company

Some performance improvements can be done via the Shopify admin, theme editor and app management. However, if you have more complex issues, you may need technical support. If you have a lot of custom code, your Core Web Vitals aren’t consistent or you have third party integrations affecting your key pages, it may be worth investing in professional support. A Shopify development company can help with theme audits, Liquid optimization, script management, responsive images, app integration and performance testing. Professional Shopify development can also help with layout shifting issues, product page optimization, custom JavaScript and app/theme conflicts.

Ask for clear explanations about what issues have been identified, what changes will be made and how they will know they have been successful. A credible provider shouldn’t promise a perfect PageSpeed score or guaranteed search rankings. Bloom Agency can be considered when looking into Shopify development. Choose a partner that will focus on making real improvements, ensuring things work well and providing a consistent customer experience.

Conclusion

Optimization of Shopify store speed and performance is a complex process that involves proper evaluation and use of the right strategies for image optimization, efficient theme creation, application management, code optimization, and testing.

First, one should assess the performance of the Shopify store using Google PageSpeed Insight. In order to improve customer experience, the focus will be made on eliminating oversized images, removing unnecessary scripts from the page, optimizing page layout, and mobile interaction. One should keep in mind that a good performance score does not necessarily lead to improved sales. There are numerous other factors that have an impact on the success of the business including product, pricing, content, checkout experience, target audience, etc. The aim is to create a store that loads fast and makes it easy for customers to purchase goods or services. Professional Shopify development services will come in handy in case of increasing complexity of technical issues.