Speed is one of the most important factors in how users experience a website. A slow site can frustrate visitors and lower search rankings. One simple way to make your Drupal website faster is by using lazy-loading, a method that delays loading media until it’s actually needed.
What Lazy-Loading Does
Normally, when a webpage loads, all its images and videos load right away — even those far below the visible screen. Lazy-loading changes that behavior. With this feature, media files are loaded only as the visitor scrolls to them. The result is a quicker page load, reduced data usage, and smoother browsing, especially for mobile users or media-heavy pages.
Built-in Lazy-Loading in Drupal
Starting with Drupal 9.1, lazy-loading is part of the core system. Whenever an image is added through the text editor, media library, or an image field, Drupal automatically includes the loading="lazy" attribute in the HTML code. This small addition instructs browsers to hold off on loading the image until it’s almost visible on the screen.
If your site is running an older Drupal version, or if you’d like additional control, there are contributed modules that enhance lazy-loading:
- Blazy – Supports both images and videos, including background and responsive images. It integrates well with the Media module and Views.
- Image Lazyloader – A lightweight option that adds lazy-loading behavior to image fields throughout your website.
Setting Up Lazy-Loading with Blazy
- Install and enable the Blazy module.
- Go to Configuration → Media → Blazy settings to fine-tune options.
- In your content type’s display settings, change the image or video field formatter to Blazy.
- Clear caches and view a page — images and videos should now appear only when they come into view.
Why Lazy-Loading Videos Helps
Videos often load heavy scripts and external players that slow down performance. Lazy-loading replaces these with lightweight preview images until users click to play or scroll near them. This approach greatly improves site responsiveness and lowers page weight.
Final Tips
- Always compress and resize images before uploading.
- Exclude important hero or banner images from lazy-loading.
- Use tools like Google Lighthouse to test improvements.
Adding lazy-loading to your Drupal site is a quick, reliable way to create faster pages and a smoother user experience. You should try!