Scaling Your Shopify Store

8 steps to speed up a Shopify site

1. Choose A Lightweight Shopify Theme (Original Data)

Choosing a fast Shopify theme can immediately put your website in a great position from a performance standpoint. Some themes might come with unnecessary bloat out of the box, putting your site at a performance disadvantage. Conversely, a more lightweight theme will set your site up for strong performance moving forward. To give you an idea of some of the better performing themes, we tested 200+ templates that are available in the Shopify Theme store and logged their benchmark First Contentful Paint (FCP) and Time To Interactive (TTI) from Google PageSpeed Insights. Below you can find the top performing themes our tests identified:

2. Reduce Large Image Sizes

Resizing large image assets can be one of the best ways to speed up a Shopify site. When evaluating a lot of Shopify sites, we’ve noticed that many businesses have a propensity to use large numbers of images. This makes sense since images are a staple of eCommerce stores. This is even more true in verticals such as retail where images are a necessity to highlight products. When images are uploaded at sizes much larger than the render size, this causes unnecessary performance issues. This means that users must download a larger image than is actually required for it to render. The result is that users must waste extra browser resources and data in order to actually see the content. You can find larger images on a given page by using Chrome DevTools. Simply right click and select “Inspect”. Navigate to the “Network” tab and refresh the page. This will show you all of the resources used to load your page. You can then sort by “Size” to find the largest assets.

3. Compress Images

Images can also be unoptimized when they are not compressed. It’s very common to see Shopify stores where no compression has been applied to uploaded images which leads to larger image sizes than are necessary. By using compression, you can ensure that your image assets have much smaller file sizes than the original image. The smaller file size will allow browsers to load your website content faster. When it comes to image compression, we prefer using a combination of these two methods:

4. Replace GIFs With Static Images

An undeniable trend we’ve seen with slower Shopify stores is the utilization of GIFs. GIFs can be extremely valuable as they provide a more interactive experience for users. Once again, this can help improve your site from a UX and brand perspective. We’ve seen instances where just using two or three GIFs has accounted for 10MB+ of a single page. These files significantly add to page weight so we recommend trying to replace them with static images where possible. This can result in significant resource savings and improved Shopify speed optimization.

5. Lazy Load Images

When running our list of Shopify sites through PageSpeed Insights, one of the most common recommendations we found was “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once: Since many Shopify sites use lots of images, looking into lazy loading makes sense in a large number of instances. This can speed up your Shopify website as all of your site’s images won’t load at once, only as a user scrolls down the page. If you’re interested in implementing lazy loading, Shopify has pretty good help documentation around this. We’ve had the best success for our clients by working with our developers to implement the lazysizes library.

6. Limit Third Party JavaScript & Shopify Apps

A Shopify store is using a huge number of apps and third party resources. This is resulting in a large number of requests the browser must make Similar to WordPress plugins, Shopify has “Apps” that easily allow site owners to add functionality to their websites without the need for a developer background. Apps are a fantastic way to augment your site’s abilities. The same goes for any additional third party scripts. However, remember that these additions come at a performance cost. Every time you add apps or scripts to your website, this adds to the total number of requests your site is making. Additionally, the size of these scripts should be taken into consideration. Too many apps or third party codes can decrease the performance of your Shopify store. Because these resources can hurt site performance, it’s important to regularly review all of the tracking code, Shopify Apps and any other third party resource you’re using. We find that it’s helpful to have an honest conversation with your marketing and development team. Asking these five questions about each resource can be helpful to make a decision on it:

7. Migrate Tracking Codes To Google Tag Manager

Google Tag Manager is a solution that allows you to easily add and remove tags from your website without ever having to touch the code. It is a fantastic way to manage all of your website’s tracking code in one place. As well, one of the great things about Google Tag Manager is that the all of the code loads asynchronously. This means that the code loaded through Google Tag Manager will not block the rendering of your site’s content. This means that you could consider going through a “tag migration” to move some of your tracking code to Google Tag Manager. You can do this by performing the following steps:

8. Run Your Store Through Google PageSpeed Insights

Google PageSpeed Insights is Google’s site speed testing tool. It analyzes your site and provides both metrics about how your site is performing as well as recommendations as to how you can improve your site’s speed. To run a test, simply navigate to the tool and enter the page you would like to see performance data for. You should see something like the following screenshot:

Know More