How To Speed Up Your Shopify Store

Page Speed has always been important to the user experience and to online business. In 2021, with the rollout of the Google Page Experience Update — starting in June — page speed will have an impact on search engine rankings. The update will make it harder for slower websites to rank in Google search results, making it more important now than ever to have a high-performing, fast website. 

Of course, the larger an online business becomes, the harder it often is to maintain a high-performing website. This applies to all sites — including Shopify sites.

This article will explain ways you can improve your page speed through troubleshooting, and how Huckabuy Page Speed can benefit your Shopify store website.

Table of Contents 

Shopify Performance Issues and How to Fix Them

Shopify has extensive documentation on Shopify speed optimization and possible troubleshooting tactics you can implement to speed up your Shopify site. Below we’ve sectioned out some of the most common reasons for site performance issues as detailed in a recent webinar on Shopify speed optimization.

Theme Issues

Issues with your Shopify theme can cause slow load speed. The most common type of theme issue is probably compatibility with HTML, CSS or JavaScript code. Your theme might display differently depending on the browser, device, or operating system that the code is being displayed on. For example, your theme might have a harder time displaying on mobile devices than on desktops.

The next step is to discover the circumstances in which the theme issue occurs. Once you have been able to identify the circumstances that the theme issue occurs — and can recreate the bug — you can contact the theme developer to address the issue.

Read this article for more information on how to solve theme issues with your Shopify site.

Note: The different variables with the browser, device, or operating system (all client-side, real-world user variables) are important to take into consideration because these variables could be missed in a controlled testing environment like Google Lighthouse Report. Make sure to reference testing tools like Google Search Console Page Experience Report to get real-world user data to measure site performance.

Code Bloat

While Javascript code is necessary for certain interactive user experience features it is one of the biggest reasons for site performance issues. This is because Javascript takes time to download, parse, and then execute. Javascript code has such a large impact on load time that it accounts for 40% of the Google Lighthouse Performance score.

One way to help reduce code bloat and improve your site speed is to minify javascript throughout your website or to consider whether the benefits of the javascript feature actually outweigh the hit to your site performance. In some cases, the best decision might simply be to remove certain instances of javascript altogether.

Note: Huckabuy Page Speed automatically reduces code bloat for all websites by automating HTML, CSS, and javascript minification across your website.

Third-Party Integration Issues & Shopify Apps

Certain third-party solutions and Shopify apps can slow down your site with synchronous scripts, style sheets, and other external resources loaded from their parties. It’s important to be aware of how these external solutions are impacting your site speed and remove any apps that are causing a negative impact on your site performance.

“Seriously consider the trade-off between features and performance. Shopify provides some tools that allow brands to detect performance damage, and we plan to continue improving them to support their app choices in the future.”

— Javier Moreno, Data Science Manager, Shopify

Compress Images

Larger images can slow down your page speed and negatively impact your site performance. The first thing you should consider is the file size of the images on your website. When the image file size is larger it will take the browser longer to load it. For smaller images and graphics, you should aim to keep the file size below 300 KB, and all image file sizes should be under 1 MB. Overall, the smaller your image sizes, the better.

You can shrink your images in one of two ways:

  1. Resize your images
  2. Compress your images

Resizing your images involves manually changing the size of your images in software like photoshop, and then saving the image as a smaller file size. To shrink your images further and still maintain pixel quality, you can use an image compression tool. There are various free compression tools that are easy to use. All you need to do is open your document finder and drag and drop (or upload) the image files you’d like to compress into the compression tool. The tool will then give you new, smaller image files to download and then upload to your website.

Click here for a step-by-step guide to shrinking image files.

Remove GIFS

GIFs can be a great way to enhance the UX of your website, but they will take a toll on your site speed. GIFs require more complex code than images and they make the file size of the page larger. You’ll want to consider how much a GIF enhances the user experience on a given page, and then replace any unnecessary GIFs with images.

Lazy Image Loading

Another thing to consider with images is to prioritize loading images above the fold. Instead of forcing users to download every image on your site, lazy loading enables a browser to prioritize loading only the images that are visible in the initial screen view.

If most of your visitors use Chrome, you can implement lazy loading manually by adding a loading=“lazy” property to the <img> tag, but be aware that your images won’t load lazy in other browsers.

Note: Huckabuy’s Media Deferral and Fold Prioritization features replace the need to implement lazy image loading and optimize important performance metrics like Largest Contentful Paint.

Why larger brands need a page speed solution

The larger a company becomes, the more complex its website tends to be. Larger brands have more sophisticated frameworks, third-party javascript, and tend to have more pages and content. Larger e-commerce websites, like Shopify sites, typically have more web pages to maintain as well. All these factors make it difficult to maintain the site performance for the entire website on a page-by-page basis. The best option for a larger e-commerce website is likely a third-party software solution with Shopify integration options, backed by a full support team of engineers.

Huckabuy Page Speed provides several different features to holistically enhance the speed of your website. These features address some of the most common issues that slow down websites — including the problems mentioned above.

Huckabuy page speed dashboard

Here are all the features you can get when you apply Huckabuy Page Speed to your website:

Core Features:

Base Features:

page speed software

Boost Your Speed Score 20-40 Points


In Conclusion

There are several things you can do to improve the speed of your Shopify site. Huckabuy can help improve your site performance considerably, but even with Huckabuy, you may need to make difficult decisions between implementing certain UX features and site performance. Overall, site performance is the most important aspect of user experience and makes a huge impact on the success of any online business.