differentiate lazy load report for images that are above the fold, but not yet visible in the viewport

[timholz]

Webpagetest does not really look at what is visible in the viewport. For instance, a variable woocommerce product page may have several images (up to 12 images). Only the first image of this gallery is actually visible in the viewport. The rest can be lazy loaded, since they are in the overflow hidden part of the viewport container. This can improve the LCP quite a bit (certainly for mobile devices). Regardless of visibility and overflow hidden, webpagetest reports, that images above the fold shouldn’t be lazy loaded. That makes no sense, since they are not visible when the page is loaded. The same counts for slide shows. Only the first image needs to be prioritized, the rest of the images can be lazy loaded. Therefore the present webpagetest report for the loading attribute of images can be misleading and if followed strictly may contribute to higher LCP (again mostly on mobile devices).
I made a test for a apple iphone 14 with a page that has 15 images in the gallery. Loading them all equally with loading=eager, fetchpriority=high, results in a CLP of more than 3 seconds.
The same page, the same condition, prioritizing only the first image and lazy loding the rest, had a CLP below 2 seconds.
regards theo