Archived topic
The Reduction of Cumulative Layout Shift Score
7 replies · Started by FullyInstrumented on October 20, 2020
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.
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
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.
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.
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;
}Hey, it works out. Thank you so much. The score improves.
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.
That issue looks to be related to the Litespeed cache - can you disable the 'critical css' option ?
