Online shopping has been around for years. However, the COVID-19 pandemic drastically changed how and to what extent people shop.
It is hardly news that one of the main platforms used for online stores is Shopify and the number of merchants keeps increasing. In 2021, Shopify had 2 million merchants and this number has risen to approximately 2,6 million during 2022.
Online shoppers expect a seamless experience where site speed is crucial – if you as a merchant can’t deliver, the customers will find someone who does. The Google page score for your Shopify store is key to increasing your conversions and will influence your customer’s decisions.
What is a page speed score and why is page speed important?
The page speed score is how fast a webpage loads. It is closely connected to a good user experience. Google states that improving your page speed with just ONE SECOND increases conversions from phones by up to 27%.
Let’s face it – no one wants to wait for a webpage to load for a long time, especially if there is money to be spent.
What is a good page speed score?
Page speed score is measured in numbers, from 1–100 with 100 being the highest score. As a Shopify merchant, you want to aim for over 70 for your page to be considered “great” in its speed score.
A score of 70+ will ensure that your Shopify store is fast enough to cater to your customers and have them come back as returning customers.
6 ways to measure speed score for your Shopify store
There are many ways to measure the speed score of your webpage or Shopify score. We will cover the 6 most used metrics for measuring your online store page speed.
-
LCP measures main content load time
Largest Contentful Paint, or LCP, is used to measure the render time of the largest text box or image on the screen, and it should take less than 2.5 seconds.
LCP is an important metric because it measures how quickly the main content of a webpage loads. This determines how quickly a user can begin to use the page – or start shopping.
. -
CLS measures visual stability
Cumulative Layout Shift, or CLS, is a metric greatly focused on measuring user-friendliness and visual stability. With poor CLS, the customer is likely to encounter shifting text, boxes moving around or images jumping around.
This type of website behavior will greatly damage the user’s shopping experience. So, aim for a low CLS metric for a better and more user-friendly webstore.
.
-
FCP measures the first action on a page
First Contentful Paint, or FCP, is a very important metric for measuring page speed because it works somewhat psychologically. It measures perceived load speed, or in other words when the user first sees something happening on the screen instead of a plain white page.
This tells the user that things are loading, and they can soon begin their shopping spree.
. -
TTFB measures web server responsiveness
Time to First Byte, or short TTFB, is used to establish the connection setup time and the responsiveness of the web server. TTFB checks if the web server is too slow, and requests for an HTML document.
In practice, this means that it is one of the most important metrics for measuring page speed, because without a good connection with the server, nothing else can load.
. -
FID measures loading responsiveness
In short, First Input Delay, or FID, measures loading responsiveness, and the lower the FID metric, the better the page.
This metric is important because it is a way of measuring the user’s feelings and frustration when encountering unresponsive pages.
. -
INP measures page responsiveness
Interaction to Next Paint, or INP, measures page responsiveness and with this metric, a lower number indicates better performance which means that the webpage responds quickly to clicks and commands.
As you can see, all these parameters contribute to measuring the page speed score on all websites, including your Shopify store. As a Shopify merchant, it is in your best interest to improve and optimize the speed for your online store to increase your sales.
10 Methods to improve your Shopify store page speed score
We have covered the importance of page speed score for online stores, and next up, we will go through 10 methods to improve the page speed of your Shopify store.
These methods are closely linked to the measuring parameters of user experience and other variables we just went through.
-
Minify and reduce CSS and JavaScript
CSS and JavaScript are used to style a website or website and make it dynamic and interactive but going overboard can slow down your page loading speed.
Minifying CSS and JavaScript is one way of increasing your page speed score. By doing this, you reduce unnecessary CSS code to speed up the loading of the page.
Unnecessary or unused CSS code includes for example spaces, indents, comments and line breaks which are frequent in CSS coding. While they help the coder get a better overview, they aren’t needed for the browser to load the code.
By removing these, you will reduce the size of the CSS file resulting in faster page speed.
. -
Preconnect to required origins
Preconnect to requires origins means that the website establishes a connection to various third-party domains in order to reduce the time when a user downloads a page. This does not affect your page score but has proven to make a difference in load times in testing.
This is optional, but highly recommended. Using this preconnect enables the browser to understand that you want the page to connect to another origin, as soon as possible. This is possible by adding a very tag to the coding.
. -
Avoid multiple page redirecting
A page redirect is when one page sends the user to another page. Redirecting users multiple times before they get to the final destination increases loading speed. This in turn means that it takes longer for the user to see anything happening on the screen.
Multiple page redirects are something any online store owner wants to avoid. It takes a lot of time, and it can also make users question the validity of the Shopify store and impact their trust.
. -
Use video format
For animated content, opt for video formats instead of GIF animations. It looks better, more professional, and is definitely immensely better for your page speed-wise.
. -
Preload LCP images
Preloading LCP images means that users won’t need to wait for images to render when they are already on the page. This helps in building a web store that guarantees a better UX and gets the user started on their shopping faster.
. -
Get rid of render-blocking content
Render-blocking content, such as scripts, stylesheets or HTML can block or slow down the browser when loading the page content.
Find a way to substitute it with something else that will load better and faster (like video instead of animations) to improve the user experience and page speed.
. -
Make sure the text stays on screen during web front loading
Another tip for a fantastic user experience is coding your page to display text while the web front loading. This is another psychological trick that makes users feel like ‘’something is happening’’ instead of seeing a blank screen.
Frontloading means that the most important content is displayed first. This means that the user can start skimming through the webpage while waiting for the rest of the content to load.
. -
Avoid large layout shifts and non-composited animations
Large layout shifts where content moved around unexpectedly on the page, and non-composited animations that can make the website slower.
They can mess up the view of your Shopify store because they’re big and take more time to load. The best thing to do is try to come up with a user-friendlier option.
. -
Use properly sized images
Using properly sized images means that the images shown to the user look like they are high quality, without being any larger than needed for the display size.
By reducing the image size to only the needed dimensions, you can improve the page speed on your Shopify store for both mobile and desktop.
. -
Try to defer off-screen images
Deferring off-screen images means that you code your page in a way that does not load the images that are not in the user’s view field. This enables the page to load faster and positively impacts your speed score.
Start improving your Shopify store page speed now!
There are numerous ways to measure and improve the Google page speed score for a Shopify score. Find out your Shopify store page speed and take the necessary steps to increase the speed, now.
After all, your customers value a webstore that loads quickly, and this will affect their decision to spend money at your store – or go somewhere else. Remember, ONE SECOND faster load time can improve sales conversions by 27%. Don’t miss out on sales and regular customers that want to come back to your store.
