[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:  flixos90
     Type:  feature request                      |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.4
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-unit-tests 2nd-        |     Focuses:
  opinion                                        |  performance
-------------------------------------------------+-------------------------
Changes (by azaozz):

 * keywords:  has-patch has-unit-tests => has-patch has-unit-tests 2nd-
               opinion


Comment:

 This is an attempt to clarify couple of questions and a bit of a tl;dr (as
 the method of lazy loading has changed from needing js to adding an HTML
 attribute). Thinking this is a really good enhancement and the new
 `loading` attribute should be added by default to all images. Also,
 perhaps it would be good to consider the `importance` and `decoding`
 attributes.

 The more important question (imho): Is this an essential enhancement that
 would require "backporting" to all content ever published in WordPress?

 - If yes, what are the chances the browsers would start lazy-loading
 images by default? Seems like that's the best way to implement it. Reading
 @addyosmani's excellent "introductory" post at https://addyosmani.com/blog
 /lazy-loading/ this seems quite possible?

 - If no, does it warrant adding yet another runtime filter on all content
 outputted from WordPress that "parses" HTML with regex? This is slow, may
 increase page load time/use of server resources on the front-end quite a
 bit, and prone to edge-case errors/failures. Would it be better to add the
 attributes only in new content, for example in the image and gallery
 blocks, etc.

 Another question is: Are there any downsides in automatically adding the
 `loading` attribute to all img tags (either in new content or by regex at
 runtime)? Looking at the `img` tag specs: https://developer.mozilla.org
 /en-US/docs/Web/HTML/Element/img there are several (newer) attributes that
 may need considering. Most importantly the interactions between
 `decoding`, `importance`, and `loading`. What happens when an image has
 `importance="high"` and/or `decoding="sync"` and WP adds `loading="lazy"`?
 Also, should we be considering adding any of these attributes together?

 Also have few remarks about 44427.8.diff. Thinking that, perhaps, some
 things can be done a bit better there but will review it separately after
 the above two questions are cleared.

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