Contact

About

Shopify Agency

<p>Ready to elevate your ecommerce brand?</p><p>Get in touch with us at&nbsp;<a href="mailto:info@underwaterpistol.com" rel="noopener noreferrer" style="color: rgb(255, 255, 255);"><strong>info@underwaterpistol.com</strong></a></p><p> or call&nbsp;<a href="tel:+442034677614" rel="noopener noreferrer" style="color: rgb(255, 255, 255);"><strong>+44 203 467 7614</strong></a>.</p><h4><br></h4>

Shopify Plus

Work

Blog

Design

Development

Shopify Plus migration

Branding

Content creation

Loyalty

Subscription

Tech stack consultancy

Will Lynch

<p><b>TLDR: </b></p>
<p>In this article we cover several aspects of speed in ecommerce, with that in mind, here are some quick links to get you to the parts that are relevant to you: </p>
<ul>
<li style="font-weight: 400;"><a href="#measure-speed">How do you measure speed on websites?</a></li>
<li style="font-weight: 400;"><a href="#is-shopify-slow">Is Shopify actually slow?</a></li>
<li style="font-weight: 400;"><a href="#maintain-a-speed-shopify-store">How to maintain a speedy Shopify store?</a></li>
<li style="font-weight: 400;"><a href="#what-makes-shopify-slow">What makes a Shopify store slow?</a></li>
</ul>
<h1>Everything You Need To Know About Shopify Speed Optimisation</h1>
<p style="font-size: 2em;">It’s common knowledge that speed is super important in ecommerce and that the faster the website, the more benefits merchants will see.</p>
<p>Speed improves your users' experience, causing lower bounce rates, higher conversion rates and a better brand engagement. </p>
<p>It’s also a huge factor in SEO; speeding up your website is going to make your organic presence explode. And of course, it’s going to improve your ROI of any acquisition channel such as your paid social or retargeting ad campaigns. </p>
<p>But time and time again we hear; “Shopify is too slow” or “Shopify is no good for SEO”. And in this article we’ll debunk the Shopify speed myth, what actually makes a Shopify site slow and what can merchants do to proactively maintain a fast website. </p>
<h2 id="measure-speed">How do you measure Speed? </h2>
<div style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/1472/1782/files/Asset_3_2x_1.png?v=1600870585" alt="How do you measure the speed of a Shopify Site?" style="margin-right: 35.5px; margin-left: 35.5px; float: none;"></div>
<p>Measuring a site’s speed should be straightforward, right? Well, there are a lot of different factors to take into account when you measure the speed of a website. And different metric-testing sites use different terminology and practices. So here are the metrics you should look at: </p>
<h3>PageSpeed Insight Score</h3>
<p>The PageSpeed Insights Score (PSI) is measured from 0-100 and you get a score for desktop and a separate one for mobile. This Google product, runs a test from Lighthouse (also a Google product) and takes all the data from those tests, aggregates the results, compares it against real-world data and gives your site an overall score. </p>
<p>While the data behind this test is extremely comprehensive, a score between 0-100 isn’t necessarily useful for delving into the issues behind it. It is however, a great indicator of general speediness, which is why <strong>Shopify has baked this insight solution into their dashboard.</strong> </p>
<h3>Fully Loaded Time</h3>
<p>As you can probably work out from the name of this metric, <strong>the fully loaded time is when there is nothing left to load on the page</strong>. This is obviously an important metric and describes when everything on your page is completely visible and interactive. However, this doesn’t necessarily mean the site isn’t interactive before this time, just that it’s not at 100% just yet. </p>
<h3>First Contentful Paint</h3>
<p>The first contentful paint is the time it takes for the first visible elements of a page to load; this could be a logo, text, image, or a background. <strong>Improving the time it takes for the first contentful paint to come through will help massively with the user's first impression.</strong> Measuring this metric, allows our technical team to find out what needs to load before any front-facing elements and helps us optimise those first milliseconds of loading. </p>
<p><img src="https://cdn.shopify.com/s/files/1/1472/1782/files/First_Contentful_Paint.png?v=1600870836" alt="First Contentful Paint" width="" height=""></p>
<h3>Time to Interact</h3>
<p>The time to interact with your site is again an important metric and optimising this can again improve your user experience. This is not the time it takes for the site to become fully interactive, but the time it takes for the first interactive part of your website to load. <strong>Your users aren’t enjoying the full experience when this benchmark is reached, but it may be interactive enough to keep the user engaged while other parts load around. </strong></p>
<p>Optimising this can have obvious benefits; allowing the user to interact with the site before it’s fully loaded means that the user doesn’t have to wait, albeit, with a limited functionality. </p>
<h3>Using a Combination of Metrics</h3>
<p>We use a combination of those metrics above plus lots of others to help us get a deeper understanding of the Shopify site speeds. Each one helps us discover different causes of slow loading and lets us take action to improve the performance. </p>
<h2 id="is-shopify-slow">Is Shopify Slow? </h2>
<p>No, Shopify is not slow, it powers nearly half a million active stores, so you can rest assured that they have spent lots of time, money and effort getting the hosting right. They have blazing fast servers that have been optimised specifically to handle the Shopify framework. They also have a huge CDN network to distribute the site's content worldwide. </p>
<p>We’ve spent the last 10 years developing a boilerplate that our merchants use as a canvas for our merchant sites. <strong>By iterating and optimising the boilerplate we can consistently hit 100/100 scores on both mobile and desktop</strong>. <strong>So it’s clear that the actual Shopify platform is not to blame for slow sites. </strong></p>
<h2 id="what-makes-shopify-slow">What Makes a Shopify Store Slow?</h2>
<p style="font-size: 2em;">Progress makes Shopify stores slow down. As merchants and store owners grow, the requirements from their Shopify store changes.</p>
<p>Whether they need to improve conversions, increase AOV, optimise engagement or provide better customer services. <strong>This need to improve means they need to install new apps, graphics, code-changes or new user journey experiences. All of which can slow down a site, if not implemented correctly</strong>. </p>
<h3>Apps</h3>
<p>Apps are a fantastic way to add new features and functionality to your site. However, a lot of these apps come with a compromise on the performance of your site. The more apps you install, the more code is on your site and the slower the site becomes. </p>
<p>Some apps, depending on the quality of the build or the complexity of the functionality can have a drastic impact on the performance of your site. <strong>Thankfully, in Shopify Plus we have a tech-ecosystem of speed conscious partners.</strong> So while there may be a small compromise, you can guarantee that the majority of tech partners out there are making an active effort to improve the performance of their app. </p>
<p><img src="https://cdn.shopify.com/s/files/1/1472/1782/files/Asset_4_2x_441a851c-f488-4943-8538-e388c917a12f.png?v=1600870960" alt="" width="" height=""></p>
<h3>JS</h3>
<p>If HTML gives your site a layout and CSS makes it look good, then JS is used to make the site interactive. This can be anything from adding an item to a cart, leaving a review or submitting a contact form. The problem is, the more interactive your site is, the more JS that’s required, which can slow down the site. </p>
<p><strong>You can optimise JS by loading it asynchronously</strong>. For those of us that aren’t developers, here’s an analogy: traditionally you load code in the same way that you put clothes on; one item at a time and in order (underpants before jeans). By loading code asynchronously, you’re able to put your jeans on at the same time as putting on your underwear; all while putting on socks, shirt and doing a double-windsor knotted tie! </p>
<p> </p>
<h3>Images</h3>
<p>Unsurprisingly, images can be some of the biggest causes of slow Shopify speeds. As the site gets updated with new products, flash promotions and updated USPs, so do the graphics and images associated with them. If not properly optimised, these can cause a lag in your loading speed. This can be a huge bugbear especially on mobile devices. </p>
<p><strong>It’s not just the size of the images that are a hindrance to the speed of a store, but also how many images are loaded</strong>. As collection pages grow, so do the number of images, and if there’s no pagination on your theme this can soon cause a bottleneck on your store. </p>
<h2 id="maintain-a-speed-shopify-store">How to Maintain a Speedy Shopify Store? </h2>
<p style="font-size: 2em;">Once you’ve got your Shopify store fast and it’s hitting all the benchmarks, you’ll want to maintain it as much as possible. The only way you can maintain a good quality speed is by testing any changes and running regular speed audits. </p>
<h3>Test Apps in Developer sites</h3>
<p>If you’re running a Shopify Plus store, you can use one of your add-on sites as a development site. This means you can test out any new apps, optimise the look, feel and functionality of them and make sure they don’t cause any speed problems all separate to your live store. Once you’re happy with any changes you’ve made, push them over to the live site, safe in the knowledge that it won’t cause any speed problems. </p>
<h3>Optimise your images</h3>
<p>It’s very common, especially in growing ecommerce businesses, to run out of time and forget to optimise your images when you upload them. <strong>One or two images aren’t going to cause massive issues, but when you add up all the image changes from products, to blogs to landing pages, it can soon start to affect your performance. </strong></p>
<h4>Use the Right Image Dimensions</h4>
<p>The right image dimensions are different for every theme out there, but <strong>as a rule of thumb you shouldn’t be exceeding the viewport or device screen size.</strong> There are lots of different tricks you can do with the code to help load the right image size for the right screen size. For instance, you don’t want to load retina high definition images on a non-high-def device. </p>
<p>And when it comes to product photography that you want the user to zoom in on, don’t load an oversized image straight away. <strong>Instead load the product image at the right size, then when the user hovers over the image instruct a high resolution image to load.</strong> This allows the user, and search engines, to view the entire page without having to wait for the high res image to load. </p>
<h4>Optimise Your Image Format</h4>
<p><strong>Export your image format in JPEG</strong>. This format has the best colour-accuracy without compromising on size. Other formats such as PNG should be saved for images that require a transparent background, whereas SVGs are mainly used for graphics and logos. </p>
<h4>Remove any Extra Image Data</h4>
<p>Images hold all sorts of extra data that bulk up the size of the file. By removing this extra data you can drastically improve the site's loading time. <strong>Using programs such as photoshop will help you remove any EXIF data and excess metadata. </strong></p>
<h4>Optimize Your Thumbnails</h4>
<p>On collection pages, landing pages and even search results, you might be loading 30-40 products at any one time. It’s important to load the correct thumbnail size and not the larger image size that would be on the product description page. <strong>While this may save a little bit of data, over the 30-40 images, this soon adds up</strong>. </p>
<h4>Does it have to be an image? </h4>
<p>When you’re next looking through which images to optimise, have a look through any images that might be better served differently. Some sites, for instance, use images for buttons; while there are some very specific use cases for this, normally it would be <strong>best-practise to use CSS to code these buttons in</strong>. </p>
<p>If you’re using a repeating pattern on your website, check to see if the pattern could be loaded once, and repeated using code, rather than loading one large image. </p>
<h4>Use CrushPics</h4>
<p>Of course you should always optimise images as you're updating your site, but if you're looking for an app to help reduce and compress images, then we'd recommend using <strong><a href="https://apps.shopify.com/crush-pics" target="_blank" rel="noopener noreferrer">CrushPics by SpaceSquirrel</a></strong>. They have a free plan to get you started, and focus purely on optimising your images from an SEO, usability and accessibility point of view.</p>
<h2>Run Regular Speed Audits</h2>
<p>Like anything in ecommerce, the only way to improve is to test and measure. This is the same with the speed of your Shopify store. You should take some time, once a month to run a proper speed audit, make any notes of any changes and implement new fixes. </p>
<p>We have a comprehensive auditing process that allows us to dig deep into the speed of your Shopify store, make technical changes and keep your eCommerce business running at full speed. <a href="https://www.underwaterpistol.com/pages/contact">Get in touch to arrange your speed audit</a></p>

Everything you need to know about Shopify speed optimisation