[Support request] The Reduction of Cumulative Layout Shift Score

[FullyInstrumented]

Everything was okay until I found that my CLS (Cumulative Layout Shift) score is 0,227 which is orange-colored. The site is https www dot fully instrumented dot com

I set the header padding to be 40 (left, right, top, bottom) both for mobile and desktop. The 40 is the default setting.

However, if I switch to use word header (instead of the logo), my CLS score improved.

I hope I could get support to solve this. Thank you in advance.

[David]

Hi there,

did you resolve the issue?
I ran a pagespeed insights test on the site – and under the Lab Data both Mobile and Desktop CLS are in the green

[FullyInstrumented]

Hi David,

Thanks for replying.

I did a little experimentation by adding some css codes

.site-logo {
width: 100%;
height: auto;
}

And the CLS score improves dramatically. However, I wonder why not 0 s? Is there an additional CSS code line that I have to add to improve more?

Thank you, David.

[FullyInstrumented]

Maybe, this can help. I have in my mind to add a specific number for the header height in this case. But I don’t know what code it is.

[David]

So the issue is related to WebP – the way the server is delivering that logo is delayed and absent of the image height property. You can of course set a minimum height to the site header to stop the CLS:

.site-header {
    min-height: 150px;
}

[FullyInstrumented]

Hey, it works out. Thank you so much. The score improves.

[FullyInstrumented]

By the way, I’ve got a similar issue with this site https://moonpicker.com/
Although I adjust the logo size, it still comes as a big size logo, then reduces following the navigational manu height.
I am sure to improve the CLS, I need to add some CSS.
Thanks in advance.

[David]

That issue looks to be related to the Litespeed cache – can you disable the ‘critical css’ option ?

[Author]

Posts