What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is the third and final metric that makes up the new Google Core Web Vitals metrics. CLS measures the extent at which elements move around on the page whilst it’s loading and is most likely the area where we are seeing the majority of websites perform poorly. Google explains CLS as  “the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.”

What this means is that CLS is a measurement of every visible element on the screen that moves from its original position whilst the page is loading. Google says that sites should aim to have a CLS of less than 0.1  and, to ensure you’re hitting this target, they recommend a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Why is CLS  Important

CLS is important as it helps to quantify how often users experience elements of the page jumping around – a page that has unexpected elemental shifts will provide a poor user experience. It is however important to remember that not all layout shifts are bad, with Google stating it’s only an issue when the shift is unexpected – such as when a page link button unexpectedly shifts resulting in the user performing an undesired outcome.

Here is an example, provided by Google of an unexpected layout shift on their WebDev site:

How do you measure CLS

CLS can be measured both in the lab, or in the field, using the same set of tools used to measure LCP (see our previous article Demystifying Google’s Core Web Vitals: First Input Delay). It’s important to note that, when measuring your CLS using lab tools, pages will load in a synthetic environment meaning values could be less than what users are experiencing in the real world.  We recommend using a combination of lab and field data to understand how your site is performing.

When calculating CLS, there are two key metrics to be aware of – Impact Fraction and Distance Fraction:

• Impact fraction is the measure of how unstable elements impact the visible area of the screen (viewport) between two frames.
• Distance fraction is the measure of the distance that unstable elements have moved, relative to the viewport. The Distance fraction is the largest distance any element has moved in a horizontal or vertical direction.

How to Improve CLS

There are common causes behind unexpected layout shift and following some simple guidelines can see some drastic improvements in your CLS score:

• Size attributes
  • Ensure you always include size attributes on images and videos as a best practice.
  • Alternatively you can use CSS to style any container elements to the same size or aspect ratio before the content is loaded.

• Advertising
  • Ads are one of the biggest offenders to layout shift issues and can significantly impact the user experience by pushing content down the page with Publishers and networks often using dynamic ad sizes.
  • One solution is to remove the advertising completely from your site, however, if this isn’t an option you can pre-allocate space for the ad using CSS to style the element for the dynamic ad contents load. Much in the same way you would for images and videos.

• New Content
  • Keep unexpected layout shifts to a minimum by never inserting content (e.g. ads, forms, pop-ups etc.) above existing content unless it’s in response to a user initiated action.

—

Want to learn more? Explore the series; Demystifying Google’s Core Web Vitals. Or for more information on what the algorithm update will look like, have a read of our previous article Google’s New Search Criteria to familiarize yourself with Page Experience Signals, and what the update will mean for the marketing industry.