Cumulative Layout Shift — How to Measure and Fix CLS

How to Measure and Fix CLS
How to Measure and Fix CLS

How CLS Will Shape Google’s Organic Search Results in 2021

CLS, or Cumulative Layout Shift, is a main factor in the next Google algorithm update called Page Experience that will impact organic page rankings and is expected to roll out sometime in early 2021. CLS is a very important user experience-focused way to measure the visual stability of websites. Visual instability is in most cases is just an inconvenience for web users, but in some cases, poor visual stability can cause unwanted transactions or interactions that are much beyond inconvenient for the audience.

What is Cumulative Layout Shift?

The video below illustrates an example of a website with a clear layout shift and a distinct lack of visual stability that results in an unwanted monetary transaction for the user. When the web page first loads, the “Yes, place my order” button appears above another button that allows the user to “Go back”. After the buttons load, there is dynamically injected content in the layout as a promotional banner that appears at the top of the page, and the resulting shift pushes the action buttons and other elements down. When this layout shift occurs as a user is performing an interaction, it can result in unwanted outcomes. In this case, an unwanted credit card transaction.

What is Cumulative Layout Shift and How is It Measured?
What is Cumulative Layout Shift and How is It Measured?

Causes of Cumulative Layout Shift (CLS)

Unexpected movement of web page elements and page content usually happens when dynamically injected content and UI resources are loaded asynchronously or when DOM elements are dynamically added to the web page above the existing page content. In many cases, the offending page element causing layout shifts is an image or video with height and width dimensions or aspect ratio that are unspecified in the source code. In some cases, cumulative layout shift can also be caused when fonts render themselves larger or smaller than their fallback, or a third-party ad or widget dynamically resizes itself, causing unwanted layout shifts.

According to Google, there are five main causes of cumulative layout shift.

There is a way to measure the impact of layout shift on your website using the Cumulative Layout Shift (CLS) metric. This measurement provides us with measurable CLS results by measuring how often it’s occurring for live web users. It’s often difficult to accurately measure page shift ourselves as web pages, and their connected assets are often cached in our web browser and therefore limit the extent to which we experience cumulative layout shift on websites we visit frequently.

How is CLS Measured?

CLS is designed to measure all of the individual layout shift scores for each page content shift that is considered to be unexpected within the web page that ultimately affects user experience. Whenever visible design or content elements change position within a rendered frame on a website, it is counted as a layout shift.

What is a Good CLS Score?

When we measure CLS to determine the cumulative layout shift score on a web page, we hope to see a CLS score of less than 0.1. Site speed and user connection can also play a role in determining the cumulative layout shift score, so we should aim to measure the 75th percentile of page loads across desktop and mobile devices. To provide great user experience, web designers must make sure their designs have a CLS score of less than 0.1.

To learn more about the methodology and the research that is behind Core Web Vitals and how it scores layout shifts, I’d recommend reading Defining the Core Web Vitals Metrics Thresholds.

How to Measure CLS

Cumulative Layout Shift can be measured in two ways using a variety of different tools.

Measure CLS in the Lab Measure CLS in the Field

Keep in mind that the Lab Tools noted here most often load webpages in a synthetic environment. What this means is that they are only able to measure layout shifts that happen as part of the original page load action. As such, CLS metrics that are reported by the Lab Tools for a given user experience can sometimes be much lower than what actual web users may encounter.

How to Fix a Low CLS Score

In many instances, website designers can avoid unexpected layout shift that would result in a low CLS scope by adhering to a few basic best practices:

To really get under the hood and understand how to optimize CLS, this article provides expert-level insight and additional best practices to follow.

Planning Ahead

Google’s Page Experience update is set to roll out in early 2021, and CLS will become one of the most important signals to determine organic page rankings within the search engine algorithm. Website owners that take the initiative to analyze assess and correct their website layout shifts and CLS issues now are the ones that will rise to the top of the search engine rankings.

Contact us today to learn more about how we can help future-proof your website and digital marketing engine against the upcoming changes.

Originally published at https://parachutedesign.ca on September 16, 2020.

Written by

Parachute Design Group Inc. is a boutique Toronto web design agency specializing in beautiful hand-made website design, custom logo design and branding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store