Improving Page Speed

Overview

Your speed score refers to the Online store speed found on your Themes dashboard.

  1. Within your Shopify admin, click Sales Channels.

  2. Click Online Store, and select Themes from the menu.

  3. Scroll to Online store speed.

Your store's speed score, as found on your Themes dashboard.

When this speed score is low, merchants often worry - after all, we know that page speed is important for both user experience and search engine rankings.

However, there is no need to panic:

Your speed score is not the same as your page speed.

What's A Speed Score?

Page Speed

Your page speed is the time it takes to load the pages in your store. It feels great when a page loads quickly, and this is what we call the user's perception of performance - or rather, its perceived speed.

How fast a page feels is therefore what ultimately matters for user experience, but measuring this feeling can be subjective, complex, and volatile.

Measuring Page Speed

As difficult as it is to do, measuring page speed does serve a purpose: since 2010, Google has used page speed as an SEO ranking factor - the faster a page loads, the higher it will rank in search results.

Therefore, even though page speed metrics are not fully comprehensive in measuring your page's performance and user experience, Shopify opts to display a speed score.

Google PageSpeed Insights

Your speed score is therefore one of many interpretations of measuring page speed, and for Shopify this is calculated by Google PageSpeed Insights (PSI).

Google PSI runs a battery of tests against your page, and the number of these tests you pass determines your score. While these metrics are certainly not the be-all-and-end-all for determining how your store is performing, they are the ones that Shopify display.

For comparison, here is an example of a page's speed score being calculated by Google PSI:

A store's performance score according to Google PSI: 40.

And by contrast, here is the same webpage being tested by an independent speed checker:

A store's performance score according to TestMyStoreSpeed.com: 78.

Click here to be taken to our recommended independent speed checker.

Therefore, your page speed results vary greatly between different performance testers - so there's definitely no need to panic if your Shopify speed score seems a little low.

Mobile View

Not only do the page speed scores vary between performance testers, but further disparity stems from the fact that separate tests are run depending on whether the page is in desktop view or mobile view.

A mobile view score (18) compared to a desktop score (70).

This is because the mobile score is sourced from emulators - programs which mimic a mobile device right inside your browser, instead of using an actual mobile.

Therefore, this can lead to inconsistent and inaccurate results - creating this score without involving real mobile software or hardware can mean that the same SEO report may give dramatically different results each time you run the test.

Does This Score Matter?

While Google PSI can be a useful tool for highlighting areas of improvement within your page's performance, it's important to put it into perspective: your page speed is not the priority for your storefront.

To understand this, it can be useful to think of your page like a car:

🚘 Example:

Imagine your theme's code is like a car that takes your customers where they want to go. Your page speed is therefore like your car's speed - it's always an important factor for drivers, but it's very unlikely to be the most important factor when determining the value of a car.

Features That Slow Pages Down

The reason it's important to consider your page speed in relation to other storefront priorities is because often, the features which make a page stand out can be the same ones that slow it down.

Examples of these 'heavy' features include:

  • Apps

  • Images

  • Videos

  • Custom fonts

🚘 Example: The more you add to a theme's code, the heavier it becomes, and the slower it performs. Adding apps, pictures, and interactive elements to your storefront is like adding modifications to a car; while they may improve the functionality and appearance of your pages, they will inevitably slow it down under the weight.

Compromising Speed For Functionality

This is why chasing a perfect speed score isn't as simple as it seems: the extent to which you should prioritize your store's page speed is a value judgment that depends on your priorities, your store's unique selling points, and the compromises you are willing to make.

🚘 Example: A merchant prioritizing functionality might add an app, like a driver prioritizing functionality might add a heavy child car seat to a family car. A merchant prioritizing style might add images and interactive elements, like a driver prioritizing style might add heavy tyre rims to a vintage car.

Beware Chasing a Perfect Score

While following every suggestion from Google PSI can improve your speed score, it can actually be detrimental to your store as a whole:

  • Customizations can be time-consuming and expensive when hiring bespoke services.

  • Making intricate changes to the code can make it much harder to customize in the future.

  • Compromising apps, fonts, videos or images can mean compromising your unique selling points.

So, what would a page with a score of 100 look like? Something resembling a non-customizable, vacant page with limited elements - not ideal for a storefront.

🚘 Example: A merchant fixated on page speed might spend time and money tampering with the code and removing features to achieve a perfect score - like a driver fixated on speed might spend time and money turning their car into a racecar.

However, in the same way that a racecar would be fit for the race track but not fit for the roads, this page may only succeed as a search engine result, and not as a functioning store.

What Matters is User Experience

Your Online speed score therefore isn't wrong - it's simply misleading. Its metrics only prioritize speed, rather than what ultimately matters to your store: user experience.

🚘Example: A school bus would perform excellently when the metrics prioritized capacity, such as when taking children to school. However, it would perform badly when the metrics prioritized speed, such as in a Formula 1 race. Therefore, it's important to remember the purpose of your store's page: to sell your brand and products - after all, there's no point kicking the kids off the bus just to get to school on time!

Therefore, you should aim to optimize your page speed for the sake of improving your user experience, and not for achieving a perfect score.

How Should I Improve My Page Speed?

Here at WeTheme, we work hard to optimize the performance of our themes. We do this by:

  • Regularly testing our themes

  • Following Shopify's most up-to-date guidelines

  • Implementing best practices for new features.

However, there are things you can do to improve your site speed which don't require advanced development.

Reduce & Compress Images

Each image added to your page slows its load time down - especially if it's high definition.

🌟 We recommend reducing the overall number of images on your store if high-quality photography is a priority, therefore compensating for the load-times of the photos that remain.

🌟 We recommend compressing your JPEG images to make minute changes which will significantly improve your speed.

To optimize and compress your images, click here for a Shopify app that we recommend.

Reduce & Monitor Apps

Each app added to your store also adds loading time to your pages.

🌟 We recommend testing each app both in isolation and on the main store - and using only the necessary minimum.

🌟 We recommend seeking recommendations from the app developer on keeping their app as efficient as possible.

Reduce the Number of Slides

The Slideshows element can be found on our themes under Homepage > Add Section > Image - and it is also a known factor of long load times.

🌟 We recommend limiting the number of slides to no more than two.

Eliminate Sections

The more active Sections your Homepage has, the more initial load time your customers will face.

🌟 We recommend linking to a separate page that houses the actual content, therefore reducing the amount of content your Homepage has to load.

Limit the Number of Fonts

Adding custom fonts to your theme can result in longer load times.

🌟 We recommend limiting these to no more than two.

Avoid Dynamic Checkouts

The Dynamic Checkout button is known to negatively impact your page's performance.

🌟 We recommend you toggle this off if it isn't needed.

Advanced Options

If you would like to take a more advanced approach, you can consider implementing the suggestions provided by Google PSI.

However, as with most advanced options, there are pros and cons to addressing these complex warnings - to learn more, please read our guide on PageSpeed Insight Warnings:

Further Information

For more information, we recommend reading Shopify's help pages.

For further assistance with SEO and ranking, we recommend reaching out to a specialist: