seo site checkup logo
PricingFree ToolsArticles

Cumulative Layout Shift Test

What is it?

This test will check the Cumulative Layout Shift (CLS) score of the analyzed webpage. CLS is a Core Web Vitals metric calculated by summing all layout shifts that aren't caused by user interaction. Basically, whenever a page loads, certain page elements unexpectedly shift, affecting the way users interact with the webpage. A website with a low CLS has a stable page display, which does not shift elements around and ensures a steady, predictable loading of all website content. To provide a good user experience, Google recommends that sites should strive to have a CLS score of 0.1 or less.

Pass rate:

  • Top 100 websites: 94%
  • All websites: 77%
Pass rates of Top 100 US websites
2021

N/A

2022

94%

2023

94%

100

75

50

25

0

How do I fix it ?

Reducing CLS is crucial as pages that move around can result in a negative user experience (particularly on mobile devices). For most websites, you can avoid all unexpected layout shifts by sticking to a few guiding principles:

  • Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
  • Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This ensures any layout shifts that occur are expected.
  • Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.
Check your website's SEO for free right now!

seo site checkup logo
Website SEO, Monitoring & Automation Made Easy.
Product
  • Pricing
  • Free Tools
  • Articles
  • Login
  • Free 7-Day Trial
© SEO Site Checkup 2020-2024 • All rights reserved