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.
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. Speeding up your Shopify site can not only enhance your user’s experience but may also have a direct impact on your bottom line.
What Site Speed Optimizations Does Shopify Already Have?
One of the nice parts about Shopify is that your store does come with some speed optimizations out of the box. In general, Shopify sites are pretty fast as compared to other solutions. This is great news for Shopify store owners as the platform is generally faster than platforms such as Magento.
After creating a new Shopify site, you’ll find that the following performance features should already be implemented:
- Leverage Browser Caching: Shopify should already cache your site’s internal resources by default. Caching allows some of your content such as images, JavaScript and CSS to be stored locally within users’ browsers. This means they will not have to re-download the content when view the same resource twice. This can speed up your store as users will be able to see some of your site’s content much faster than they were previously. Note, if you’re seeing third party resources get flagged for caching issues, there is nothing you can do to directly adjust the caching.
- Utilize A CDN: Shopify utilizes the Fastly CDN. A CDN (Content Delivery Network) allows some of your site’s content to be stored on servers across the World. This reduces the physical distance between your users and your site’s content. Reducing the physical distance helps improve your site performance.
How To Optimize Shopify Site Speed:
Here are 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:
- Create Theme (1.1 FCP, 7.8 TTI)
- Toy Theme (1.1 FCP, 7.7 TTI)
- Warm Theme (1.9 FCP, 7.8 TTI)
- Light Theme (1.1 FCP, 7.8 TTI)
- 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
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.
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. 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.
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:
- How often do we actually use this feature?
- Is this a “must-have” or “nice to have”?
- Is there a lighter-weight option that we could use?
- Is the benefit we get from this worth a performance trade-off?
- 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 speed up your Shopify site.
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:
- Add Google Tag Manager to your Shopify store
- Navigate to Tags > New and look for built-in tags in “Tag Types” that you’re using on Shopify.
- Implement these tags on Google Tag Manager
- If you didn’t find any built-in tag, you can choose “Custom HTML” and add your tag
- Set your triggering properly. Often times this is set to “All Pages”
- Publish your Google Tag Manager changes
- Navigate back to Shopify and remove any apps that you added via Google Tag Manager
- Navigate to your store and test that your new tags are working properly. You can do this using Google Tag Manager’s “Preview” mode
Consider moving tracking pixels such as Google Analytics, Hotjar, Facebook and other third party codes to Google Tag Manager.
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:
You can a good amount of data back and it can be fairly overwhelming. Let’s discuss the key data points that we look:
- First Contentful Paint: How long it takes for the first bit of content to be rendered. This is important to show the user that content is starting to load.
- Time To Interactive: How long it takes for the page to first become interactive to the user.
Generally, we’ll look at those two metrics first to get an idea of how a particular page is loading. This can provide great benchmark data that you can then go back and re-measure to see if your site speed improvements are having an impact.
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
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.
Page Speed Testing Tools:
- Pingdom
- Google Pagespeed Insights
- WebPageTest.org
- Chrome DevTools
- Google Lighthouse
- Think With Google
Image Optimization:
Read More:
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. If you’re looking to improve your Shopify store’s site performance or SEO, you can learn more about our Shopify SEO services.
Search News Straight To Your Inbox
*Required
About Chris Long
Chris Long is the VP of Marketing at Go Fish Digital. With 9+ years experience, Chris works unique problems and advanced search situations to help clients improve organic traffic through a deep understanding of Google’s algorithm and web technology.
Chris has advised on the search strategies for clients such as GEICO, Adobe & The New York Times. He is a contributor for Moz, Search Engine Land, and Search Engine Journal. He is also a speaker at industry conferences such as SMX East and BrightonSEO.