A Guide To Shopify Speed Optimization

by Posted @ Mar 17 2020

ShopifySpeedOptimizations

One of the key considerations for Shopify store owners is site performance. Your website performance directly impacts your website’s ability to convert users. The faster your site is, the more users you are likely to convert. As well, if you’re looking to improve your Shopify store’s SEO, performance is a small ranking factor in Google’s algorithm.

Additionally, site performance impacts all of your other digital marketing initiatives. Whether it’s paid, email or social marketing, your website speed will impact users from all of these different channels. If you’re site is receiving a fair amount of traffic from these channels, then even just a small improvement in performance and can result in noticeable revenue improvements.

RevenueImpactOnSiteSpeed

A one second improvement in site speed can result in +$8,000 in revenue for this site.

This is why ensuring that your Shopify site performs well is crucial to the success of your store. Site speed improvements can not only enhance your user’s experience but may also have a direct impact on your bottom line.

How To Optimize Shopify Site Speed:

Below you can find some of the ways you can optimize your Shopify site speed:

  1. Choose A Lightweight Theme
  2. Reduce Large Image Sizes
  3. Compress Images
  4. Replace GIFs With Static Images
  5. Lazy Load Images
  6. Limit Third Party JavaScript & Shopify Apps

1. Choose A Lightweight 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:

  1. Create Theme (1.1 FCP, 7.8 TTI)
  2. Toy Theme (1.1 FCP, 7.7 TTI)
  3. Warm Theme (1.9 FCP, 7.8 TTI)
  4. Light Theme (1.1 FCP, 7.8 TTI)
  5. Outdoors Theme (1.1 FCP, 8.1 TTI)

Of course this is not to say that high-performing themes cannot be made slower or that these are the best options for your site. However, if speed optimization is top of mind for you, these might be ones to consider choosing.

2. Reduce Large Image Sizes

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.

While images are a fantastic way of improving the UX and branding of your store, they often come with a performance tradeoff. Image files are generally much larger in size than standard HTML or CSS. The result of using a large number of images on the page can be a very heavy page weight that takes users longer to download than a less image-intensive page:

This page uses 173 image requests with a total size of 14MB in image assets

 

As well, unoptimized images can make your site’s page even heavier. Images will often be uploaded at sizes much larger than their “render size”. This is the size that users actually see in the browser:

This page contains an actual size of almost 2x the render size

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.

If you see any large images (100+ KB), find that image on your page and once again right click and choose “Inspect”. Hovering over the image link will show you the render size as compared to the actual (intrinsic) size.

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:

  • Shopify Apps: Some apps will automatically compress images upon upload. We’ve had good experiences with Crush.pics.
  • Optimizilla: This allows you to manually compress large image assets before uploading to your site.

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.

However, GIF assets are extremely large. Using even just one GIF on a page can dramatically increase its size:

This single GIF asset accounts for 2.8MB 

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.

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 improve performance 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.

An example of a Shopify store that utilizes a large number of third party tracking codes

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:

  1. How often do we actually use this feature?
  2. Is this a “must-have” or “nice to have”?
  3. Is there a lighter-weight option that we could use?
  4. Is the benefit we get from this worth a performance trade-off?
  5. Are there any metrics we can reference to see how often this feature is used by our users?

Of course the answers to these questions will certainly vary based on your store and business model. For instance, a chat feature might be crucial to some stores but nonessential for others. After answering these questions, we then recommend working with your development team to figure out which elements can be safely removed.

Not sure where to start? Here are some third party codes we’ve found Shopify stores utilizing that tend to have larger impacts on performance:

Of course, we are not advocating against any of these technologies. However, if you know you’re utilizing one of them, it’s good to be aware that it might be having an impact on the performance of your Shopify store. If your testing reveals that these could be causing issues, consider removing or replacing them to better optimize your Shopify store’s speed.

Shopify Store Performance Tests (Original Data)

One thing that you might want to know is how your store compares to other Shopify sites. To give you a reference point, we performed an analysis on some of the most prominent Shopify stores to benchmark their performance.

Methodology:

To collect this data, we measured the homepage performance of 400+ Shopify sites. We collected data points such as First Contentful Paint, Time to Interactive, Page Size, Image Size and Total Requests. All performance data is for the mobile version of the site. We then compared the top and bottom 20% of pages based on the Google PageSpeed score.

Top 20%:

  • First Contentful Paint: 2.78 seconds
  • Time To Interactive: 8.98 seconds
  • Total Page Size: 2.01 MB
  • Total Image Assets: 1.11 MB
  • Requests: 72

Average:

  • First Contentful Paint: 3.8 seconds
  • Time To Interactive: 22.1 seconds
  • Total Page Size: 4.41 MB
  • Total Image Assets: 2.1 MB
  • Requests: 171

Bottom 20%:

  • First Contentful Paint: 5.89 seconds
  • Time To Interactive: 30.37 seconds
  • Total Page Size: 5.54 MB
  • Total Image Assets: 2.59 MB
  • Requests: 235

If you’re looking to optimize your Shopify store’s speed, these can be great adjustments to make. Improving image optimization, reducing requests, and implementing lazy loading can be great ways to ensure your site loads faster. Hopefully the result is higher performance that improves the user experience for all your digital channels.

Additional Resources

As well, if you’re looking for some additional ways that you can improve the performance of your Shopify site the resources below should help. We’ve aggregated our favorite site speed tools and resources that can be used to improve performance on Shopify sites and sites with other content management systems.

Site Speed Analysis Tools:

  1. Pingdom
  2. Google Pagespeed Insights
  3. WebPageTest.org
  4. Chrome DevTools
  5. Google Lighthouse
  6. Think With Google

Image Optimization:

Read More:

subscribe to our newsletter

1 Comment

  1. Joe

    March 22nd, 2020 at 8:23 pm

    Great point on the GIF’s, a lot of people don’t realize they can be heeeeeavy.

    To add to the apps part – a lot of Shopify sites I’ve optimized have leftover code still running from uninstalled apps. I’d say a majority of themes 1+ years old. Shopify is implementing new ways for app devs to prevent this but historically when an app is deleted it loses access, so any theme scripts / files are just hanging out and loading on every page view.

    Reply

Leave a Comment