What is Page Speed?
Page speed is the time to load store pages. 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 the user experience, but measuring that feeling can be subjective, complex, and volatile.
Oh, one more point: 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 then Themes.
- 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 experience and 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 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. The number of 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 displays.
For comparison, here is an example of a page's speed score calculated by Google PSI.
Therefore, page speed results can 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 for desktop view and mobile view.
This is because the mobile score is sourced from emulators - programs that mimic a mobile device inside your browser instead of using an actual mobile device.
This testing approach can, therefore, lead to inconsistent and inaccurate results. It can create a score without involving real mobile software or hardware. That means the same SEO report can produce 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: page speed is not the priority for your storefront.
To understand this, it might be useful to think of your page as 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 the car.
Features That Slow Pages Down
It's important to consider your page speed in relation to other storefront priorities because often the features that make a page stand out are the same ones that slow it down.
Examples of these 'heavy' features include:
- Apps
- Images
- Videos
- Custom fonts
The more you add to a theme's code, the heavier it becomes and the slower it performs.
Adding assets like apps, pictures, and interactive elements to your storefront is like adding modifications to a car. While they may improve functionality and appearance, these assets add weight that will inevitably slow down page performance.
Compromising Speed For Functionality
All of this leads to a conclusion: 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're willing to make.
A merchant prioritizing functionality might add an app, like a car owner prioritizing functionality might add a heavy child car seat to the family car.
A merchant prioritizing style might add images and interactive elements, like a car owner prioritizing style might add heavy tyre rims to a vintage car.
Beware of 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 the theme 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 car owner fixated on speed might spend time and money turning their car into a racecar.
While a racecar would be fit for the race track but not for the roads, this page might 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 prioritize speed rather than what ultimately matters to your store: user experience.
A school bus would perform well 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 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:
- Testing our themes regularly.
- 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 that don't require advanced development.
Reduce & Compress Images
Each image added to a page slows down its load time, especially if it's a high-definition image.
🌟 We recommend reducing the overall number of images on your store if high-quality photography is a priority, thereby compensating for the drag on load times caused by the remaining photos.
🌟 We recommend compressing your JPEG images to make minute changes that can 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 the necessary minimum.
🌟 We recommend seeking recommendations from the app developer on keeping their app working as efficiently as possible.
Reduce the Number of Slides
The Slideshow element is a known cause of long load times. It can be found under Home page > Add Section.
🌟 We recommend limiting the number of slides to two.
Eliminate Sections
The more active Sections your Home page has, the greater the initial load time your customers experience.
🌟 We recommend linking to a separate page that houses the actual content, thereby reducing the amount of content your Home page has to load.
Limit the Number of Fonts
Adding custom fonts to your theme can result in longer load times.
🌟 We recommend limiting the number of custom fonts to two.
Avoid Dynamic Checkouts
The Dynamic Checkout button negatively impacts your page's performance.
🌟 We recommend you toggle this off if it isn't needed.