/ /
Shopify Speed Optimization
ShopifyE-commerce

Shopify Speed Optimization: The only guide you’ll need to read

Guide

April 10, 2024Author: Preslav Nikov16 min read
Storyblok Image

Shopify store speed has a huge impact on your online business performance. If your page loading speed is slow, you are likely frustrating potential customers and driving them away to your competitors. 

However, speeding up your site isn’t straightforward because it requires a careful balance between performance and quality. There are misconceptions and diminishing returns related to it as well.

In this guide, you’ll read all the do’s and don’ts of how to speed up your Shopify store. 

In this article:

  • The five most common issues with Shopify store speed

  • Shopify speed optimization best practices

  • Understanding the impact of website speed on your business

  • The Shopify ecosystem with regards to speed

  • How to speed up your Shopify store step by step? 

  • Tools you can use to measure your site speed

The 5 most common issues with Shopify store speed

Responsiveness and Slow Mobile Speed

Most stores receive around 90% of the traffic and 80% of the orders on mobile.

Slow mobile speed is one of the most common issues with websites overall.

This is because websites are traditionally built to be desktop-first.

However, this ignores that mobile devices have limited hardware capacities and might access your store differently.

That’s why mobile speed is almost always lower than desktop.

Only 35% of all websites are optimized for mobile for speed, performance, and responsiveness.

Source

However, store owners need to take immediate action to improve their mobile load speed, as in recent years mobile traffic has surpassed desktop traffic.

Although exact numbers depend on your industry, customers who use mobile devices to make purchases are now a majority in most industries.

Heavy Use of JavaScript

Bloated JavaScript code from apps is one of the biggest culprits for slow store performance on Shopify.

Excessive code from apps and third-party software can significantly delay page rendering.

While JavaScript is necessary for enabling advanced functionalities in your store, the code needs to be written in a lean way.

For example, many users rely on installing apps that clutter their store with hundreds of lines of code instead of writing a few lines of code directly in their theme that gets the job done.

Naturally, apps are an easier solution but they come with the drawback of slowing down your store.

Unoptimized Images

Images cause problems when they are:

  • Large size

  • High-resolution

  • The wrong file type

Storyblok Image

Unoptimized images consume a lot of bandwidth and slow down users every time they interact with your store.

This issue gets progressively worse the more images a store has and leads to a poor customer experience.

Videos

Videos can significantly slow down your store, due to their large file size. The impact of unoptimized videos becomes more pronounced as you add more content.

This is a crucial mistake on pages that are meant to load quickly to keep user engagement high.

Third-party scripts

Services like analytics, chatbots, and marketing tools can increase page load times, particularly if they're not optimized for efficiency.

A key issue is that many of these scripts load synchronously, blocking other page elements from loading quickly, which can degrade user experience.

Shopify speed optimization best practices

Tips to optimize images

  • Convert Images to JPEG or JPG 

JPEG and JPG file formats are lighter than PNG. If you have a PNG image that doesn’t have a transparent background, you can convert it. You can do this with any conversion software such as Freeconvert and minimal technical skills. Moreover, Shopify has a built-in transformer that makes all the images in WebP format.

  • Compress images 

Similar to reducing image sizes through conversion, you can take a step further and use free image compression tools to lower the size of your images while keeping an acceptable quality. We recommend using crush.pics for this. 


Storyblok Image
  • Keep rendered image sizes low - Developer skills needed

Images have an intrinsic and a rendered size. For optimal performance keep the intrinsic size to be between 1.5x and 2x of the rendered image size, depending on the picture and the quality you need. 



Storyblok Image

For example a picture that is displayed on the site that is 400 pixels in width needs to be rendered at 600 to 800 pixels width so it does not lose quality but is not too heavy.

This is typically achieved by tweaking the code - some technical skill is expected for this.

  • Lazy load Images - Developer skills needed

Instead of loading all images when the page is opened, load them as they’re about to enter the viewport. You can also have low-quality placeholder images that are replaced by a higher-quality version as they appear on screen. 

To implement lazy loading, you need to add an attribute to the image tag in your theme code or use a Shopify App to do it. 

  • Add a responsive image snippet - Developer skills needed

Instead of having 2 separate images for mobile and desktop you can compile both versions using the <picture> tag and a few lines of code to tell the store which image to load depending on the client’s device. 

Render images on mobile first using the responsive snippet. This adds an extra boost to the performance without any visual changes to the site.

Tips to optimize videos

  • Compress videos

A general rule of thumb is to compress all videos as much as possible without losing the video quality. You can use any free compression tool you want. We’re happy with the freeconvert video compressor

Ensure the quality of your video hasn’t gone down dramatically by opening it on full screen after compression.

  • Make background videos shorter

Generally, any background video above 10 seconds is too long and will impact your website's speed and performance.

  • Remove audio 

If you aren’t using the audio in the video, you can remove it from the file and this will save some size. 

  • Lazy load videos - Developer skills needed

You can render videos only once the user needs them. For example once they click on the play button.

  • Host your videos on a third-party platform

You can use Vimeo or YouTube to host your videos and this will improve your performance. However, you risk distracting the user with other recommended videos that might play automatically.

  • Replace GIFs With Static Images 

Static images load significantly faster than GIFs. For example, if you have a GIF on your homepage banner, it’s likely slowing down your page load speed significantly. Unless motion is crucial, stick to static images.


Tips to optimize third-party scripts

  • Implement tracking strategically

When tracking is concerned, you need to decide exactly what data you want to collect. Many store owners go overboard with adding various tracking apps and scripts that slow down their stores.

  • Make a list of all of your tracking software

Make a list of all the scripts that are running on your page when you first open it and use a tool to note down how much each one is slowing your loading speed. Often, there are outdated scripts that you are no longer using but they are still slowing you down.

  • Migrate Tracking Codes To Google Tag Manager 

If you are using various analytics and tracking scripts, you can migrate them to Google Tag Manager (GTM) for streamlined loading and increased performance. With GTM you manage all of your scripts centrally without complicating the code on individual pages.


We recommend using GTM whenever possible.

  • Load apps after LCP (Largest Contentful Paint) - Developer skills needed

Implement dynamic rendering of 3-rd party scripts to defer their loading until after the main content of the page has been fully loaded and rendered. 

Note that implementing dynamic rendering of scripts requires intimate knowledge of Shopify’s templating language and how scripts and LCP work. It’s advisable to seek professional help for such tasks.

  • Conditionally load scripts - Developer skills needed

This technique involves loading scripts only when they are needed, rather than loading them on every page of your Shopify store. By doing so, you minimize the amount of code that needs to be processed and downloaded by the browser, leading to faster page load times. 


An example of conditionally loading scripts is when you have a product review app script and you can choose to load it only on your product pages, instead of on the entire website.

However, implementing conditional loading for scripts requires a sophisticated understanding of how scripts work and at least some basic coding knowledge of Shopify’s templating language - Liquid.

Tips to optimize Shopify code

  • Choose A Lightweight Shopify Theme 

Select a Shopify Theme that’s optimized for speed directly from the Shopify Theme Store. Some quick themes you can consider are Booster, Plak, or Loft. 

  • Limit the use of Shopify Apps 

Audit the apps and third-party software you are using from your Shopify dashboard and see if there are any that you don’t actively use. We find disabling unused apps to often save a lot of loading speed.


Storyblok Image
  • Minify your JS and CSS code - Developer skills needed

Minifying your JS and CSS code involves removing all unnecessary characters from the code without changing its functionality. The entire code gets compressed into a dense wall of text. 

To implement minifying you need to work directly with your store’s files and use a third-party software, app, or a specific library. This makes for smaller file sizes which means faster downloads, reduced bandwidth usage, and quicker execution of all commands.

  • Preload pages when hovering over the link - Developer skills needed

Anticipate which page your users are most likely to open based on their hover action. When you use preloading based on link hovers, it pre-fetches the content and greatly reduces loading times. Employing this requires some coding but it is relatively straightforward. 

  • Audit and Optimize Liquid Code 

Ensure your theme’s code is adhering to Shopify’s guidelines and best practices. This step is especially relevant to merchants that have added custom functionalities to their stores. 

This includes:

  1. Lazy loading videos using JavaScript by inserting them only on click.

  2. Keeping the amount of fetches to the server at minimum.

  3. Moving excess code like CSS classes to snippets and reusing them.

  4. Moving scripts to functions that can be reused.

  5. Keeping nested loops with Liquid and JS to a maximum of 2-3 or avoiding them altogether. 

  6. Avoiding adding the same loop multiple times on the same script or page but reuse it instead.

  7. Making sure to load scripts only for the section that they are being used.

  8. Keeping the CSS Class/ID naming simple and short.

  9. Hosting JS libraries on CDN (this can cause issues if the CDN goes down)

  10. Using Web Components whenever possible for performance.

  • Miscellaneous tips

  1. Load fonts from the Shopify Admin Assets, as custom fonts require more resources to render.

  2. Make your scripts into files and use defer or async for them.

For optimal performance, you can check out Shopify’s Theme Inspector Tool

It evaluates your Shopify server performance and the speed with which your code executes.

To get access to the tool you need to be logged into your store and download the chrome extension. 


Storyblok Image

If you need professional help to optimize your Liquid code you can reach out to a Shopify development agency like craftberry.

Understanding the impact of website speed on your business

Your conversions drop 17% on average for every second of loading delay.

Source

Faster loading speed brings you:

  • Increased Conversions

    Customers complete their purchases quicker and have a seamless experience doing so. 

  • Better User Experience

    Modern shoppers want your products to be immediately available on every device they use.

    When your store responds to their actions without delay, they are more likely to engage and buy from it. 

  • Better SEO Visibility

    Faster page loading speed makes it easier for search engines like Google to understand what your content is about.

    As a result, they place your content higher in the search results, which drives traffic to your store.

Avoid Black hat speed optimization practices

Black hat speed optimization practices aim to cheat testing algorithms without actually improving your store speed.

Many experts opt to trick PageSpeed Insights by sending a modified version of your store to it or even an image of it.

This helps you pass the PageSpeed Insights but does nothing for the actual speed of your store or your user experience.

Use page speed tools as aids for speed optimization. Don’t try to cheat them.

In essence, you lie to Google that your site is okay through malpractice.

While this can win you search rankings in the short term it’s likely to end up in a penalty from Google and a complete crash of your rankings.

The Shopify ecosystem with regards to speed

When working with the Shopify platform in particular, there are a few caveats to keep in mind. First, there are multiple factors under your control that directly affect your loading speed. These include:

  • Apps

    Each app adds more code-based functionalities that need to be read every time a page loads. Auditing your list of apps and removing unnecessary ones is always a best practice for speeding up your store.

Storyblok Image
  • Themes

    Shopify’s themes vary significantly in the number of functionalities they have built in. This can lead to bloated code and slower performance.

Storyblok Image

Opt for lighter themes that are optimized for speed and mobile responsiveness instead.

If you need to introduce a specific functionality later, you can work with a developer to write it efficiently directly in your theme’s code.

  • Complex or inefficient Liquid and JavaScript code Think strategically and include only the functionalities that will have a significant impact on your business performance.

    If you use efficient coding practices and limit the amount of code itself, your store’s speed will improve.

  • Images and Videos

    While videos and high-quality images help you showcase your products better, they can drastically slow down your site if not optimized.

    Ensure you use compression tools to reduce file sizes without sacrificing quality.

  • Fonts

    Custom fonts add personality to your store but when you use too many of them, especially if they aren’t web-optimized, your store speed will suffer.

    Consider using system fonts as a fallback to improve load times.

However, the Shopify platform also has built-in limitations when it comes to speed. These include:

  • Shopify’s infrastructure

    As a service provider, Shopify provides you with built-in solutions to optimize your store speed.

    These include using a CDN, Local Browser and Server-side page caching, and other development assets.

Enterprise-level alternatives

  • Enterprises can leverage Shopify’s platform and combine it with best-in-breed technologies to future-proof their store.

    This is known as headless development.

While Shopify’s built-in solutions work well for most stores, larger retailers might find these limiting and will require sophisticated workarounds to improve their performance.

One of the popular enterprise solutions is to build a headless store.

A headless build can significantly improve your store performance and give you the freedom to leverage any technology you want to achieve total creative freedom.

However, it is significantly more complicated and expensive to create.

If you are considering a headless build, you should work with a professional Shopify development agency like craftberry.

How to make your Shopify store faster step by step

#1 Audit your website

Start by assessing your current website speed using tools like Google PageSpeed Insights, Pingdom, or Speedboostr.

These tools give you a baseline, provide valuable insights, and offer specific recommendations for improvement of your load speed.

Make a table with all of your pages and their loading speeds.

Then make a table for each page and note down all assets that slow down its loading speed, including all videos, images, third-party scripts, etc.

Note down the individual impact of each one on your loading speed.

This helps you identify unnecessary or heavy scripts and apps that could be slowing down your site.

#2 Prioritize which assets and pages you will optimize first

Comprehensively auditing your store will likely leave you with an unnervingly long to-do list.

Thus, it’s important to prioritize assets depending on the impact they will have and how easy it would be to optimize each.

Start by focusing on your highest-traffic pages.

Likely, this will be your homepage, followed by collections and the product pages of your best-selling products.

Then, pick assets that are quick and easy to optimize but have a disproportionately big impact. This usually includes images, GIFs, and videos.

Afterwards, you can prioritize optimizing third-party apps and scripts and only after that move to the more technical optimizations that require you to edit your Liquid code directly or require help from a developer.

Keep in mind that editing your code is more difficult but still isn’t enough if you neglect more basic high-impact optimizations.

There is always a tradeoff between quality and site speed performance. However, some optimizations are easier to do and have a bigger impact.

#3 Optimize pages and assets according to best practices

Even if you lack coding expertise, there are many things you can do to optimize your site’s speed performance.

Start by reducing the sizes of your images and videos and further compressing them, although this is usually a task for the developers. 

Use GIFs sparingly or better yet, replace them with static images.

Furthermore, you can manually remove scripts and apps that you aren’t using or choose a more lightweight theme. 

Once you’ve covered the basics, you can start considering more advanced techniques that involve editing your store’s code directly. 

This includes:

  • Minifying JavaScript and CSS files

  • Lazy loading images

  • Conditionally loading scripts

  • Manually editing your theme’s code. 

#4 (Optional) Get professional speed optimization from a Shopify agency

If you’ve implemented the above steps or are having trouble doing so, consider reaching out to a professional Shopify agency.

craftberry specializes in custom Shopify site development and Shopify speed optimizations in particular.

Reach out to our team for a free discovery & consultation on Shopify speed optimization.

Tools you can use to measure your site speed

There are many tools that you can use to see your store’s speed. Our top picks are:

  •  Google’s PageSpeed Insights - although it’s not specifically made for e-commerce sites, it’s one of the most popular and reliable speed-testing solutions online. 

Storyblok Image

It provides a core web vitals assessment which helps you rank better on Google when passed.

Moreover, it offers a comprehensive audit of all the third-party scripts that load on your site.

We ensure your store fully passes the core web vitals check as this is even more important than the speed score.

When it comes to scoring, Shopify stores usually have a tough time. It’s good to realistically aim for

  • 50/100 score on mobile

  • 90/100 on desktop

  • Core web vitals should be passed on both mobile and desktop.

  • Speedboostr lets you cross-check your site’s performance.

    It’s a dedicated e-commerce speed tester that understands Shopify’s structure and allows for more accurate assessments and targeted optimizations.

Storyblok Image

It’s great for showing you which assets are overweight and provides you with actionable insights and easy-to-understand reports.

However, it doesn’t support video assets. 

For scoring, anything under 50 is bad and everything over 80 (B) is really good and you should aim for it.

  • Pingdom is great for offering you more technical insights about the quality of your code and it helps you prioritize performance blockers based on severity.

    Pingdom will give you insights about the JavaScript and Liquid code on your site. 

Storyblok Image

Page speed from tests can be different from the perceived speed of the customer. Test with 3G Fast/Normal and with a VPN for the country you are interested in.

Conclusion

Optimizing your Shopify store for speed can involve dozens of tasks with varying complexity.

Understanding which tasks will have the biggest impact and prioritizing them is essential.

Moreover, ensuring that you have the right skill set when it comes to Shopify development is instrumental for making your Shopify store faster.

If you need help speeding up your store, reach out to craftberry’s team and we’ll get your store up to speed in no time!

Storyblok Image
Storyblok Image
craftberry Project ANAGER - Teddy Cherneva

Let us take
your business further than it has ever been.

Submit a project and schedule a free discovery

Share this article

Storyblok Image
Author
Preslav Nikov

With a decade of of e-commerce experience, Preslav, CEO of Craftberry, produces informative content. His writing focuses on practical insights and strategies in the e - commerce, aimed at helping professionals and businesses in the industry.

Read all from Preslav

Featured case studies

View all case studies
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Pepper case study
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Pepper logo

A Shopify Plus rebuild and priority support for one of the fastest-growing bra companies

  • Development
  • Design
  • Optimisation
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Glowforge case study
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Glowforge logo

Bespoke Shopify Plus & Headless build for the iconic 3D Printer company Glowforge

  • Development
  • Design
  • Optimisation
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Bangcookies case study
Upgrade Checkout.liquid to Checkout Extensibility on Shopify: The Ultimate Guide - Bangcookies Logo

End-to-end Shopify Plus solution with a custom iOS & Android App

  • Development
  • Design
  • Optimisation
View all case studies

Related articles
Storyblok Image
craftberry Sofia Ivanova team member
craftberry Teddy Cherneva team member

Let us take your business further than it has ever been.

Submit a project and schedule a free discovery

Contact us