Lighthouse detecting multiple LCPs

  Kiến thức lập trình

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.
GTmetrix

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.

LEAVE A COMMENT