The Google Search Console includes a new score for CLS (Cumulative Layout Shift).
What is this for?
CLS measures how much of a webpage's layout shifts after the initial loading of the page. This often applies to third-party app features that might not load until after the initial page load. This also ties into the lazy-loading present in your theme. Lazy-loading means that not all images on a particular page are loaded at once, some images load in the background after the initial page load. This is to speed up the loading of each page.
So the CLS score could be impacted by lazy-loading as well as apps that load their content/feature after the initial page load.
"Good website performance has already been shown to positively affect how users engage with your website. Shoppers are more likely to stay on your site and complete a purchase if it’s fast."
- Devised Labs: Improving Core Web Vitals for Shopify Sites
What's causing CLS in my store?
There are several potential sources for CLS.
Apps
Added apps often include their own loading patterns, which can interrupt, postpone, or even obstruct functions of the theme. If CLS became an issue after adding a particular app, it's likely that app is the source of the issue.
Tip: Check the theme.liquid file for added script codes from apps
Old theme version
Vintage approaches to theme development may conflict with current standards for CLS. Update to the latest version to confirm your theme is using the most current and optimized architecture.
Updating your theme with Theme Updater
Modified theme files
If you have modified your theme files, it's likely that these changes are behind CLS instances in your store. Revisit the theme files modified and identify any image-related changes.
Informational Guide Only
This article is provided for informational purposes only and is not supported by Out of the Sandbox support. For further assistance with this, please contact third-party developer for assistance.