What is the Cumulative Layout Shift?

The Cumulative Layout Shift is an indicator of How much a Page moves while loading.

  • Its abbreviated name is CLS.

 

You surely have experienced it more than once:

  • You are about to Click on Something, an Ad Appears (or an Image) moves everything, and  you Click on another Link.

 

That is Why now, Google uses this metric as an important Page Experience Indicator.

As you probably know, Google uses a score to evaluate it:

  • Poor: When CLS is higher than 0.25.
  • Need Improvement: When CLS is between 0.1 and 0.25.
  • Good: When CLS is lower than 0.1.

What Causes CLS Issue and How to Solve it

The CLS Issue can be caused by many reasons.

However, the most common are:

  1. Images without Size attribute.
  2. Problems with Ads Loading.
  3. Responsive Headers.
  4. Too much Style.
  5. Critical CSS – Speed Plugins.

 

Let’s see them in detail, and How to solve each of them:

 

1. Images: When Images don’t have a specific Size attribute.

  • If you do not define Image Sizes, the Browser may alter their Size while loading.

 

Is this Causing your CLS Issue?

  • Do Right Click on one of your images.
  • Select Inspect.
  • Check if they have a “Size attribute”.

 

Width and Height attribute.

 

* If you use W.P Gutenberg or any Page Builder, you probably won’t have this issue.

 

Solution:

  • Use Images with Size attributes.

 

2. Ad Loading: When Ads don’t have a specific Size defined.

  • Practically the same reason than before.

 

Is this Causing your CLS Issue?

  • Enter your Site in Incognito mode.
  • Check if your Ads move the Page while loading.

 

Solution:

Use “Rigid” Ads in the Top of your Page.

  • Specify the dimensions and for which device they are.
    • Sometimes, the CLS Issue takes place just in one device (Desktop or Mobile).

 

“Rigid” Ads in the Sidebar Top.

 

3. Responsive Header: Responsive Headers adjust their Size while Loading.

  • Even if it is impossible to appreciate, it occurs, and Google detects it.

 

A 2-line Header transforms into a 1-line one.

 

This displaces the layout of the entire Page, causing a big CLS Issue.

  • And you won’t even realize (you won’t see anything)

 

Is this Causing your CLS Issue?

  • If you don’t find the Root cause of your CLS Issue, it is maybe your Header.
    • If you use “Rigid Ads” in the Top of your Page and your Images are well defined.

 

Solution:

This problem is usually caused by a Plugin that delays the rendering of the Header.

  • Deactivate your Speed Plugins (see Point 5, below).
  • Change or Modify your Header (sometimes can be difficult).

 

4. Too much Style: With lots of Bold letters, Bulletpoints, Styles, etc.

  • Web Browsers may have a difficult time to process your Page Style.

 

Notice how the text takes up more space when it is bold.

 

Sometimes, Themes and Plugins lazy-load Styles or Fonts, moving the Layout of your Site.

  • Causing a serious CLS Issue.

 

Is this Causing your CLS Issue?

  • Edit one minor Page with little Importance (About Us, for example).
  • Get rid of all Formats, Styles, etc…
  • Check that Page with PageSpeed Insights.
  • If its CLS improves, there you have it.

 

Solution:

This issue is usually caused by a Plugin that is Lazy-Loading your Fonts.

  • Just Deactivate your Speed or Optimization Plugin.
    • Anything that could be Lazy-Loading your Fonts or Styles.

 

5. Critical CSS – Speed Plugins: Critical CSS Causes Rendering Delay for some elements.

  • And this can cause a short but existing CLS Issue, specially with Headers.

 

Critical CSS Option in Ezoic.

 

Is this Causing your CLS Issue?

  • If you have a Speed Plugin installed.
  • If you use Ezoic Speed Accelerator (Critical CSS Option is Active by Default).

 

Solution:

Enter your Speed Plugin (or Ezoic Speed Accelerator).

  • Look for the Critical CSS Option and Disable it.
    • If you can’t find it, Deactivate the Plugin and check your CLS again.
  • Check one Page with PageSpeed Insights.

 

 

We know that sometimes, Identifying what is causing your CLS Issue is not Easy.

 

However, we have found an extremely useful Tool that helps a lot with it:

  • We found the Root Cause of our CLS Issue with it.

How to Identify what is causing your CLS Issue

 

Enter in: Cumulative Layout Shift Debugger (CLS)

 

Introduce the URL of an average Page of your Site.

  • A Representative Page.

 

After 3 to 5 minutes, it will show what part of your Site is moving the entire Layout with a Real animation.

  • Amazing, and for Free.

But… What was causing our CLS Issue?

How did we solve it?

How we Solved our CLS Issue

Our CLS Issue was caused by our Critical CSS.

  • We went crazy looking for the Root cause.

 

In the end, we just had to disable the Critical CSS Option in Ezoic.

Check our Results:

Our PageSpeed Insights Results.

 

As you can see, Field data Results (data from the last 28 days) are much worse than Experiment data.

  • Old CLS = 0.56, and compare it to our New CLS = 0.
    • Experiment data shows the current Performance.

 

* You can check this Page in PageSpeed Insights if you want to see our Results with your own eyes.

©2021 - consuunt

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

Forgot your details?