Drupal Lazy Loading Explained: Built-In Image Performance Features Since Drupal 9.1

Lazy loading is a technique that delays the loading of images and other media until they enter the user’s viewport, reducing the amount of data a browser must retrieve when a page first loads. In a blog post published on 3 March 2026, Kannan Nadar of Specbee explains how this approach improves perceived page speed by prioritising visible content while loading additional assets only as the user scrolls.

The article notes that Drupal includes built-in support for lazy loading starting from version 9.1. Drupal automatically adds the HTML attribute loading="lazy" to standard image fields, views, and media entities, allowing modern browsers to handle deferred loading without additional configuration.

Developers can also apply lazy loading manually in custom Twig templates or use contributed modules such as Image Lazyloader when more granular control is required. The post explains that this flexibility allows site builders to fine-tune how images behave in complex layouts or legacy Drupal installations that predate the built-in feature.

The article further explores advanced scenarios where additional implementation may be needed, including dynamically loaded images, sliders, and CSS background images. Techniques such as the Intersection Observer API and conditional loading within carousels are suggested to ensure that images load only when required as users navigate through a page.

Overall, the post presents lazy loading as a lightweight performance optimisation that can significantly improve page responsiveness on image-heavy Drupal sites while conserving bandwidth and reducing initial page load times.