"Nearly 70% of Consumers Say Page Speed Impacts Their Purchasing Decisions"

• Search Engine Journal

Here is an exhaustive list of all the places you can improve your load speed on Shopify, from app selection, to coding standards, to image optimisation.

We're going to assume you're using Shopify, which has a global CDN, state-of-the-art tech stack and even a full team dedicated to optimising loading speed. Not to mention it being a passion of both the CTO and CEO, so you won't find general tips on hosting and so on here. Shopify already have that covered.

Further to this, it was announced at (re)unite 2020 that the theme engine (that translates your themes liquid files into html) has been rewritten and this "accounts for a 40 to 200 percent improvement in load times on live stores."

There are other factors that are in your control though so read on for further improvments you can make.

Understanding Page Speed Metrics

First off, let's focus on the goal of page speed, what it is, and what tools do you need to track it. Google prefers faster websites. And so do your customers - faster sites have lower bounce rates, fewer exits, and higher conversion rates.

There are several metrics for page speed, including:

• Time to First Byte is how quickly the server responds, with Shopify this is largly beyond your control without a full liquid code audit.
• First Paint is the point where the first pixel renders on the users page.
• First Contentful Paint is when the first page elements appear, like navigation and footer. This one isn't as important in e-commerce.
• First Meaningful Paint is when the main content is visible. Content further down the page may still be loading, but overall the page 'looks' ready.
• Page Loaded means that all assets, including images, are present. Deferred javascript will begin executing.
• Time To Interactive is important if the page has lots of DOM processing onload because this slows down the browser and delays user interaction. Generally in e-commerce this should not be an issue until checkout.

With Google recently announcing that various user engagement signals will become official ranking factors in 2021, it really is the time to make sure your site is up to 'speed'.

How to measure speed

With all that in mind, these are the tools you'll need:

• Pingdom Speed Test
• Google PageSpeed Insights
• Lighthouse in Google Chrome Dev Tools

The fact that Google maintains two of these tools suggest how important page speed is for SEO.

Tip 1: Remember to turn your phone’s network settings to 2G or 3G and disable wifi when testing - not everyone visiting your side will be using your office/home high speed WIFI connection.

Ways to speed up your Shopify store

Content speed improvements

• Tip 2: Make sure images are size-optimised before uploading. TinyJPG or TinyPNG are a good place to start.
• Tip 3: On your homepage, consider using a single image rather than carousel. This can also be a better design choice too (something that has been debated for years).
• Tip 4: Host video on a specialist platform like Vimeo who will optimise the video in the correct format for the device and connection viewing the video.

Shopify & app themes

• Tip 5: __Choose a fast theme __ (test the themes demo store using the tools mentioned above) or start from scratch with a custom theme built by an agency.
• Tip 6: Combine javascript and css files and ensure they are minified.
• Tip 7: Defer, load asynchronously and / or place at the close of the body tag your web fonts and javascript files asynchronously where possible.
• Tip 8: Keep all marketing tracking code in Google Tag Manager.
• Tip 9: Remove unnecessary apps and audit your theme files to ensure all legacy code added with each app has been removed (the app developers can sometimes help with this).
• Tip 10: Audit how apps install themselves. Often there are speed improvements you can make here, conditionally include apps and their javascript so they only load when they are needed. For example an app or javascript library that powers your product gallery only needs to be loaded on the product page.
• Tip 11: Make a backup of your theme before installing any app so you can quickly roll back if the app impacts your performance.
• Tip 12: Be careful with UGC apps, some will load the images at full unoptimised size from the social platform.
• Tip 13: Do you need an App for that? Avoid apps for features that can be easily implemented directly in your theme by a developer. For example a delivery countdown or free shipping threshold message can be added to your theme template. This will minimise 3rd party javascript and bloated code.

Code improvements

• Tip 14: Quick views on PLPs should not be pre-loaded - lazy load these as needed when the user clicks quick view.
• Tip 15: Use Shopifys Theme Inspector to profile and audit your liquid code to find ways to optimise and speed up your code
• Tip 16: Watch out for liquid loops. Lots of loops will make your code slower, especially with large catalogues. The Theme Inspector will help you identify these. Places to look: collection filtering, swatches and pagination. An app might be a powerful way of achieving what you need, such as with advanced search. Use the break command to step out of a loop when you have the data you need.
• Tip 17: Use responsive images srcsets that make use Shopify's image-size URL parameters to request suitably sized images.
• Tip 18: Use lazy load so that pages are ready to use, this will speed up your Time to Interactive. Use Shopify Liquids image size properties to let the browser know the height and width of the images to avoid Content Reflow.
• Tip 19: Remove links to assets that are 404ing. Pingdom speed test shows you this, as well as other assets that are slowing the page.
• Tip 20: When using iconography and images to structure your site, utilise CSS image sprites so that only one image file is downloaded.
• Tip 21: Audit unneeded features and CSS. Purchased themes come with several feature options, may you will never use. Aim to remove the overall size of page DOM and CSS.

Bespoke themes are faster

The Shopify Theme Store has an impressive array of gorgeous themes however as we've discussed, these are built to be highly customisable for mass use, they come with additional code and configuration that you will not use. This make your CSS and Theme files bloated and will impact your site speed. Nothing is going to compete with a custom designed theme for your brand and business requirements. That's what we do, have a look at some of our recent work below and get in touch to discuss further.