What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) measures the visual stability of your website. It tracks how much your content shifts unexpectedly as the page loads, which can disrupt the user experience. High CLS scores can frustrate visitors, leading to a higher bounce rate and potentially lower conversion rates. CLS is one of Google's Core Web Vitals, making it a critical performance metric for SEO and user experience optimization. Keeping your CLS score low helps ensure your pages load smoothly, improving your site’s overall performance and rankings in Google Search.
Why Is CLS Important for Core Web Vitals?
CLS is one of three metrics included in Core Web Vitals, along with Largest Contentful Paint (LCP) and First Input Delay (FID). Together, these metrics assess loading performance, interactivity, and visual stability, which are essential for delivering a high-quality user experience.
A good CLS score is anything below 0.1, while a poor score is considered above 0.25. Keeping your CLS score low ensures that your site delivers a smooth, stable experience for your visitors.
For more detailed information on CLS and its benchmarks, you can refer to Google’s Core Web Vitals documentation.
How to Check Your CLS Score
There are several tools available to check your CLS score, including:
Google PageSpeed Insights
Enter your website URL to receive a detailed report on CLS and other Core Web Vitals metrics.
Chrome User Experience Report (CrUX)
This tool provides field data on your site’s performance, including real-world CLS scores.
Lighthouse
Available in Chrome DevTools, Lighthouse provides a lab-based CLS score during the page load simulation.
Configuring Klevu’s Shopify App to Improve CLS
Klevu’s Shopify App provides configurable settings that can help you reduce layout shifts during the search results page load, improving your CLS score.
Navigate to Shopify Admin → Online Store → Theme → Customize → Search Page → Klevu Search Results Block
[Recommended] Option 1: Load footer after Klevu Search Results
Enabling this option hides the footer element until the search results have fully loaded. This helps prevent the footer from shifting as new content is rendered, stabilizing the layout. Please note that the footer will remain hidden until either the search results are rendered or after 3 seconds, whichever comes first.
Footer CSS class
This option allows you to enter a comma-separated list of CSS selectors for elements you want to hide during the page load. This helps maintain a stable page layout, reducing CLS.
By using these settings, you can significantly reduce layout shifts during search load and improve your CLS score, helping you deliver a smoother and more stable user experience.
Option 2. Klevu Search Results Container Min-Height
This setting allows you to set a minimum height for the search results container, ensuring that the page layout doesn’t shift when search results are loaded. Leaving this blank will use the default settings, but specifying a height can prevent large layout shifts, leading to a lower CLS score.
Need Help? If you have any questions or need assistance configuring these settings in your Klevu Shopify App, please create a ticket.