Improve Cumulative Layout Shift

How to Improve WordPress Cumulative Layout Shift (CLS)?

Do you know what Cumulative Layout Shift is and how it affects your UX and SEO performance? Here you’ll learn what CLS is, how to test it, and what factors influence its score. You’ll learn how to avoid major layout changes and how to fix a bad grade from mobile and desktop (Cumulative Layout Shift more than 0.25 or 0.1 s).

What is Cumulative Layout Shift (CLS) and Why Is It Important?

The Cumulative Layout Shift metric is a Core Web Vital metric that measures the visual stability of the page. The number of unexpected layout shifts that occur without interacting with the page is used to calculate visual stability. A layout shift occurs whenever the content changes, regardless of whether you clicked on a link or not.

The Cumulative Layout Shift score is the sum of all these shifts.

How many times have you been reading an article when the content was pushed down due to new ads? Or, have you ever tried to click on a button only to end up clicking on another link because a new large image pushed the content down?

All of these are layout shifts, caused by some elements on the page becoming unstable and shifting their position on the page.

Elements change positions for a variety of reasons. A new image or ad, for example, loading above the fold (at the top of the page) forces some content to move down and occupy another section of the page.

You can imagine how inconvenient this is for users.

As a result, Cumulative Layout Shift is one of the three Core Web Vitals metrics used to assess the user experience of a page.

The Cumulative Layout Shift is a highly relevant metric for user experience and the new ranking factor, accounting for 15% of the PageSpeed score. As a result, it may have an impact on your SEO performance.

What Is an Appropriate CLS Score?

As previously stated, the CLS is the sum of all unexpected content shifts on the page. Your CLS grade may or may not pass Google’s assessment based on the sum of all shifts.

A good CLS score should be less than or equal to 0.1.

A CLS score of 0.1 to 0.25 indicates that the performance “requires improvement.”

If CLS is greater than 0.25, the grade is “poor.”

How to Identify and Quantify the Cumulative Layout Shift?

The CLS score can be calculated using a variety of lab and data tools. Here are some of the most popular tools:

What Factors Influence CLS and Lead to a Slow Score?

The following are the most common causes of a poor Cumulative Layout Shift:

  • Dimensionless images and videos
  • Dimensionless ads embeds, and iframes
  • Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FUT) caused by web fonts (FOIT)
  • Before updating the DOM, actions wait for a network response (especially for ads)
  • Content that is injected dynamically (e.g., animations).

Remember that CLS has the greatest impact on mobile — the most critical and difficult device for optimizing performance.

Dimensionless images and videos

Images and videos with no dimensions are common causes of layout changes.

If the width and height size attributes are not specified, the browser does not know how much space to allocate when loading these elements. The available space will most likely be insufficient. As a result, once these elements are fully loaded, they will take up more space than expected, causing the existing content to shift.

This problem can be solved by including image dimensions on images and video elements in various ways.

Dimensionless Ads, Embeds, and Iframes

Ads embed, and iframes all have the same “dimension” problem. Again, not reserving enough space causes these dynamic elements to push down the existing content. As a result, new layout changes will occur on the page.

You will address this issue by assigning fixed dimensions to advertisements and managing the size reserved for such elements using specific tactics.

Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FIT) Caused by Web Fonts (FOIT)

Web fonts can cause layout shifts as well as an unpleasant user experience while the page is being rendered. It has to do with how slowly the fonts load. You may encounter one of two problems:

Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT).

On the one hand, the text on the page had a “not-so-good” style (FOUT). This is due to the custom font taking some time to load. Meanwhile, you’ll see the fallback font. When the custom font is complete, it will replace the default one. The font on the page will then change, and the content will inevitably shift.

Waiting for a network response before updating the DOM and injecting content on the page.

A layout shift can also be caused by animations and dynamic content injected on the page, such as banners, ads, or Instagram feeds. Again, this is due to a lack of space set aside for such elements.

You already know how important it is to make room for elements that engage users while not detracting from the user experience.

How to improve CLS?

If you want to avoid major layout changes on your WordPress site, here’s how to improve your CLS score with and without plugins:

  • Include Width and Height Size Attributes on Images and Video Elements
  • Preload Fonts (And Optimize Them)
  • Manage Space and Size for Ad Slots
  • Manage Space for Embeds and Iframes
  • Manage Dynamic Content
  • Prefer the CSS Transform Property for Animations

You’ll understand how to fix the Search Console status by going over each point. You’ll find information about the performance impact of each of our recommendations, ranging from low to high. The greater the impact, the more likely it is that the Cumulative Layout Shift grade will improve after implementing that specific recommendation.

Include an image and video element width and height size attributes.

One of the most basic ways to fix CLS is to include width and height attributes on your images and video elements in your WordPress CMS:

wordpress set image size - screenshot

WordPress automatically adds image dimensions. As a result, this action should be resolved automatically.

Preload Fonts and Optimize Them

As previously stated, if web fonts do not load quickly, the user experience suffers and the CLS grade suffers.

Preloading fonts is a best practice for avoiding layout shifts.

Preloading fonts instructs the browser to load the fonts as a top-priority resource. The browser will load the fonts as quickly as possible when rendering the page.

As a result, the fonts will most likely be included in the first meaningful paint, which is when the page’s primary content is fully loaded and displayed. There will be no layout shift in this case.

You can add  the rel=preload to the key web fonts:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Manage Space and Size for Ad Slots

There are several best practices for avoiding ad layout changes:

  • Assign dimensions to the ads so that there will be enough space for the ads to load.
  • Make the most of the available advertising space. Historical data can be useful to determine the best dimension for each ad slot.
  • You should not collapse any viewport area. Instead, include a placeholder or a fallback element.
  • Place non-sticky ads in the middle of the page, far from the top of the viewport.

Manage Space for Embeds and Iframes

The guidelines for managing embeds and iframes are similar to those for managing ads.

You should, in particular, plan for enough space for such elements. Again, historical data can be useful in determining how much space to reserve.

To deal with the unknown embed size, a placeholder or fallback is an excellent solution.

Manage Dynamic Content

Cumulative Layout Shift can also be poor by dynamic content such as banners. Unless triggered by user interaction, you should avoid displaying new content.

CLS, as you may know, only counts layout shifts that occur when users are not interacting with the page.

You’ll take care of the following PageSpeed recommendations by managing dynamic content:

  • Avoid large layout shifts
  • Avoids large network payloads.

For animations, use the CSS Transform Property.

Take care of animations as the final best practice to ensure visual stability. You can use the CSS property transform, which has no effect on the layout.

You’ll address PageSpeed’s recommendation to “avoid non-composited animations.”

Add comment