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

Created on 24 August 2020, over 4 years ago

Updated 26 January 2023, almost 2 years ago

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.