What is 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.
Therefore: your page speed is not the same as your online speed score.
What is a Page Speed Score?
Your speed score refers to the Online store speed found on your Themes dashboard.
- Within your Shopify admin, click Sales Channels.
- Click Online Store, and select Themes from the menu.
- Scroll to Online store speed.
When this speed score is low, merchants often worry - after all, we know that page speed is important for both user experienceand search engine rankings.
How is Page Speed Measured?
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 thoughpage 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:
And by contrast, here is the same webpage being tested by an 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.
Not only do the page speedscores 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.
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:
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:
- Custom fonts
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.
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.
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.
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 Eight, 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.
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.
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.