[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:  defect (bug)                           |      Status:  closed
 Priority:  normal                                 |   Milestone:  5.5
Component:  Media                                  |     Version:  5.5
 Severity:  normal                                 |  Resolution:  fixed
 Keywords:  has-patch has-unit-tests has-dev-note  |     Focuses:
---------------------------------------------------+-----------------------

Comment (by westonruter):

 Replying to [comment:3 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.

 I noticed that in three most recent core themes (at least) the first
 featured image is still getting `loading=lazy` even though the image
 appears in the first viewport. So the themes aren't managing the specifics
 as they should be.

 I think that whenever a featured image is being printed (via
 `the_post_thumbnail()`) that the resulting image should not get
 `loading=lazy` if the image being printed is:

 * The featured image for the queried object on a singular template, or
 * The featured image for the first post in the main query.

 I put together a prototype of how I think this can be addressed (though it
 does require a bit of a action/filter dance):
 https://gist.github.com/westonruter/e8d5778843005b7e0d6ce4049b3ec29d

 Thoughts?

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