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?