[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 flixos90):

 In [changeset:"52065" 52065]:
 {{{
 #!CommitTicketReference repository="" revision="52065"
 Media: Refine the heuristics to exclude certain images and iframes from
 being lazy-loaded to improve performance.

 This changeset implements the refined lazy-loading behavior outlined in
 https://make.wordpress.org/core/2021/07/15/refining-wordpress-cores-lazy-
 loading-implementation/ in order to improve the Largest Contentful Paint
 metric, which can see a regression from images or iframes above the fold
 being lazy-loaded. Adjusting this so far has been possible for developers
 via filters and still is, however this enhancement brings a more accurate
 behavior out of the box for the majority of themes.

 Specifically, this changeset skips the very first "content image or
 iframe" on the page from being lazy-loaded. "Content image or iframe"
 denotes any image or iframe that is found within content of any post in
 the current main query loop as well as any featured image of such a post.
 This applies both to "singular" as well as "archive" content: On a
 "singular" page the first image/iframe of the post is not lazy-loaded,
 while on an "archive" page the first image/iframe of the _first_ post in
 the query is not lazy-loaded.

 This approach refines the lazy-loading behavior correctly for the majority
 of themes, which use a single-column layout for post content. For themes
 with multi-column layouts, a new `wp_omit_loading_attr_threshold` filter
 can be used to change how many of the first images/iframes are being
 skipped from lazy-loaded (default is `1`). For example, a theme using a
 three-column grid of latest posts for archives could use the filter to
 override the threshold to `3` on archive pages, so that the first three
 content images/iframes would not be lazy-loaded.

 Props adamsilverstein, azaozz, flixos90, hellofromtonya, jonoaldersonwp,
 mte90, rviscomi, tweetythierry, westonruter.
 Fixes #53675. See #50425.
 }}}

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