How to Improve CLS (Cumulative Layout Shift)?

praetserge

Elite Member

Executive VIP

Jr. VIP

Apr 4, 2014

6,459

4,861

• Mar 20, 2021

• #1

First of all, I'd like to thank some people who helped me to improve Core Vitals... there are a few nice threads on this forum.

But 1 problem persists, CLS (Cumulative Layout Shift). The high CLS is caused by the cookies notice which covers about a third of the screen on a mobile.
So how do you guys go around fixing this? I have to show a cookies notice but at the same time it causes the high CLS.

 

T

TheVigilante

Banned - Multiple Rules Violations

Aug 31, 2010

14,993

16,105

• Mar 20, 2021

• #2

Is this something you are referring to?

https://www.blackhatworld.com/seo/improve-largest-contentful-paint-lcp-with-a-js-css-trick.1313033/

 

M

MisterXYZ

Elite Member

Jul 5, 2017

2,877

1,344

• Mar 21, 2021

• #3

You may try to delay display of cookie notice.

 

laur.laurix

Elite Member

May 8, 2013

2,063

1,868

• Mar 21, 2021

• #4

Wp rocket......fast and free.... @Festinger shared the plugin here for free.

 

reginaldohb

Newbie

Mar 22, 2021

1

0

• Mar 22, 2021

• #5

One of the free solutions I found was to use WP-Optimize for WordPress and use your JavaScript deferred loading options.

 

Attachments

• 
  1616419744491.png

  312 bytes · Views: 103
• 
  1616419783205.png

  312 bytes · Views: 93

SamLewis

Supreme Member

Oct 25, 2012

1,343

1,058

• Mar 22, 2021

• #6

Cant you put cookie notice in overlay ?

 

MAAccountancy

Newbie

Mar 22, 2021

9

1

• Mar 22, 2021

• #7

Sites can mitigate these layout shifts by:

1. Statically reserve space for the ad slot. ...
2. Take care when placing non-sticky ads near the top of the viewport. ...
3. Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.