Understand Your Current Site Speed
First, it’s worth understanding your site’s current speed so you can measure the impact of the changes you make.
You can do this by using PageSpeed Insights which is a free tool from Google that helps you understand your website's speed by analysing its performance on both desktop and mobile devices. Here’s how it works:
a) Performance Metrics Breakdown:
PageSpeed Insights measures key performance metrics that are important to Google as part of its Core Web Vitals:
Largest Contentful Paint (LCP): How long it takes to load the largest visible content
First Contentful Paint (FCP): When the first piece of content is visible
Cumulative Layout Shift (CLS): How much the page layout shifts unexpectedly
Time to Interactive (TTI): When the page becomes fully interactive
Speed Index: How quickly the page content is visibly populated
b) Scoring System:
The tool provides an overall score out of 100 based on these metrics, categorised as:
Good (90-100)
Needs Improvement (50-89)
Poor (0-49)
c) Diagnostic Suggestions:
The tool then gives actionable recommendations, some of which we’ll look into in this article such as:
Reducing image sizes
Minimizing CSS and JavaScript
Enabling text compression
Leveraging browser caching
d) Lab And Field Data:
Lab Data refers to simulated performance data from controlled environments, while Field Data represents real user experience data.
e) Opportunities And Best Practices:
Finally, the tool highlights potential improvements and best practices to enhance speed and user experience.
Once you have this benchmark for your current site performance, you can start to take measures to improve it - so here are 10 actions you can take to optimise your Shopify site and improve your website loading speed.
Top 10 Ways To Increase Your Shopify Site Speed
1 Uninstall Apps You’re Not Using
According to Shopify, the average store has 6 apps installed. Every app increases the time taken to load the site, so it’s worth reviewing this every year or so and removing any apps you no longer need. Make sure that when you uninstall the app, you check there is no residual code - leftover code can cause issues like page speed delays and theme errors. To remove leftover code, you can:
Contact the app developer who will know where an app integrates with the theme files so should be able to help you in removing their app's code.
Compare the theme files to the default theme: use a tool like Diff Checker to compare your theme files. Theme files can be accessed via Online store > Themes > Actions > Edit code.
2 Optimise Images
Large images (both in terms of file size and pixel count) can take a long time to load and weigh your site down, but this issue is easily managed.
Shopify will automatically compress your images. It has a built-in compression tool that it uses to create smaller files for images. Shopify will even convert them to the WebP format. For the fastest load times, though, you should resize and crop images before uploading them to your Shopify store. Size-wise, 2,500 pixels is big enough to go across a full screen in most cases.
Regarding file size, keep them to under 500kb. To compress images, you can use tools like TinyPNG or Shopify’s built-in image compression.
3 Avoid Overload
This is a general tip that you should bear in mind across your website - keep things simple where possible. This means limiting items like large carousels, pop-ups, and auto-playing videos. Everything you add to your site is something else that has to load, which takes more time. So a good general rule is to keep things as light and streamlined as possible. Focus on your core products and keep the user journey clear and unobstructed.
4 Fix Broken Links and Manage Redirects
Regularly review your site to identify and fix any 404 page errors, and to manage your redirects.
Check out our guide to redirects which looks at how to manage redirects to reduce errors and improve SEO performance.
A redirect chain occurs when there are multiple redirects between an initial URL that's requested and the final destination URL. For example, URL A redirects to URL B, which in turn redirects to URL C. This means that URL C takes longer to load, for both visitors and search engines crawlers. Avoid this by reviewing your redirects and updating them so that they go directly to the correct URL.
Another thing to look out for is redirect loops, when URL A is redirected to URL B, which then redirects to URL A again, resulting in an infinite loop of redirects.
All of these items are easy to manage but if left unchecked can cause speed issues and also damage your SEO performance, leading to reduced traffic and fewer sales.
5 Implement Fast Navigation Features
Rather than slow your site by having it reload entire pages when people search for products, make use of predictive search and fast filtering features.
6 Minify CSS and HTML
Minifying is a process that helps improve webpage download times, simplifying how servers read and interpret CSS and HTML coding.
This process is something that a number of ecommerce stores simply don’t undertake, but it should form part of standard site maintenance to ensure the store remains efficient and fast.
It’s common for HTML coding and CSS coding to have gaps or useless symbols. Minifying essentially lets you ‘tidy up’ your code, removing unnecessary characters, comments, and symbols. Minifying doesn’t impact your website’s functionality - instead, it makes the coding easier and quicker to read.
Unnecessary white space and useless characters are removed through minifying, resulting in a more condensed, efficient code with no gaps or useless symbols.
Minifying HTML and CSS codes increase page speed and download times by making the code easier to read and simpler to interpret.
7 Consider a Content Delivery Network (CDN)
All internet users have experienced the benefits of a content delivery network (CDN). The majority of technology companies, including companies like Google, Apple, and Microsoft, use CDNs to reduce latency in loading webpage content.
A CDN will typically place servers at the exchange points between different networks. These internet exchange points (IXPs) are the primary locations where different internet providers link to each other in order to provide each other access to resources on their different networks. CDNs help deliver content on the web more effectively.
While using content delivery networks is not necessary if you’re just starting your online business, it’s wise to consider investing in CDN services as soon as you can afford it or are receiving sizable online traffic.
Depending on your amount of traffic, CDN servers can start as low as $20 a month so it’s worth investigating.
8 Use Lazy Loading
Enable lazy loading for images that appear below the fold (outside of the viewport that the user sees when the page loads).
Lazy loading identifies resources as non-critical and loads these only when needed, for example when a user scrolls down the page to see the image below the fold. It's a way to shorten the length of the critical rendering path, which for our purposes means reduced page load times.
9 Embed Videos
Modern product detail pages (or PDPs) often have images and videos. Examples include videos of products being used, how-to guides or explainers etc. These are great ways to help engage the visitor with your products and encourage more sales. However, videos add an extra loading burden to your store, taking time to load - and remember, every moment of delay increases the chance that a visitor will abandon their shopping trip with your business.
A good way to manage this is to embed the videos instead of uploading them to your site. The difference is that if they’re on your site, the videos are hosted and delivered from there, but if they exist elsewhere, such as on YouTube, it doesn’t take any resource from your store which means the site can benefit from video content without having its speed dragged down by loading additional files.
It’s really easy to do, as well - embed product videos into your Shopify store by clicking the ‘Insert video’ button in the Shopify editor and pasting the YouTube embed snippet.
10 Test Regularly
Once you’ve taken the necessary steps to improve your site speed, it’s important to keep an eye on it. Run regular site speed tests, once every 6 months or so, so you can identify and manage any elements that might have crept in and could be slowing your site down. Doing it this way means issues won’t build up, and any remedial work should be quick and easy to manage.
If you need support with your Shopify store’s SEO or website design, get in touch with us and we can discuss how we can help improve your ecommerce business.
