[wp-trac] [WordPress Trac] #50425: Do not lazy-load images which are very likely to be in the initial viewport

[WordPress Trac]

#50425: Do not lazy-load images which are very likely to be in the initial viewport
------------------------------------------+-----------------------
 Reporter:  flixos90                      |       Owner:  flixos90
     Type:  enhancement                   |      Status:  assigned
 Priority:  normal                        |   Milestone:  5.5
Component:  Media                         |     Version:
 Severity:  normal                        |  Resolution:
 Keywords:  needs-patch needs-unit-tests  |     Focuses:
------------------------------------------+-----------------------

Comment (by flixos90):

 Replying to [comment:1 joemcgill]:
 > `get_the_post_thumbnail()` is used extensively in places where the
 featured image is not in the viewport, e.g., on archive pages or in places
 where some UI is being creating using a secondary query, so we might want
 to be more explicit in that case that it only loads when `is_single()` and
 `is_main_query()` are both true.

 That's a fair point. I'd assume in the majority of cases the image would
 be somewhere near the top of the page, but it's true we cannot rely on
 that. I think it would make most sense to provide essential support for
 the lazy-loading and rely on themes to manage the specifics for these
 kinds of images, based on where they place them. I'll post a follow up
 comment with more details on the proposed solution.

 Replying to [comment:2 johnbillion]:
 > My understanding is that modern browsers which implement native lazy
 loading would handle this decision making. ie. an image within the initial
 viewport could have the lazy attribute but the browser would still choose
 to load it immediately.
 >
 > Is there a negative impact of including the lazy attribute on an image
 above the fold?

 Essentially, the `loading="lazy"` attribute tells browsers to load the
 image lazily. While browsers may use some heuristics to assess priority of
 these images etc., having an image in the initial viewport marked with
 `loading="lazy"` will result in a slightly different behavior than having
 it load eagerly, which can have an impact on the [https://web.dev
 /optimize-lcp/ largest contentful paint] result for the page. Essentially
 the browser will typically render the page without loading the image
 first, which usually happens in a split second, but does technically
 result in a slight delay.

 We should be setting sane defaults in core, and then defer to theme (and
 in some instances plugin) developers for tweaking with lazy-loading in a
 more fine-grained way based on how they use images. I'll post the proposed
 approach in a follow-up comment.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/50425#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform