Lighthouse detecting multiple LCPs

In the react website that I built, I have multiple images that keep shuffling in the hero section in a nice animation, as you can see. The problem is that lighthouse, and many other performance metric sites that I used, all detect each image to be an LCP on it's own, which makes the performance terrible. You can see in this picture that each time an new image appears (when the 3s interval between the animations ends), a new LCP is detected

And this is the GTmetrix report. You can see that it's detecting the LCP to appear at 7.5s, after the having the first image loaded & have shown the animations of the 2 previous images.

What can I do to let it know that the LCP I'm concerned about is the first image only?

I tried to load the first image, show it, then fire the animation cycle of the 3 imagesonly after having the 3 images loaded, but that didn't work.

You issue is that all three images are the exact same size. In this case the LCP algorithm also takes pixel density into account to decide on which image is the "most contentful".

And your images are, in order shown:

• 65.5 KB
• 71.3 KB
• 107 KB

When I use a local override to reverse the order they are displayed at, the LCP does not change.

So you either need to have a higher quality image as the first image shown, or lower quality images as the second and third images shown.