Custom Store Project
Design and launch a bespoke store.
We are a Shopify Agency, who design, develop, support & grow Shopify &
Shopify Plus stores. Get in touch today.
Nic Dunn |
CEO - Charle Agency
Creating a performant and fast Shopify store can feel a bit of a minefield, so we've created our ultimate guide to improving the Shopify store's site speed. In this guide, we'll explore how to ensure a site is fully optimised to load quickly and give your customers the very best online experience.
Shopify site speed refers to the time that it takes for an ecommerce store to load and be useable by a visitor. Typically, the longer it takes for a website to load and then continue to load throughout a customer's user journey, the worse your store will perform. Google reports that the probability of a visitor bouncing (leaving your web page) increases 32% as a page’s load time increases from one second to three seconds. Why? Typically due to frustration, if a website feels laggy or takes too long to load your customers will simply give up and shop elsewhere. A survey of 750 consumers and 395 marketers found that when web page speed was slower than a visitor expected, 45% of surveyed users were less likely to buy and 37% were less likely to return to the site.
It's important to note that poor site speed, doesn't stop at customer frustration and bouncing but also affects your marketing channels. Poor customer engagement from a website is a negative signal to most marketing platforms such as Google Search, Meta ads and more as it signals that the pages these platforms are sending traffic to are poor. If your website is slow, your Google Rankings are likely suffering and it may mean you pay more for ads too. So, let's speed on and get right to it on how you can improve Shopify site speed.
It's one thing improving your Shopify store's site speed, yet how do we measure how your store is performing in the first instance? It's important to be able to measure the performance of a store both before and after implementing changes that optimise the user experience and load time. Luckily there are several tools that can help us understand how a store is performing. The most common and effective ways that you can assess and measure your store's site speed is by using tools such as Google PageSpeedInsights (Google Lighthouse), GTmetrix and more recently Shopify's built-in Online Store theme speed report. Let's explore each of those tools in more detail.
Google PageSpeed Insights
Google PageSpeed Insights is a free tool that quickly analyses a web page and assesses how quickly it loads giving a detailed breakdown of anything that is impacting speed and also provides a score out of 100. Google has created 4 key categories that it assesses within a Google PageSpeed Insight report including; Performance - mainly around speed, and Best Practice - mainly around code quality, Accessibility and SEO. In addition, this report highlights areas such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Total Blocking Time (TBT) which come together to form Core Web Vitals - we discuss this a little later on. PageSpeed Insights uses Google's Lighthouse engine to analyse and assess performance yet presents it in a user-friendly way. You may hear developers using Lighthouse to assess site performance.
GTmetrix
GTmetrix is another free tool that also assesses how fast a URL loads giving recommendations for improvements too. GTmetrix combines its assessment with Google Lighthouse reports to give a detailed breakdown of how a page loads. GTmetrix is a great tool for assessing ecommerce stores as it shows the exact scripts and files that are impacting site speed.
Shopify's Online Store Speed Report
Shopify has recently introduced an Online Store Speed report directly into the admin dashboard for you to access. The report compares your site's speed against similar Shopify stores. However, it is quite limited in the analysis it gives.
When you assess the speed of a site, it's important to assess a store using the worst-case scenario - on mobile with throttled 4G connectivity. While some of your customers will be on their computers with great wifi connections, many will be using their mobile phones and in poor connectivity areas therefore it's vital a website can load fast even when the signal is poor. Many of the above tools listed will consider this in the reporting. Using site speed reports can be a great way to understand how your store is tracking however they won't always give you the exact actionables you need to implement that will improve site speed. This guide explores some main culprits that impact site speed.
Images and videos are naturally larger files and can form a considerable part of the bulk of a page that a web browser has to load. Images and videos can have a huge impact on the speed that an ecommerce store loads, therefore optimising images & videos to be as compressed as possible is vital for improving site speed and delivering the very best user experience on your store.
Compression
Image and video compression is the process of reducing the file size to a level that means the file is as small as it possibly can be without degrading the image or video quality below an acceptable level. It is always a balancing act between making the image small enough to load fast and ensuring the file size is big enough to still look pristine and high quality.
We advise brands to compress images before they upload them to Shopify as this way you are starting with the lowest possible file size. Tools such as TinyPNG are a great way to compress images whilst preserving their original quality. Shopify automatically compresses images when you upload them - this approach will give you the lowest image sizes on your site. Finally, it's advised that developers build Shopify stores to dynamically resize images meaning that small image dimensions are served to smaller devices - yet again saving more space!
Image Formats
Image formats can have a big impact on the size of the image you are uploading. The best format you can upload is a modern image format made for the web called .webp. Alternatively, JPEGs are a good choice and PNGs only for images that use transparency.
Video Optimisation
Videos are typically huge files and can slow down your store if not implemented correctly. Try not to auto-play videos or allow videos to load on the first page render otherwise, the page may wait for the video to be fully loaded before showing the full page and displaying the page as ready. If the design of your store means you do need to immediately autoplay a video then make sure the video is short (less than 15 seconds) and is compressed to its lowest possible size - and use sparingly! Tools such as Clideo's Video Compressor are great at reducing video file size whilst preserving quality. Consider embedding videos from third-party platforms such as YouTube or Vimeo to avoid slowing down your store.
Each Shopify store is created using code that instructs the browser what a page to look like, the main code languages are CSS, Javascript and HTML. The code will naturally have unnecessary spaces, line breaks, and comments that at in place to make it easier for developers to interpret and read when they are writing the code however considering that there are likely to be thousands of these over a site, it all adds up making it harder for browsers to load the page quickly.
Minifying the code of a store including CSS, Javascript and HTML is a simple way to allow browsers to read a website's code quicker which in turn means pages load faster and the store's performance improves. The process of minifying simply means that all the non-essential characters in the code are removed, such as line breaks, spaces and comments making the code lean and fast to load. The website will appear identical and will function in the same way.
Whilst, indeed, Shopify will automatically minify some of your store's code if you are using custom themes or apps that add their own CSS or JS then they might not be fully minified. Partnering with a development team, like us, can help you to assess whether your store has been minified and you are benefitting from the leanest code base to in turn maximise site speed. We recommend that brands do 'clean up' their store's code base once a year, as over time new app installations and content can add bloat to the code slowing down the store.
Lazy loading is not only a best practice, but also a great technology supported by most browsers that allows you to significantly improve the speed of your Shopify store without the need to reduce the amount of images and content you have on the page.
Without lazy loading, when a page loads every single piece of content will load, even images and assets right at the bottom of the page that are not yet in view. Loading parts of the page that are not yet needed increases the time a page loads unnecessarily. Lazy loading delays images and media loading into the page until just before the elements scroll into viewing meaning the customer still has a great experience without slower page loads.
Loading only the main elements that are in view first, means that the store can complete its initial load much faster. Not only is this a better experience but also improves metrics from Google's Core Web Vitals which can then improve rankings on Google too.
Historically, lazy loading had to be achieved using Javascript, however, major browsers now offer native support meaning that images and media can be lazy loaded without the need for heavy code. Most of Shopify's themes natively have lazy loading included however if you have a custom theme or an older theme, then it might be worth getting your code reviewed by theme developers. Lazy loading is great for long pages such as large product pages or blog posts or even your homepage if it has a lot of sections with heavy imagery/video.
The theme of a Shopify store is the foundation of how fast your store will perform. If you choose a theme that was not built with speed and performance in mind, it will be difficult to make it fast if your foundations are fundamentally flawed. If a theme is beautiful and feature-rich but bloated with poorly optimised code then you may pay the costs for poor performance.
A theme that is optimised for speed is typically lightweight in the way Lits developers coded it. A lightweight theme will lead to faster load times that not only offer your customers a better online experience but also improved marketing efficiency.
Choosing themes that are heavy with animations, sliders and galleries are often indicators that a theme may be heavy and slower. Put simply, the more features a store has the more code it needs to execute those features which will likely impact site speed. Look out for themes that prioritise clean code and built-in speed optimisations such as lazy loading, image compression and asynchronous JavaScript loading. We strongly recommend you to speak with theme developers before making your choice and test the theme's demo store on Google PageSpeed Insights and GTmetrix to see how it performs.
We recommend asking theme developers how often they release updates and optimisations for speed as the benchmarks for sitespeed do continually change and technologies that can improve speed do require continual optimisation. Bespoke Shopify themes built by experts do typically offer fast load speads as the code is specifalised only to your designs and feature requirements rather than including features that you may not use.
When you install the Shopify app they inject their code into your store to achieve the desired functionality. However, sometimes, third-party apps need heavy code libraries to function which can slow down your store. Stores often have many apps and before you know it your store can become bloated with app code making it slow to load.
We advise brands to only use apps they need and choose apps that are designed with minimal speed impact. Shopify's app library has designated badges for fast-performing apps that you can use as a guide. When you remove apps, we advise asking a developer to review the theme code as apps can often leave leftover code which can impact speed. Ensure that historical app cleanups are part of your regular performance audit process.
Brands choose Shopify as it offers high-performance hosting with every plan out of the box, without the need for set-up, maintenance or separate security. This takes away all the hosting headaches that other platforms bring to the table. Shopify is built on a global infrastructure designed to handle huge amounts of traffic without slowing down. It uses a CDN (content delivery network) meaning that the store will load quickly no matter where the site visitor is in the world.
During high-traffic events for large brands such as product launches or Black Friday Shopify offers automatic server scaling keeping a website stable as bandwidth is shifted to where it is needed.
Themes often come jam-packed with features for you to use on your store which can look great at first however it's important to remember the more feature-rich a store is - the more code is required to make it function. Therefore it's important to find a balance to offering a great experience to your customers whilst not getting bored with animation-heavy sections that could slow your store.
Therefore when you are constructing each page template, have a mixture of some rich sections that deliver a great visual experience alongside static sections to ensure that the page is not too heavy and the load time is not too badly affected.
URL structures can impact the speed that a page loads, for example, if a link lands on a redirect then this will impact the time the page loads as the browser needs to then take the visitor to another page. Whilst it is not bad practice to put in place URL redirects for old pages, you should try to rename and update links for major pages that a large amount of traffic will be navigating through. This also will have a positive impact on SEO to ensure that the URLs of importance achieve their full inter-linking value.
Core Web Vitals are specific metrics that Google assesses websites on based on real-world user data. Google uses core web vitals to understand how good (or bad) a visitor's experience is and of course then considers this in organic and paid rankings. Core Web Vitals has three key metrics that are focussed around loading speed.
Firstly, Largest Content Paint (LCP) measures how long it takes for the largest visible content on a page—like a hero image or heading—to load, and should ideally happen within 2.5 seconds. First Input Delay (FID): FID tracks the time between a user’s first interaction (like clicking a button) and the browser’s response, with under 100 milliseconds considered good. Cumulative Layout Shift (CLS): CLS quantifies how many elements on the page unexpectedly move during loading, and a good score is anything below 0.1 to ensure visual stability. Choosing or building an optimised theme that passes Core Web Vitals is likely to have a positive impact on your SEO rankings and your customer experience.
Tracking scripts, such as Meta, Google Analytics, Google Tag Manager and heat mapping tools are typical requirements for an ecommerce store. However, they are often heavy and can significantly impact site speed. Firstly, we recommend using the native connectors within Shopify that leverage Shopify's server-side tracking reducing the reliance on tracking scripts in the code. However for event-based tracking, then where possible you should consider consolidating tracking tags into Google Tag Manager so that you are not duplicating unnecessary tracking codes and reducing the site speed.
Site speed optimisation for your Shopify store is not something that is a one-off task and you're done, it requires continuous assessment and optimisation (unfortunately). The assessment criteria are continually changing and newer technologies are continually being released that allow you to serve the fastest experience. We recommend conducting an annual site speed audit of your store including content optimisation too. Between that, it's important to keep app use to a minimum, be careful as you upload new images and content and finally consider conducting speed assessments after large-scale changes such as new page designs or feature releases. It is reasonable to expect to have to rebuild your store every 3 years given the pace of advancement online.
If you require support to optimise and improve your Shopify store, then get in touch with our team of experts today.
Bespoke Shopify Plus Websites