Cumulative Layout Shift WordPress

Monit Jadhav comments:

One possible solution to prevent the jerk as the logo loads is to give this class

.header-overlay

a fixed height, for desktop it evaluates as 183 px and for mobile its 124px. Give it an overflow:hidden as well


.header-overlay{
height: 183px;
overflow: hidden;
}


The layout breaks on iPad 768px width. So I think you should hide the menu from that breakpoint

Let me know if it resolves your issues

Thanks

Monit

alumicenter comments:

The code should be in the CCS file correct? I tried and still showing Cumulative Layout Shift
0.133

Monit Jadhav comments:

Yeah in CSS I think you implemented it correctly, I don't see a jerk in the header

Other jerk I see is when the images loads. Right now the image fades in I would suggest instead you use slideDown transition so that when the image loads it will animate down and wont look like a jerk

I found this class on the image container .tt-parallax-text

Possible solution can be


.tt-parallax-text{
display:none;
}


this will hide the image box completely

then you can use js to slide it down

https://api.jquery.com/slidedown/


$(window).on('load',function(){
$('.tt-parallax-text').slideDown();
})


Thanks

alumicenter comments:

Monit, I'm not to savy on this part let's recap

Place in top of CCS

.header-overlay{
height: 183px;
overflow: hidden;
}

Them:


.tt-parallax-text{
display:none;
}

alumicenter comments:

Where should this code go?

$(window).on('load',function(){
$('.tt-parallax-text').slideDown();
})

alumicenter comments:

Please send me you email so we can talk

Monit Jadhav comments:

Sure you can email me at [email protected]

Monit Jadhav comments:

Hey mate

Did you email yet? I just checked didnt find anything from you.