Morioh
Login
Luca Fecarotta

Luca Fecarotta

4 years ago

Learn how to avoid sudden layout shifts to improve user-experience

“I was about to click that! Why did it move? 😭”

Layout shifts can be distracting to users. Imagine you’ve started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news, or trying to click those ‘Search’ or ‘Add to Cart’ buttons. Such experiences are visually jarring and frustrating. They’re often caused when visible elements are forced to move because another element was suddenly added to the page or resized.

Cumulative Layout Shift (CLS) - a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don’t occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.

In this guide, we’ll cover optimizing common causes of layout shifts.

Cumulative layout shift measures layout shifts to ensure users experience smooth and natural interactions. In this graphic, we highlight sites should strive to have a CLS of less than 0.1 while a CLS of over 0.25 is considered poor.The most common causes of a poor CLS are:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Dynamically injected content
  • Web Fonts causing FOIT/FOUT
  • Actions waiting for a network response before updating DOM

#web-development

Optimize Cumulative Layout Shift

web.dev

Optimize Cumulative Layout Shift

Learn how to avoid sudden layout shifts to improve user-experience. Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.

26.50 GEEK