Leverage the 'loading' html attribute to enable lazy-load by default for images in Drupal core

Motivation/Background

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 62.7% of all users, 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.

Initiative Overview

The initiative goals are simple:

• Attach the loading="lazy" html attribute to all user uploaded images (whether added via the CKEditor WYSIWYG or another method).
• Attach the loading="lazy" html attribute to all images processed via Image API.
• Attach the loading="lazy" html attribute to all images rendered via the Twig templating engine.
• Reap the benefits of faster Drupal sites!

Contributor Team

• Project Management and Communications: Drupal Association
• Contributors:
  • Recruiting now!
• Sponsors:
  • Google
  • Additional sponsors welcome

Process / Tools / Resources

• Drupal Slack, #new-channel-yet-to-be-named
• Bi-weekly meetings.
• Wordpress also recently had an initiative to enable lazy load for images by default. An initiative retrospective was created that may help us here.

Scope

We are very deliberately limiting the scope of this initiative to the loading="lazy" html attribute for images. While we could easily scope creep to other forms of embedded media, and other techniques besides pure html, we believe limiting the scope to a pure html standard for the img tag which is browser native will be high impact for relatively low contributor investment.

Timeline

If it all possible, we'd like to have working code with test coverage by the time of Drupal 9.1's alpha period. (Mid-October 2020)