Cumulative Layout Shift too high

Thinking about it and reading to documentation about CLS shift.

If the text and newsletter sign up boxes are taller than the min-height set in the colour section background element then the box will re-size to suit as the elements load. This will cause a perceived layout shift.
You can set a min-height for mobiles in the Colour Section Element. Try increasing it and see if that makes a difference.

Otherwise:
Try using @media queries to change the min-height of the Colour Section behind your header for different screen size. This may reduce the layout shift.

You can also serve a different sized background image depending on the device using CSS. Serving a different sized image will improve the FCP score as a smaller image can be served to suit the screen size.

Once the new version of Enfold arrives I’ll be experimenting and implementing a full solution to this across all of my customers sites. I use the background element ALOT in Enfold header sections.

@freediver2011
I’ve just cracked this on my website. https://www.thinkjarvis.co.uk Full pass on Lighthouse in Chrome 93/100. (just depending on server response time).

Right where to start. Please read the following very carefully.

@Ismael – Please can you use this as a basis for a fix for @freediver2011
The background element needs a fixed height on mobiles to reduce the CLS to an acceptable level.

The min-height box for ALB elements is controlled by data classes – JS not CSS.
The opacity layer, and all of the containers within the slideshow or ALB colour section therefore have no fixed height.
The JS is applied after the CSS therefore causing a layout shift. So as a workaround you have to specify heights and widths of the elements that make up the box.

The background images in colour sections and slider images, captions and everything else have no set height and width. They have min-height and min-width. Therefore they shift when it renders the page.

Note – ALB sliders are currently more efficient than Background images – This is because it serves scaled images. You have to add some extra @media queries manually to optimise ALB colour section background images. Tutorial to follow when I get time.

For my site the appropriate min-height for mobiles is 351px So I entered this into the box in the style section.

I then added the following code.

This workaround is for full width easy sliders as per my website. But can be adapted for background colour sections using the same logic. I will share a solution once I have applied it to another site on my server for testing

Set a custom ID for the first element on the page.

#tj-fade-remove

Removes animations on mobiles (note there is some overlap in these bits. I need to refine it a bit more).
This drastically improves LCP by 5 seconds and a pass mark in lighthouse.

/* Removes animations on first element/ Slider on mobiles only */

/* Removes animations on slider titles and caption */
@media only screen and (max-width: 767px) {
#tj-fade-remove .avia-caption-title, .avia-caption-content, .avia-slideshow-button {
	-webkit-animation: 0s ease 0s normal none 1 running none !important;
	animation: 0s ease 0s normal none 1 running none !important;
	visibility: visible !important;
}
/* Removes animations on slider titles and caption */
#tj-fade-remove .container {
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
}
#tj-fade-remove .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title {
	-webkit-animation: 0s ease 0s normal none 1 running none !important;
	animation: 0s ease 0s normal none 1 running none !important;
	visibility: visible !important;
        transform: none !important;
       -webkit-transition: opacity 0s;
       transition: opacity 0s;
}
/* Disables some JS use with caution this will remove buttons and the main header from slideshow captions */
.js_active .avia-slideshow li:first-child {
  visibility: visible!important;
  transform: translateZ(0px) !important;
-webkit-transition: none !important;
}
}

Note – I removed the opacity settings and just applied opacity to the image directly. Therefore reducing render time.

/* Applies fixed height for mobiles based on content */
@media only screen and (max-width: 767px) {
#tj-fade-remove {
height:351px !important;
}
/* Applies fixed height and width to image based on enfold min values and offset */
#tj-fade-remove img {
height:351px !important;
min-width: 762px;
left: -201px;
}
}

I hope this helps others. I have one last bit to add to my setup which is serving Google Analytics locally.
I have actually disabled Jetpack Lazy Load and Photon as this seems to have improved the score rather than reducing it!

• This reply was modified 3 years, 8 months ago by thinkjarvis. Reason: spelling error