The Cumulative Layout Shift (CLS) is a new metric being introduced by Google that will measure a user experience on a web page. According to the announcement by Google, this metric will be a top-ranking factor in 2021. This means it is crucial to understand what the CLS is and how to optimize it properly.
What Is the Cumulative Layout Shift?
The CLS is an unexpected shifting of web page elements while the page is downloading. The features that usually shift include buttons, contact forms, videos, images, fonts, and other types of content. Reducing CLS is crucial because the pages that move around can cause a poor UX (user experience).
If your site has a poor or low CLS score, it is a sign of coding problems that can be fixed.
Why Does CLS Occur?
There are five main reasons that a Cumulative Layout Shift may occur. These include:
- Dynamically injected content. This type of content is designed to change based on the user. For instance, a welcome message on your website that provides a person's actual name is the data is readily available.
- Images with no dimensions
- Actions waiting for a network response before updating the document object model (DOM)
- Web fonts resulting in a flash of invisible text (FOIT)
- Embeds, iframes, and ads with no dimensions
Videos and images must have width and height dimensions that are set in the HTML. With responsive images, be sure the varied images sizes for each viewport are using the same aspect ratio.
Google has recommended the use of AspectRatioCalculator.com to provide an accurate aspect ratio calculation. It is a helpful resource.
CLS May Occur Because of Ads
This one is more challenging to deal with. One way to handle ads that cause CLS is by styling the element where the ad will appear.
There are two solutions if there is minimal inventory, and ads do not show up. If elements containing advertisements do not show the ad, you can set it, so an alternative banner ad or a placeholder image is used for filling up the otherwise empty space.
Another option for some layouts where the ads fill the entire top row or left or right gutter of a web page, if the page doesn't appear, there will not be a shift, and it won't make a difference on mobile or desktop devices. However, this is dependent on the theme of your layout. You must test to discover if ad inventory is going to be an issue.
Now is the time to learn more about CLS. While you don't need to know how to do the calculations for this ranking factor on your own, just knowing it exists and learning the key points detailed here will help you avoid issues.