Cumulative Layout Shift (CLS)

What is a layout shift?

Layout shift in web development is when elements on a page move around unexpectedly while the page is loading, causing things to "jump" or "shift."

This creates a bad experience for the user, because it’s easy to misclick things and it looks unprofessional.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is the “visual stability” metric of Core Web Vitals. First, what is visual stability? It’s the visual experience when loading the site. Do things rearrange or resize on load? Are boxes, elements, and text moving around the page as elements are loading?

CLS looks at the frequency and severity of unexpected “layout shifts” on a web page. It measures if any unexpected changes happen on the web page after some of the elements can be interacted with.

It creates a metric that grades layout shifts by multiplying the fraction of the viewport affected by the shift with the distance the elements moved. The scores are then accumulated as the user interacts with the page, providing a measure of the overall layout stability.

The more things that move, the worse your CLS score will be.

How is CLS calculated?

• CLS is an average of all individual layout shift scores for every unexpected layout shift on the page.
• Each shift score is based on Impact Fraction (the proportion of the viewport affected by shifting elements) and the Distance Fraction (how much these elements have moved). Layout Shift Score = Impact Fraction x Distance Fraction.
• Note that user-initiated shifts are excluded (like an item moving from a “Mouse click” Webflow Interaction trigger)
• A great CLS score will have
  • Little to no layout disruption/change on page load.
  • Little to no content moving or “jumping” as more content is loaded on the page. This will prevent accidental clicks due to newly loaded content.
  • Little to no dynamically or asynchronously loaded assets.

What types of content create CLS issues?

The biggest cause of layout shifts in Webflow projects are images without width, and height attributes. This is an easy fix that we cover later in the article.

These are some of the most common element types that cause CLS issues:

• Images without dimensions
• Ads
• Embeds
• iframes (videos or other)
• Dynamically injected third-party content (coming outside of Webflow CMS!)
• Webfonts

Note that these content types take more time to load than other content types because their content is fetched from somewhere else. Requests to third-party services take time, and the response of the information may cause a shift in layout after other page elements have already loaded.

Does CLS influence SEO?

Neither CLS nor Web Core Vitals are ranking factors for search engines. While Web Vitals metrics will not directly affect your website rankings, they are important principles for great web developers to understand. Bad scores that indicate a bad user experience may hurt your SEO if users bounce from your website.

Understanding CLS and how layout shifts work can help avoid “rage quits” or wrongful interactions on your web page. Optimizing your CLS is crucial for a great first impression on your website.

What is a great CLS score?

Google considers CLS scores below 0.1 good and scores above 0.25 will be considered bad user experience.

How to optimize Webflow websites for CLS?

• Define width and height attributes for images, videos, embeds, and iframes. In Element Settings panel of Designer, we can apply both width and height to an image. This helps the browser create the correct amount of space while media is loading. If your CSS file is taking too long to load, your image may “jump” in size once the styles are applied to it. These width and height attributes are available to the web page immediately upon load.
• Create space for dynamic content. If you’re loading embeds, iframes, ads, or anything else dynamic, you want to make sure this doesn’t influence CLS. If your iframe is going to be 500px x 300px on the page, create 500px x 300px container for it. On a parent div, apply this width and height value. When he iframe loads inside it, nothing on the page will shift. The 500px x 300px space is already there.
• Use CSS Aspect Ratio Boxes. For responsive designs that can’t use defined width and height, use aspect ratio boxes. This is where you create a parent container that has a percentage-based padding top or bottom. Check out CSS Tricks awesome article here. And this Webflow cloneable by Pablo Stanley here.
• Review dynamic components like accordions, tabs, sliders, and Webflow Interactions. Make sure expanding, collapsing, moving, viewing, and hiding content does not cause unexpected layout shifts.
• Animate with the lighter and more performant CSS transform property instead of JavaSciprt-based animations like GSAP or Webflow Interactions.
• When applying a fallback font, use the size-adjust property to maintain size when the font switches. Use the size-adjust descriptor in your @font-face.will make sure that the fallback font and final font are the same size and take up the same space on your website layout.
• Use the content-visibility CSS Property. This allows you to skip rendering elements until they are needed (not within the viewport). This can prevent unexpected shifts and improve loading speed.