Cumulative Layout Shift (CLS) is a Google metric that measures a user experience event and became a ranking factor in 2021.
That means it’s important to understand what CLS is and how to optimize for it.
Definition of Cumulative Layout Shift
What is Cumulative Layout Shift?
CLS is the unexpected shifting of webpage elements while the page is still downloading. The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons, and other kinds of content.
Minimizing CLS is important because pages that shift around can cause a poor user experience.
A poor CLS score is indicative of coding issues that can be solved.
Why CLS Happens
According to Google, there are five reasons why Cumulative Layout Shift happens:
- 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.
Images and videos need to have the height and width dimensions declared in the HTML. With regard to responsive images, make sure that the different images sizes for the different viewports use the same aspect ratio.
Google recommends using AspectRatioCalculator.com to calculate the aspect ratios. It’s a good resource.
Ads Can Cause CLS
This one is a little tricky to deal with. One way to deal with ads that cause CLS is to style the element where the ad is going to show.
For example, if you style the div to have a specific height and width then the ad will be constrained to those.
There are two solutions if there’s a lack of inventory and an ad doesn’t show up.
If an element containing an ad does not show an ad, you can set it so that an alternative banner ad or placeholder image is used to fill the space.
Alternatively, for some layouts where an ad fills an entire row on the top of perhaps a column on the right or left gutter of a webpage, if the page does not show up there won’t be a shift. It won’t make a difference either on mobile or desktop. But that depends on the theme layout.
You’ll have to test that out if ad inventory is an issue.
Dynamically Injected Content
This is content that is injected into the webpage.
For example, in WordPress, you can link to a YouTube video or a Tweet and WordPress will display the video or tweet as an embedded object.
Web-Based Fonts
Downloaded web fonts can cause what’s known as Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT).
A way to prevent that is to use rel=”preload” in the link for downloading that web font.
Lighthouse can help you diagnose what is causing CLS.
CLS Can Sneak in During Development
Cumulative layout shift can slip through during the development stage. What can happen is that many of the assets needed to render the page are loaded onto a browser’s cache.
The next time a developer or publisher visits the page under development, they won’t notice a layout shift because the page elements are already downloaded.
That’s why it’s useful to have a measurement in the lab or in the field.
How Cumulative Layout Shift is Calculated
The calculation involves two metrics/events. The first is called Impact Fraction.
Impact Fraction
Impact fraction is a measurement of how much space an unstable element takes up in the viewport.
A viewport is what you see on the mobile screen.
When an element downloads and then shifts, the total space that the element occupied, from the location that it occupied in the viewport when it’s first rendered to the final location when the page is rendered.
The example that Google uses is an element that occupies 50% of the viewport and then drops down by another 25%.
When added together, the 75% value is called the Impact Fraction and it’s expressed as a score of 0.75.
Distance Fraction
The second measurement is called the Distance Fraction. The distance fraction is the amount of space that the page element has moved from the original position to the final position.
In the above example, the page element moved 25%.
So now the Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction:
0.75 x 0.25 = 0.1875
There’s some more math and other considerations that go into the calculation. What’s important to take away from this is that the score is one way to measure an important user experience factor.
How to Measure CLS
There are two ways to measure CLS. Google calls the first way in the Lab. The second way is called in the Field.
In the lab means simulating an actual user downloading a webpage. Google uses a simulated Moto G4 for generating the CLS score within the lab environment.
Lab tools are best for understanding how a layout may perform before pushing it live to users. It gives publishers the opportunity to test a layout for issues.
Lab tools consist of Chrome Dev Tools and Lighthouse.
Understand Cumulative Layout Shift
It’s important to understand Cumulative Layout Shift. It’s not necessary to understand how to do the calculations yourself.
But understanding what it means and how it works is key as this has now become part of the Core Web Vitals ranking factor.
Featured image credit: Paulo Bobita
