Fixing CLS errors

@Ismael is right with his solution.
Start from the top of the page and work downwards. CLS shift tends to only apply on above the fold because the rest of the page loads out of view.

If you can remove the shift from the first element on all devices then the rest may no longer be an issue. As they are all ALB colour sections, if you know that it will dynamically resize, set no minimum height. If it has a background image set then you may still experience some shift. You will need to create a version of the code below for that element.

The Layerslider needs an explicitly stated height to prevent shift. ALB background elements and Sliders also have this issue. You essentially need a few rules to match the design:

Below is suitable for the layerslider. HOWEVER you may need to apply it to the colour section and the background image as well to prevent the shift. I tend to set a custom ID so that the rule only applies to this element. See how you get on with the below:

/* Desktops 1080p */
@media screen and (min-width:1441px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 271px !important;
}
}

/* Macbooks, 720p and ipad pros  */
@media screen and (min-width:1025px) and (max-width:1440px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 272px !important;
}
}

/* Ipads landscape */
@media screen and (min-width:769px) and (max-width:1024px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 271px !important;
}
}

/* Ipads portrait */
@media screen and (min-width:451px) and (max-width:768px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 271px !important;
}
}

/* mobiles portrait */
@media screen and (min-width:361px) and (max-width:450px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 321px !important;
}
}

/* Moto G4 portrait */
@media screen and (max-width:360px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 271px !important;
}
}

• This reply was modified 3 years, 6 months ago by thinkjarvis.

@ismael

Sorry I have just realised I missed the closing brackets in my code snippet I have edited my response. Sorry if I have made the job harder for you!

Thanks @ismael

Looks like your solution works but has affected the layout slightly.

@sldeutsch site appears that the layerslider is served at the same height on all screen sizes excluding one.

I just encountered a similar problem on a client site with an ALB background element that becomes 1400 pixels tall on mobiles.
The layout shift was 2.48 then down to 0.99 with a min-height on the element within Enfold and then down to 0.01 with an explicitly stated height as per your solution.

Setting min-height alone only works if the shift on mobiles is minimal so I added the following height:; css.

This is a specific case where the elements stack. The LCP score is still a bit high but very hard to optimise because the design calls for such a large first element which stacks on mobiles.

But you get the idea:
-serve different background image for smaller/taller screens
-set fixed height for those elements for different screen sizes

/* Media Rules for ALB Colour Element Hero Images */

/* mobiles  */
@media screen and (max-width:767px) {
#main-banner-1 {background-image: url(/wp-content/uploads/cbdbgd-wood-5-767-1500-1.jpg)!important;}
}

/* mobiles  */
@media screen and (max-width:767px) {
#main-banner-1 {
min-height:1400px !important;
height:1400px !important;
}
.tj-main-banner-style {
min-height:1400px !important;
height:1400px !important;
}
#main-banner-1 .container {
min-height:1300px !important;
height:1330px !important;
}
}

/* Desktops  */
@media screen and (min-width:768px) {
#main-banner-1 {
min-height:689px !important;
height:689px !important;
}
.tj-main-banner-style {
min-height:689px !important;
height:689px !important;
}
#main-banner-1 .container {
min-height:689px !important;
height:689px !important;
}
}

• This reply was modified 3 years, 6 months ago by thinkjarvis. Reason: Correction