[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:  enhancement                          |      Status:  closed
 Priority:  normal                               |   Milestone:  5.5
Component:  Media                                |     Version:  5.4
 Severity:  normal                               |  Resolution:  fixed
 Keywords:  has-patch has-unit-tests 2nd-        |     Focuses:
  opinion early needs-testing has-dev-note       |  performance
-------------------------------------------------+-------------------------

Comment (by captainmoe):

 Replying to [comment:16 mor10]:
 Hey Morten, from what I understand, the loading="lazy" attribute is
 supposed to stop images out of the viewport from being loaded...as this
 video demonstrates: https://www.youtube.com/watch?v=-UaKADF8SN4

 I have tried a few browsers besides Chrome and it looks like images are
 all loaded at once when I scroll down. Does connection speed have any
 bearing on this?

 > Lazy loading was created specifically to address page load for people on
 slower connections because of large page sizes mainly caused by images
 appearing "below the fold" and out of view. There's ample research to show
 people rarely scroll all the way down a page, and loading images out of
 view is a waste of valuable resources which incurs cost and slowness for
 the end-user, especially on slow connections. By lazy loading images and
 other heavy assets, the user is delivered a significantly improved user
 experience while at the same time saving both time and money.
 >
 > The specific spec from Google, which is now implemented in Chrome, is to
 use the `loading` attribute to instruct the browser on ''how'' to lazy
 load images and iframes. By default, the browser treats all images and
 iframes as `loading="auto"` meaning the browser automatically lazy loads
 assets based on its own formula. Developers can set each asset to either
 `loading="lazy"` which "defers loading of the resource until it reaches a
 calculated distance from the viewport", or `loading="eager"` which "loads
 the resource immediately, regardless of where it's located on the page."
 >

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