We’re a committed Shopify Partner Agency that works with a lot of complex and high-end Shopify stores. A common pattern we find with general Shopify stores is around performance, which is typically isolated to these main areas.
- JavaScript
- CLS & LCP
- Image processing and display
- Coding practices
Let’s dive into this a bit deeper.
JavaScript + Shopify Apps
Much of the interactivity on a Shopify site is handled by Javascript. A large portion of that Javascript code is from the optional Shopify apps installed on a site. Many apps will add a large amount of code to your pages, increasing the time to load, but also impacting the time until the page is interactive known as Time to Interactive (TTI).
Each JavaScript file could be in excess of 100kb in size – totalling up to and over 2MB of additional code loading into your Shopify store. Even an app with relatively few functions may have a whole host of unused or unnecessary code that’s still downloaded and processed by the browser on every single page, slowing things down.
Each app tends to have its own external resources hosted on an external server, causing large network payloads and increased DNS requests. The more apps you add, the more data, connections and requests you’re asking the user’s browser to execute. More complex applications may even include entire libraries of functionality.
The solution to this issue is simple – reduce the number of apps installed in your Shopify store. A Shopify agency can replicate a lot of the functionality found in the commonly used apps in the Shopify theme itself. This minimises the need for extra unused code and reduces both the total requests and the total amount of data transmitted – resulting in a much faster website.
Many of the available Shopify apps have dozens of features and configuration options that aren’t really used. Adding the features you actually want to the store’s theme is a much more lightweight solution.
This isn’t to say that all apps are unnecessary – it’s important to balance their functionality with your store’s requirements versus the performance impact. Some apps will have no impact, some more complex apps will have a significant cost.
Cumulative Layout Shift and Largest Contentful Paint
The latest metrics that affect search engine rankings are Cumulative Layout Shift and Largest Contentful Paint. Rather than a measurement of how long the page load takes, they measure how the elements on the page are displayed making up what they classify as page experience factors.
Cumulative Layout Shift
Cumulative Layout Shift (or, “CLS”) is a measurement of how much the elements on the page move during page load. On older websites and stores, elements would fill the screen as they loaded, shifting text and other elements in and out of the visible area – a bad experience. A low CLS score shows that the page’s content is not subject to changing its position. The user will start to read or interact with the page before it’s finished loading, so a low CLS means a better experience – particularly on a slow or a mobile connection.
There are several techniques we employ to ensure a low CLS score. They range from basic web techniques, like providing an aspect ratio for image so that they reserve space before the image itself is loaded, all the way through to determining a set of rules to dictate fixed-height elements (headers and footers, for example) that are loaded at a higher priority. The goal is to provide a page-load with as little movement as possible.
Largest Contentful Paint
Largest Contentful Paint (or “LCP”) relates to the largest visible element loaded which contains meaningful content. This is typically a large image or an important block of text. LCP is heavily affected by connection speeds, resource load times and the overall structure of the delivered page. We can optimise elements for LCP, but it’s overall more an indicator of the site’s speed than a specific area to drill into and focus on. A fast site will have a fast LCP, a slow site will have a slow LCP.
Stores with well-optimised styles and lightweight pages will tend to have better LCP scores than those with longer, more complex pages to display. As many stores feature a large hero image as the largest image on the first page loaded, it’s important to select an image that will load quickly – a simple photograph without intricate details will tend to load more quickly than something with a lot of texture and fine-grained detail.
Image processing and display
Images are one of the most important areas in which we can optimise. They often take up a majority of the total page size. The majority of current themes and sites do a good job of optimising how they are delivered and displayed, but it’s still important to check that what’s set up works for your specific store.
Shopify also has a great feature that automatically converts your images to WebP format which has a huge benefit in image file size.
You will still need to make sure that your image file sizes are small and compressed before uploading them. WebP is not a silver bullet for all image issues – they still need to be sized appropriately in the templates, and displayed in the correct image formats. Photos should typically be JPG, illustrations or line drawings should be PNG and icons or outlined content can be displayed SVGs.
Have a documented process in place for uploading new product images to the store to ensure you’re not uploading oversized images of the wrong format.
Additionally, ensure that your theme is properly deferring image loading until the images are in the browser’s viewport. This technique is commonly known as “Lazy Loading” and can provide a huge performance boost, as the deferred images will load after the other key scripts, styles and images, resulting in a faster loading time for the page, and an increase in how fast the site is perceived to load. This also can be used in tandem with fade-in or blur-in effects where desired.
Coding practices
Most of this stuff will be a bit more technical and behind the scenes, so I won’t go into great detail for each point.
- Avoid hosting fonts and resources remotely. The fonts being stored in the same location as your other assets will reduce total requests, and allow them to load faster.
- Image dimensions should be specified. Adding a width and height attribute to an image will allow the browser to allot a space for the image before it’s loaded. This helps keep your CLS score low.
- Defer non-essential scripts if possible. Many apps do this automatically, but it’s definitely worth checking on.
- Use conditions to only load what you need and where you need it. E.g. Don’t load every bit of code on every page. This is known as ‘code splitting’ and it’s something we do to keep things neatly segmented. It doesn’t make sense to load cart logic on a page that’s not the cart, for example.
- Use Google Tag Manager to handle your marketing and tracking JavaScript snippets both conditionally, and asynchronously. Having these scripts load in asynchronously will allow other elements on the site to load at a higher priority.
Google Analytics Reports
Navigate to Audience > Technology > Browser & OS to identify the most common browsers used to view your website.
Navigate to Behaviour > Site Speed > Page Timings to get a breakdown of speed per page. You can also layer in a Secondary dimension of Browser to this report for further analysis.
Most stores will have an item in one of these areas holding it back. Just remember it’s the little hinges that swing big doors that make the difference.
Shopify Online Store 2.0 and Beyond
Recently, Shopify has released Online Store 2.0 – this includes a host of improvements and an entirely new default theme, Dawn – replacing the venerable Debut theme. If you’re on an older Shopify install, a revamped theme based on Dawn may provide you with a much faster experience.
Improvements include a more lightweight template system, modular CSS, and a streamlined set of Javascript functions. Combining this new basis with the above best practices will help ensure your new store will remain a fast, responsive and efficient experience for your users and customers. Many of the same caveats from older sites do still apply in the Online Store 2.0 system.
Does Store Speed Really Matter?
You might be asking yourself how much site or page speed really matters… Take a look at a few of the below statistics from leading companies around the world.
- For every 1 second of improved load time, Walmart increased their conversion by 2%. A 1% increase in revenue was also seen for every 100ms of improvement.
- As a result of Pinterest rebuilding their pages, there was a 40% decrease in user wait time because of the enhanced performance. There was also a 15% increase in SEO traffic and conversion rate to signups saw a 15% increase.
- For each extra second it takes BBC’s website to load, they lose an additional 10% of traffic!
- By reducing load time, Bing’s data showed a 0.6% impact on their revenue with every 100ms difference. This means their yearly revenue of $3 billion would increase by $18 million with just a 100ms speedup of their web page.
Get in touch to find out which of the areas are holding back your store’s performance!