LCP discrepancies (potentially affecting millions of sites)
Ivailo Hristov
Hi all,
A Twitter thread (https://twitter.com/geekybiz/status/1429746730258427911/) recently pointed out an issue with measuring LCP which got our company curious, so we dug into it and we found that measuring LCP appears to be unreliable in some image lazy loading scenarios.
The author of the thread created a very basic image lazy loading simulation which however causes LCP to be measured incorrectly. Because the demo pages of the author are no-longer accessible, we created a replica, showcasing the issue. You can find it here - https://highperformanceweb.com/img_test.html
The case here is that the image element has an empty inlined image as a placeholder at the beginning. In this case LCP is measured as soon as loading the empty image completes.
We tested this in multiple browser versions and this behavior appears to have been added in Chrome 88, while older versions detect LCP more accurately. Potentially related changelog - https://github.com/chromium/chromium/blob/master/docs/speed/metrics_changelog/lcp.md
Here is a screenshot from an older version of Chrome where LCP appears to be measured correctly
And here is the same page evaluated with the latest version of Chrome (currently 92)
We also tested some of the top plugins for site speed optimization in WordPress and they all use this method for image lazy loading meaning that millions of sites are potentially affected by this and report incorrect values for LCP in CRUX.
Affected plugins:
- WP Rocket - 1.8M+ sites
- LiteSpeed Cache - 2M+ sites
- Autoptimize - 1M+ sites
- NitroPack - 80K+ sites
*Other plugins might be affected as well, but these are the ones we tested.
Is this an intended behavior or an issue that needs to be resolved?
Regards,
Ivailo
