CLS issue color section

Hey Ismael

could not wait :-)
I had an idea and finally managed to fix my CLS issue.
My problem was: A color section as backround with rows inside produces a CLS issue i could not get rit off.

My solution: I used one color section as backround image with min-heigt and the svg overlay i had in a row is now a second color section positioned absolute over the first color section. Now I am only switching the overlay with media querys. This is CLS error free.

The LCP issue persists, the preloading of my largest contet wasn´t helping.

 /* Color section container width and height 
CLS Fix  */

/* DESKTOP  */
.cjs-titel-keil-desktop-cls  {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 78px);
}
@media only screen and (min-width: 1025px) {
.cjs-titel-keil-ipadpro-cls {
    display: none;
}
}

/* IPADPRO  */
.cjs-titel-keil-ipadpro-cls  {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 78px);
}
@media only screen and (max-width: 1024px) {
.cjs-titel-keil-desktop-cls  {
  display: none;
}
}

Best regards,
Christopher

Hi Ismael,

I am very happy with the Pagespeed Score since the CLS issue is solved!
I am only curious where the LCP issue is coming from. Is it possible that is has something to do with the max height of my Backround image construct?
The Preload LCP Image Plugin is installed and seems to be working fine.

PageSpeeed Insights says here is the problem:

<div id="av_section_7" class="avia-section av-1dccl-bef4804921c9cf0151d6be20e4d3ac5b main_color avia-sec…" data-section-bg-repeat="stretch" data-av_minimum_height_pc="80" data-av_min_height_opt="percent" style="">

but this is the section under the header image.

Any Idea what I am missing? I don´t think the image sizes are the cause. I build Enfold pages with larger backround images without getting LCP issues.

Thanks you for your help and I have to say I love your Theme – created a few sites with it and will use it again and again !

Best regards,
Christopher

Hi Ismael,

Thank you for your quick reply.

I did select the the images to preload via the LCP image plugin.

In your first reply you wrote me: photovoltaik-anlage-fockenbrock-elektrotechnik-2560×1707-01.jpg. is the problem.
home_background-keil.svg is a ovelay image! I can only preload one Image with LCP plugin.
The filesize can´t be the Problem, i have tried way bigger on a page without my overlay and it is not causing LCP.
With a tiny 20kb it is the same Problem.

Can you please have a closer look either on my page oder in my CSS what might cause the problem other then image size or where I messed up with the height?

Thank you for your help
Christopher