Shopify Speed Optimization:

How to Speed up Shopify Website in 10 Quick and Effective Steps

Studies consistently show that website speed has a significant impact on user experience and conversion rates. For example, one study identified a correlation between conversion rate and ecommerce website loading speed: websites that load in 1 second are 2.5x higher than those taking 5 seconds to load. Additionally, Google has stated that page speed is an important ranking factor, meaning that faster websites are more likely to appear higher in search results.

Hence, in this article we’ll explore the most actionable tips about Shopify speed optimization without sacrificing quality or functionality.

#1 Compress, Resize, and Combine Images

The most common (and effective!) first step to speed up your Shopify site is to optimize all images across your store. Large, high-resolution images slow down loading times and affect the customer experience. Here are the key steps for image optimization:

• Compress images. Use tools like TinyJPG or TinyPNG to reduce file sizes without sacrificing quality. Aim to bring image sizes down to 300 KB or less.
• Limit Hero sliders. Use a maximum of three slides or replace the slider with a single high-quality hero image featuring a compelling CTA.
• Optimize thumbnails. Update the Liquid code to set different image resolutions for mobile and desktop with the “srcset” attribute.
• Handle CSS sprites for icons. Consolidate multiple icons into one image to reduce server requests. You may use a CSS Sprite Generator tool for this purpose.

#2 Use Lazy Load

Lazy Load allows images to load only when they come into view, reducing the initial load on your page. You can use Lazy Load for product images, sliders, and other visuals.

To apply Lazy Load on your Shopify site, you should install an app like Tiny SEO Image optimize (built for Shopify).

#3 Use Embedded Videos

A video is a powerful way to turn window shoppers into customers. However, again, video files decrease site speed.

In this case, for Shopify speed optimization, use embedded videos instead of uploaded ones. The simplest option is to host videos on YouTube or Vimeo and embed them on your store’s page. For this, we recommend using the Lite-embed tool. It embeds videos with a responsive layout for different devices and starts by loading just the thumbnail, which is about 15 KB.

#4 Choose a Performance-Optimized Responsive Theme

Start by analyzing your theme’s performance using, for example, PageSpeed Insights. If any issues are detected, check for updates from your theme provider to improve your Shopify site speed.

If the theme requires further optimization, you can do the following:

• Update your current theme by modifying its code (HTML, CSS, Liquid) — best left to developers if you’re not comfortable with coding
• Choose a new optimized theme from the Shopify Theme Store, ensuring its mobile-responsive
• Create a custom theme tailored to your needs for greater flexibility and uniqueness, though this option may require a larger budget and professional development help

#5 Delete the Unused Apps

How to speed up a Shopify website with a vast number of apps?

First, review all your installed applications. You’ll likely find that some are rarely used, and others aren’t used at all.

• Identify and uninstall any unused apps from your store. Before proceeding, carefully review the Shopify support documentation and uninstall instructions to ensure no remnants are left behind.
• Keep only those installed apps that are used and useful for the functioning of your online store.
• Each time you decide to implement a new app, remember that the more apps you install, the heavier your website will become, and the slower it will perform. Thus, select modules from trusted providers and test every app before purchasing to reveal its disadvantages.

#6 Remove Redirect Loops and Broken Links

While some redirects are necessary, excessive ones increase page load time and hurt search engine rankings. Redirect loops occur when a page is directed back to itself or through a series of redirects that eventually lead back to the original page. This creates an infinite cycle that frustrates users and prevents access to the content.

Broken pages, or 404 errors, also hurt your site by frustrating customers and damaging business credibility. From an SEO perspective, search engines see 404 pages as a sign of poor user experience, which can lead to lower search rankings.

Hence, regularly check for broken links and irrelevant redirects to speed up your Shopify site. Stick to 301 redirects for permanent changes and avoid unnecessary 302 redirects.

#7 Switch to System Fonts

Switching to system fonts is a simple method to enhance your Shopify store’s loading speed. Custom fonts require browsers to download and render them, increasing page load times. By opting for system fonts, you bypass this step, allowing text to render instantly.

To switch to system fonts, do the following in the Shopify admin panel:

• 1. Navigate to Online Store > Themes
• 2. Click on Customize on your current theme
• 3. Select Typography or Theme Settings in the left panel
• 4. Choose System Fonts from the font options

#8 Utilize AMP

AMP (Accelerated Mobile Pages) allows you to speed up your Shopify store thanks to their peculiarities such as CDN Caching, file size and JavaScript restriction.

Take into account that AMP may not work well for some types of stores, for example, print-on-demand or wholesale ones. So, analyze your store to determine which pages would benefit most from this technology. In general, best pages for AMP conversion are:

• Collection pages that are key landing pages for driving traffic
• Product pages (not in all cases)
• Blog pages to boost organic traffic
• Simple pages, e.g. the homepage, if they don’t rely on third-party apps

Remember, AMP pages have different URLs, meaning they are treated as separate entities by Google. You’ll need to configure analytics specifically for these pages to track performance effectively.

#9 Minify CSS and JavaScript

Minifying CSS and JavaScript improves your Shopify site speed by shrinking file sizes. It eliminates unneeded characters, such as spaces, line breaks, and comments, without changing the code’s functionality. The code remains fully operational, but the files become smaller and load faster.

You can use Shopify apps like MinifyMe or Boostify to minify CSS and JavaScript, or if you’re comfortable with coding, tools like CSSNano or UglifyJS allow for manual minification before uploading.

#10 Set Up Google Tag Manager

Streamline your Shopify store’s tracking with Google Tag Manager (GTM). Rather than managing each tracking code separately for Google Analytics, Facebook Pixel, etc., manage all settings in one place — your GTM account.

GTM saves all your tracking tags in one place and has asynchronous loading which helps to increase Shopify website speed and ensures a faster user experience.

To start working with GTM, follow these steps:

• 1. Sign up for a free account on the Google Tag Manager website.
• 2. Copy the GTM container code and paste it into your Shopify theme.liquid file, just before the tag.
• 3. Use the GTM dashboard to add your tracking codes from other tools, removing the need to edit your Shopify theme whenever you add or update a tag.

Final Thoughts

Some of the reviewed optimization tips require technical knowledge. If you’re wondering how to improve your Shopify store speed and want to leave the technical worries behind, consider seeking professional assistance.

The Whidegroup team specializes in optimizing ecommerce stores for maximum performance. Our experienced developers help you choose the right theme, implement Lazy Load, check for unnecessary apps, and much more. Get in touch with us, and let us handle the technicalities so you can enjoy the benefits of a well-optimized Shopify store.

Your journey to a faster website may start now.

Want to see how effective these steps can be?

Explore Our Speed Optimization Case Study

View Case