Problem/Motivation
Lazy-loading of page elements, especially images, is a powerful way to increase perceived performance, reduce time-to-first-render, and reduce user friction on the web. In the past, most lazy-loading solutions were non-native, and required fairly complex setup and integration. In the Drupal contributed module space, there is: drupal.org/project/lazy which is built on the lazysizes javascript library. Drupal Core also supports BigPipe rendering for personalized content, however this technique requires some configuration and technical know-how, and, in classic Drupal fashion, perhaps solved the harder problem before addressing the easier one.
The html 'loading' attribute was first proposed as a new standard by the Chrome platform team, and was eventually merged into the WhatWG Living HTML specification. As is best practice with other lazy-load implementations, the 'loading' attribute is implemented by most browsers to avoid 'reflowing' content (aka 'layout shifting' or 'content shifting' i.e: causing the page to jump around as elements load in).
The 'loading' attribute is now supported for 74% of all users (full: 70.6%, partial: 3.4%) according to caniuse.com, including the most recent versions of Edge, Firefox, Chrome, etc. There is preliminary support for webkit, although support for Safari and several of the mobile browsers is still experimental, however the attribute is simply ignored and the assets rendered as normal in this case, making a completely clean and non-destructive fallback.
Proposed resolution
TBD
Remaining tasks
TBD
User interface changes
TBD
Release notes snippet
Adds load=lazy to img tags by default so as to increase perceived performance, reduce time-to-first-render and reduce user friction on the web.