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.
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:
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.
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, addingloading=lazy
is detrimental to page load performance and LCP in particular. Nevertheless, it is possible to conditionally load an image without this performance penalty: addloading=lazy
to the image and add a preload link (withoutfetchpriority=high
unless it is LCP) with amedia
query attribute which identifies the viewport(s) for which the image should be loaded.In my testing at https://github.com/WordPress/performance/issues/117#issuecomment-1773456772 I found that adding
loading=lazy
to the LCP image does not degrade performance if there is a preload link withfetchpriority=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 hasloading=lazy
, but it will still get prioritized via the high-fetchpriority preload link (with a media query). Lighthouselcp-lazy-loaded
audit will need to be updated to account for this case. Specifically, this code:This should be modified to also check if the
lcpElementImage
appeared among the preload links withfetchpriority=high
, in which case it should befalse
.See https://github.com/WordPress/performance/pull/1261/files#r1625015100