Shopify Themes

How to Improve My Shopify Stores Page Speed

Pinterest LinkedIn Tumblr

Ecommerce is huge. It had been growing steadily since the start of the new century but it soared in popularity during the Covid pandemic when traditional retail was effectively shut down for months. By 2021 the global value of ecommerce sales reached over $5 trillion and this is expected to increase to $8.1 trillion by 2026 [1]. It has become an essential part of the retail sector, as both a purely online phenomenon and in tandem with physical operations. Businesses that reacted slowly to this change have been punished, losing market share to more agile, visionary businesses who recognized that ecommerce is the future.

That’s not to say that success comes easily. In order to attract customers and grow your business, you need an ecommerce website that fulfils the exacting expectations of consumers. The challenges are numerous and getting people to visit your store is simply the first. You need to make them stay and, most importantly of all, buy.

There are all kinds of reasons why potential customers might abandon you. Poor design, usability, layout and content are among the main ones. In the age of the mobile device, where most web browsing is now done, a site that isn’t easy to use on a smartphone or tablet will send visitors away in moments. Other features that once seemed a good idea, like video and audio auto-plays, are now seen as obstacles to a good user experience.

Slow Processing Speeds can decrease Conversions

However, arguably the most obstructive of all are poor loading and navigation speeds. According to some studies, the average visitor will leave a website if it doesn’t load within three seconds [2]. If you can’t hold their interest, you won’t make that crucial conversion, which means no sale and no chance of customer retention. Even if you are using one of the biggest and best ecommerce platforms, such as Shopify, speed isn’t guaranteed unless you ensure that the theme you choose and the way you use it are fully optimized for speed. We’ll talk about Shopify themes later.

What Makes a Shopify Store Slow?

Loading speeds can be impaired in many ways and here are five of the most common problems.

1. Page Sizes

If your webpages are too large, they will load slowly. This isn’t so much about their content as how that content is configured. The size of a page is affected by elements such as CSS, HTML, images, multimedia and scripts. You should remove anything that isn’t essential. Merging CSS and JS files can limit the number of server requests your site needs to make and this will help speed things up. Images are an indispensable part of an appealing, user-friendly website, but you have to be careful that you don’t simply upload them to the site without reviewing them. Many images, either bought or self-created, are much larger in terms of megabytes than is necessary, so you should resize them as much as possible without losing resolution. If an image doesn’t respond well to resizing, you should consider replacing it with something else.

2. Web Host

Not all hosting providers offer the best speeds and whatever improvements you make to your page sizes won’t solve this problem. You need to research the average loading speeds of hosting services carefully. Don’t assume they’re all the same and don’t just opt for the cheapest. As we’ve seen, speed is essential for the best user experience but it also makes a difference to your SEO performance. Most search engines give priority to websites that load quickly. Those that don’t will find themselves languishing a long way down in the indexes or, in the worst cases, won’t be indexed at all. That means your store is effectively invisible. In addition, the best hosting providers offer extra features designed specifically for ecommerce sites which means you’ll get better speeds and improved functionality.

3. Third-Party Extensions

It’s very tempting to add various extensions to your ecommerce site which you hope will make it easier to serve customers and manage all your marketing and back-room functions. CRM, data analytics, SEO tools and coupon extensions can all be extremely useful, but you should choose them carefully. Many third-party plug-ins are poorly coded and can create as many problems as they solve. They may contain inherent incompatibilities, unexpectedly changing your layout settings, overriding core classes and even affecting your theme template. There are so many extensions available but you can’t assume from the marketing materials of the providers that they will deliver everything they claim without compromising other elements of your site’s performance. Even if all the plug-ins you use have no downsides, you can still find your site’s speed affected if you have too many of them. Make sure you use only those extensions that are essential. Most Shopify themes come with extensive built-in functionality, which minimizes the need to use third-party products.

4. HTTP Requests

Every action taken by a visitor to your site represents a Hypertext Transfer Protocol (HTTP) request. HTTP is the standard format which your site uses to send requests to servers and retrieve the resources required. This is how you communicate with the server in order to respond to the actions of a site visitor, whether to perform a product search, enlarge images, apply filters or load items into the shopping cart. An HTTP request is made every time your browser needs to access a file on the server and the more requests you have to send, the slower your site’s response times will become. There are various ways of reducing the number of requests, such as reducing the size of your images or combining them into a single series using a tool like CSS Sprites, which means you’ll only need one request for the whole group rather than separate ones for each image.

Broken Links

Keeping your site up to date is essential. Out-of-date content and product pages suggest a lack of professionalism and attention to detail that will instantly put visitors off. But your updating needs to be more thorough than this. Hyperlinks that guide users from one page to another are a great way of simplifying navigation, but if those links become invalid – perhaps because you’ve removed the page they link to or the URL has changed – when a customer clicks on one it will still generate a HTTP request, consuming memory and slowing the site down. The same applies with links to external sites. You need to keep your site content under constant review to eliminate all broken links. Quite apart from the impact on speed and the impression your site gives, trying to follow broken links can be immensely frustrating for consumers who rely on your site to take them where they expect to go. It’s another reason for them to leave in a hurry.

So to the question, how to improve my Shopify stores page speed. There are basically two answers: monitoring and maintenance. We’ve covered the major problem areas, but how can you identify problems and fix them?

Fastest Shopify Theme GTMetrix
Rank Higher GTMetrix

If the idea of making this kind of deep-dive audit of your Shopify ecommerce site seems daunting, then you’ll be pleased to hear we have some good news. There are several tools designed to help you do this, such as GTMetrix, Pingdom and SiteSpeedBot but the one we would recommend most highly is Google PageSpeed Insights. Since Google is the search engine market leader, it makes perfect sense to make use of their free analytics tool which will assess all the aspects of content we’ve discussed and show you page speed for both the mobile and desktop versions of your site.

The PageSpeed Insights (PSI) ranking score you receive isn’t directly related to your ranking score. Instead, it gives you an estimated overview. However, it is a very useful guide because it relies on many of the same metrics – such a core web vitals – that Google’s crawlers use in their indexing. It’s simple to use. All you have to do is navigate to the Google PSI tool and enter the URL of a webpage, then click ‘analyse’ and PSI will do the rest.

In order to generate its report, PSI collects the page’s field or performance data and measures its performance in a controlled simulation using Lighthouse API. Lighthouse is an open-source automated tool which features audits for accessibility, performance, progressive apps, SEO and every other important element. PSI produces a comprehensive report showing you how the page fared and what steps you can take to improve it. The report includes Core Web Vitals assessment, Lighthouse lab data and diagnostics as well as telling you where your site is performing well. It uses color coding for ease of reference: green for good, yellow for could be improved and red for poor.

Core Web Vitals

It’s worth saying a little about this topic because it forms the basis of your site’s performance. There are three Core Web Vitals:

Largest Contentful Paint (LCP)

This measures the speed at which a page’s main content is loaded, which is essentially the length of time from the initiation of loading to the full rendering of the largest image or block of text.

First Input Delay (FID)

This describes the time that elapses between the user’s interaction (by clicking on a button, for example) and the site’s response to that interaction.

Cumulative Layout Shift (CLS)

This metric is an indication of how often and how extensively the content of a page shifts or realigns while user is viewing it. A good example of this is what happens when a banner appears once the user is already engaged with the page and moves the text or image they are looking at to a new position on the screen. The sudden shift that occurs can be extremely intrusive and, therefore, off-putting.

Without going into too much detail, you should be aiming for all three metrics to return good results at the 75th percentile of each.

Choosing the Right Shopify Theme

We’ve identified two of the main areas for improving your site’s speed to be the optimization of images and the removal of non-essential apps. On the whole, everything we’ve talked about comes under one of these two headings. The third important issue is your choice of Shopify theme.

Shopify itself offers dozens of well-designed themes for online retailers of every kind. In addition, there are literally thousands which have been created by third-party developers to work with the Shopify platform. Many of these are free, but they offer limited functionality. You’ll have to pay for the more sophisticated ones but it’s a relatively small investment for the return you get, which is a fast, professional ecommerce store.

RankHigher Theme Speed

Since there are so many choices, it can be very hard to identify the best one for your business. Here we’ve focused on the non-negotiable importance of speed to an ecommerce site, so although continuous maintenance will always be necessary, you can give yourself a head start by choosing the fastest theme there is. By general agreement in the industry, the fastest in the world are to be found in our Rank Higher Theme collection.

Many themes focus solely on design but while we understand the importance of aesthetics, we know that this alone won’t bring you the traffic you need. We concentrate on all aspects of SEO and user experience, which together ensure you rank higher than with any other theme provider.

[1] https://www.statista.com/statistics/379046/worldwide-retail-e-commerce-sales/

[2] https://www.resourcetechniques.co.uk/news/seo/10-reasons-why-users-leave-your-website-in-10-seconds-101189

I help established e-commerce brands scale organically by 6 or 7 figures within 12 months using our world-exclusive Shopify technologies and brilliant content marketing strategies.

Write A Comment