Creating a unique customer experience has been championed as one of the ways to help increase conversions. Especially since online behaviour has changed and customers seek to find not only the best products for them but buying them from a brand that matches their values. This has prompted brands to create informative and unique on-page experiences for visitors. But all of the rich media, apps and features that you’re using on your landing pages could be affecting your Shopify Page Speed.
How your Shopify store loads for your customers is crucial and you could be losing customers at the cost of trying to bring more customers in. In 2021, Google noticed this and made user experience play an even bigger role in how you’re ranked within its searches. This is all powered by new metrics, fail to make a smooth customer experience and you’ll start to find you slide down the rankings and you’ll likely see a bit of a hit on your conversions.
What is CLS (Cumulative Layout Shift)?
Cumulative Layout Shift is a measure of how a website behaves and if it behaves as the user expects it to. Ever been on a website trying to buy something and you get flung halfway down the page and lose where you’re at? That’s what Google is looking for.
We all love great dynamic web designs where we have elements moving on the web page aesthetically and creating an overall unique experience, but to create these experiences there is a lot of code making it all work, sometimes, these experiences can often be a pain for visitors, resulting in web pages loading slow.
Different websites and errors will show differently to users. Some may just get pushed down the page a bit and lose where they’re at. For other websites, it can be noticeably worse, with some users unable to click certain buttons such as ORDER NOW or CANCEL or may end up clicking something completely different to what they intended.
Not only is this a terrible user experience, but it’s also bad for your rankings and more importantly your conversions. Even if the error is only minor (e.g. users are pushed down the page slightly) this will still have quite a big impact on your rankings.
As you can imagine, for an e-commerce site this is detrimental.
What causes CLS?
CLS can occur because of a number of different errors. Sometimes it can be down to Javascript injecting some dynamic content or something as simple as images and videos of unknown dimensions.
Sometimes brands try to make life easier and increase conversions by installing various different apps to help improve functionality or user experience, but this can also increase your CLS score and make it hard for users to navigate your pages as apps can defer Javascript or make them asynchronous. So it doesn’t block the DOM from being loaded and when the page is loaded Javascript runs and injects elements into DOM thus creating high layout shifts.
Because a lot of conversion targets rely on calls to action or other important information being in the viewpoint we need to control the CLS. The metric to measure CLS is well defined by Google, anything below 0.1 is a good CLS score and above 0.25 is considered poor. There is a formula on how google calculates the value.
layout shift score = impact fraction * distance fraction
Good and Bad CLS Shift
Not all Cumulative Layout Shifts are bad, some are actually essential, for example when a user performs a certain action and the layout changes and there is a strong correlation between the action performed and the outcome. Layout shift is only bad when it’s unexpected and causes the page to glitch between positions.
How to Prevent Cumulative Layout Shift
Images with unknown height and width when appearing in the Document Object Module cause a sudden shift in the viewport and the content below it gets pushed down. To prevent this, give a height and width to image and iframe elements and this way even when the image is not loaded it will retain its position.
For elements that need fixed height, but not fixed width try using the min-height property, these are usually fixed-size headers and for those who are width dependent use min-width.
Shopify Store Speed Results
Desktop store speed results before:
Desktop store speed results after:
Mobile store speed results before:
Mobile store speed results after:
Losing potential customers to slow site speed? Book your free Shopify store audit with us below.
