How to Boost WordPress Cumulative Layout Shift (CLS)

One of the three indicators in Google’s new Core Web Vitals initiative is cumulative layout shift. If your Cumulative Layout Shift Score is outside of Google’s suggested range, you should make the necessary corrections right away to avoid any problems and fall inside Google’s acceptable range.

Cumulative Layout Shift (CLS): What Is It and Why Does It Matter?

It is a core web vital metric and measures how stable a page is visually.

The cumulative layout shift score is calculated as the total of all these shifts.

You’ve definitely encountered it in your own life, and it’s quite frustrating, which is why Google is urging webmasters to focus on and enhance this measure. All of these instances of layout changes result from components on the page becoming unstable and shifting positions on the page.

One of the three Core Web Vitals metrics measuring a page’s user experience is Cumulative Layout Shift because of this.

A significant statistic for user experience and the new ranking component, the Cumulative Layout Shift makes up 15% of the PageSpeed score.

What’s a Good CLS Score

The total number of unanticipated content shifts that take place on a page is known as the CLS. Your CLS grade could pass or fail Google’s evaluation depending on the total of all the shifts.

A “excellent” CLS result is one that is 0.1 or less.

If the performance’s CLS score is between 0.1 and 0.25, it is considered to “needs improvements“.

If CLS is greater than0.25, the grade is “Poor“.

How to Determine the Cumulative Layout Shift and Measure It (CLS)

The CLS score can be calculated using a variety of Lab and Data techniques. The most common tools you can utilize are listed below:

• Lighthouse
• PageSpeed Insights
• Chrome DevTools
• Chrome User Experience Report
• Search Console
• WebPageTest
• GTmetrix

Measuring and Finding CLS with PageSpeed Insights

To measure and identify Cumulative Layout Shift, PageSpeed Insights is one of the best tools. The program gives you the CLS score based on the Lab and Field data so that you may assess both controlled and user data.

Additionally, PageSpeed Insights displays the parts that can cause a layout shift.

The sample below demonstrates a poor CLS score for both the Field and Lab Data:

Similar moving parts may be present, or you may have a different set depending on whether you are using a desktop or a mobile device.

Measuring and Finding LCP on Search Console

You should evaluate the site’s performance in addition to calculating the CLS score and identifying the factors that are shifting the layout. The most effective technique to locate all the URLs impacted by the same problem is to use Search Console’s Core Web Vitals report.

What Elements Impact CLS and Lead to a Slow Score

The most frequent causes of a low Cumulative Layout Shift grade in WordPress are:

• Images and videos without dimensions
• Ads, embeds, and iframes without dimensions
• Using web fonts can Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT)
• Awaiting network responses before updating the DOM (especially for ads)
• Dynamically injected content (e.g., animations).

Images and Videos Without Dimensions

The lack of dimensions in photos and movies frequently results in a layout change. The browser won’t know how much space to reserve while loading these objects if the width and height size parameters are left empty.

Ads, embeds, and iframes without dimensions

Ads, embeds, and iframes all suffer from the same “dimension” problem. These dynamic features push the already-displayed content down if not given adequate room.

Using web fonts can Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT)

Layout changes and a generally poor user experience can be brought on by web fonts.

There was a “not-so-good” type of text on the page (FOUT).It takes some time for the custom font to load. It can take a little while before any text is displayed. The custom font is still loading, which is the reason (FOIT). Only after the rendered custom fonts will you be able to see the text on the website.

Awaiting network responses before updating the DOM

A website’s animated graphics and dynamic content, such as Instagram feeds, banner ads, and pop-up windows, can also cause a layout change. By now, you should be aware of how crucial it is to set aside room for features that draw consumers in without detracting from their experience.

How to Fix a Cumulative Layout Shift That Is Longer Than 0.25 or 0.1 Seconds on Mobile and Desktop

Here’s how to improve a low CLS score (both with and without plugins) on your WordPress site if you want to prevent significant layout changes:

1. Add width and height size attributes to image and video elements.
2. Preload Fonts (And Optimize Them)
3. Manage Space and Size for Ad Slots
4. Manage Space for Embeds and Iframes
5. Manage Dynamic Content
6. Prefer the CSS Transform Property for Animations

With the information in this article, you ought to be able to raise your WordPress Cumulative Layout Shift (CLS) rating and win Google’s favour.

You must also pay attention to the other two indicators in Core Web Vitals since Cumulative Layout Shift is only one of three.