0

This post tells us a technique to reduce LCP.

  • First load a low-resolution image
  • Then load a high-resolution image asynchronously (to not interfere with the LCP)
  • When loaded, show the high-resoslution image

And this shows that in React code, but it does not load the image asynchronously. When I used this code, I see that the browser loads both images, and my LCP does not change at all.

How can I load the high-resolution image async? And would it truly reduce LCP if it gets loaded async?

Big boy
  • 1,113
  • 2
  • 8
  • 23

0 Answers0