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

 After re-thinking the approach outlined in the original ticket
 description, also taking into account the comments so far, I'm proposing
 to handle lazy-loading in the following way to achieve a good balance
 between saving network resources/decreasing initial load and maintaining a
 solid largest contentful paint outcome:

 * Globally add support for the `loading` value to be specified as `null`,
 to explicitly omit the attribute. At this point, this is the recommended
 approach for images that should not be lazy-loaded - in other words, we
 should avoid using `loading="eager"` only to override a value of `lazy`.
 * Lazy-load images by default only if they are within `the_content`,
 `the_excerpt`, or `widget_text_content`, as well as `get_avatar` images,
 as these areas are primarily found below the fold.
 * Support lazy-loading images used in templates via
 `wp_get_attachment_image`, but leave the attribute off by default.
 * Document in the dev-note the default behavior and how theme developers
 can modify it...
     1. ...by using the `wp_lazy_loading_enabled` filter to generally
 enable or disable lazy-loading for all images for a certain context (e.g.
 a theme could globally enable lazy-loading for template images or globally
 disable lazy-loading for widget content). This could be used by a plugin
 or theme developer, however it is rather general, so options 2. or 3. are
 preferable.
     2. ...by explicitly lazy-loading certain template images via e.g.
 `wp_get_attachment_image( $id, $size, $icon, array( 'loading' => 'lazy' )
 )` or `get_the_post_thumbnail( $post, $size, array( 'loading' => 'lazy' )
 )`. This could be used e.g. by a theme developer to lazy-load a featured
 image or logo used in the footer.
     3. ...by disabling lazy-loading for a specific image via the
 `wp_img_tag_add_loading_attr` filter. This allows very fine-grained
 modification that in certain cases _may_ make sense for a theme to do, but
 would likely apply more to site-specific customization e.g. by an agency.

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