Conditionally load images initially-visible in some breakpoints without lazy-loading performance penalty

[westonruter]

Feature Description

If an image is visible in one breakpoint but not another, it should be loaded conditionally. If an image lacks loading=lazy, however, it is loaded unconditionally. Nevertheless, if that image is in the initial viewport, adding loading=lazy is detrimental to page load performance and LCP in particular. Nevertheless, it is possible to conditionally load an image without this performance penalty: add loading=lazy to the image and add a preload link (without fetchpriority=high unless it is LCP) with a media query attribute which identifies the viewport(s) for which the image should be loaded.

In my testing at #117 (comment) I found that adding loading=lazy to the LCP image does not degrade performance if there is a preload link with fetchpriority=high. I presume the same is true for non-LCP images.

It may be a bit confusing when looking at the markup because they may well see an LCP img element which has loading=lazy, but it will still get prioritized via the high-fetchpriority preload link (with a media query). Lighthouse lcp-lazy-loaded audit will need to be updated to account for this case. Specifically, this code:

    const wasLazyLoaded = lcpElementImage.loading === 'lazy';

This should be modified to also check if the lcpElementImage appeared among the preload links with fetchpriority=high, in which case it should be false.

See https://github.com/WordPress/performance/pull/1261/files#r1625015100

[westonruter]

Filed Lighthouse issue: GoogleChrome/lighthouse#16034