[wp-trac] [WordPress Trac] #44427: Introduce lazy-loading API for media and other elements

[WordPress Trac]

#44427: Introduce lazy-loading API for media and other elements
----------------------------------------+------------------------------
 Reporter:  mor10                       |       Owner:  (none)
     Type:  feature request             |      Status:  new
 Priority:  normal                      |   Milestone:  Awaiting Review
Component:  Media                       |     Version:
 Severity:  normal                      |  Resolution:
 Keywords:  needs-unit-tests has-patch  |     Focuses:  performance
----------------------------------------+------------------------------

Comment (by addyosmani):

 Dropping in a hello from the Chrome Speed team 👋

 > Lazy-loading is becoming more and more well-known by site owners, and
 they are turning to plugins to get it done.

 Strongly agree. I'm very supportive of core getting support for native
 lazy-loading in a non-destructive manner.

 > It seems that lazy loading is currently used in plugins in various ways.

 In my research, a majority of existing JavaScript solutions for lazy-
 loading rely on users switching from setting an image `src` to `data-src`
 (or similar) in order to prevent browsers from eagerly loading images.

 If we have an image `<img class="some-custom-loader" data-src="foo.jpg">`,
 a browser supporting native lazy-loading will not do anything special if
 an author adds `loading=lazy`. Until the library/plugin/server modifies
 data-src -> src, we don't consider the image as having a valid reference.

 The ideal change I would love to see in lazy-load plugins is deferring to
 native lazy-loading where supported and applying their fallback where it
 is not. I documented a few patterns for this in
 https://addyosmani.com/blog/lazy-loading/, but I'm certain something more
 ergonomic is possible. tl;dr: check for native image lazy-loading support
 and conditionally load a fallback (like lazysizes) when it isn't
 supported.

 While the above model might work well for a plugin, I think a simpler
 model of core just supporting `loading=lazy` as a progressive enhancement
 is a good path forward.

 Anecdotally: Over 17K origins are currently using `loading=lazy` (based on
 our telemetry) and large sites like the BBC are already starting to see
 speed metrics improvements as a result of adopting it
 https://twitter.com/addyosmani/status/1160939251426418689

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