@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 5 years, 1 month ago by thinkjarvis. Reason: spelling error

I had a problem with the MailChimp shortcode too. I had to go into my MailChip account and resave the form (toggle all of the visibility buttons for each field), then go to the Enfold panel and resave it, then delete the shortcode of the form page and then put it back again and save.