Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.

An updated overview of image loading optimization methods to improve LCP.

In short, we wanted our list of top web performance recommendations to focus on:

• Recommendations we believe will have the largest real-world impact
• Recommendations that are relevant and applicable to most sites
• Recommendations that are realistic for most developers to implement

For technical teams I advise to additionally track LCP(FE), or the Front End Component of LCP.

If nothing else, my hope is that this post helped shed some light on the fact that LCP is, by its very nature, a dynamic metric that is heavily dependent on user behavior. You can’t always know ahead of time what the LCP element is going to be for a given page, so it’s important that your optimization techniques can handle a range of possible outcomes, and adapt accordingly.

[…] the takeaway is pretty simple: text-based LCPs are the fastest, but unlikely to be possible for most. Of the image based LCP types, <img /> and poster are the fastest.

Render-blocking resources are a common hurdle to rendering your page faster. They impact your Web Vitals which now impact your SEO. Slow render times also frustrate your users and can cause them to abandon your page.

So you have to be really careful when using this metric, the LCP is not always tracking the element you think