Conditionally load images initially-visible in some breakpoints without lazy-loading performance penalty #1270
Labels
[Plugin] Optimization Detective
Issues for the Optimization Detective plugin
[Type] Enhancement
A suggestion for improvement of an existing feature
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 #117 (comment) 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
The text was updated successfully, but these errors were encountered: