[Support request] The Reduction of Cumulative Layout Shift Score

Home Forums Support [Support request] The Reduction of Cumulative Layout Shift Score

Home Forums Support The Reduction of Cumulative Layout Shift Score

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1497856
    Miftah

    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.

    #1498112
    David
    Staff
    Customer Support

    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

    #1499316
    Miftah

    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.

    #1499318
    Miftah

    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.

    #1499543
    David
    Staff
    Customer Support

    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;
    }
    #1500589
    Miftah

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

    #1500708
    Miftah

    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.

    #1500799
    David
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.