Comment by simonw
9 hours ago
> The accepted practice is to not add lazy-loading to images above the fold, especially the LCP image.
I didn't know that. Apparently (at least according to Claude) you shouldn't use loading="lazy" on images that you expect to always display because doing so causes them to not be loaded until the browser has determined they are definitely in the viewport, which is a minor performance regression.
LCP = Largest Contentful Paint, the Core Web Vitals metric for when the largest visual element finishes rendering. That's usually the largest above-the-fold image.
Attempting to lazy load an LCP could delay the loading the image as much as 15% [1].
Lazy-loading is an effective technique we can use to delay non-critical resources at the beginning of the page load. However, a considerable problem occurs when we apply this technique to an LCP image. Lazy-loading prevents the browser from loading the image immediately because it takes time for it to realize that the image is in the viewport and needs to be loaded. According to some lab tests, this could cause a 15% regression in LCP performance. This might sound obvious for someone working on web performance, but the fact that nearly one in five web pages are doing it is a sign that it’s not very well understood by most other web developers.
[1]: https://calendar.perfplanet.com/2022/lazy-loading-lcp-images...
Yes but the post is explicitly about images that are initially loaded only on certain devices/screen sizes, hence the need for conditional application of lazy loading.