Lazy Loading

According to recent studies, almost half of the web users expect a website to load within two seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds. This highlights the importance of page speed in today’s web scenario. One method used to boost up a website’s loading speed is known as ‘Lazy Loading’.

Lazy loading is a design pattern, common in web development, where the loading of resources is deferred until they are needed. Instead of loading all resources when a page loads, they are only brought up when they’re needed. This clearly reduces the initial payload and load time. Lazy loading can be efficient when it comes to large amounts of media in web projects or large scripts.

The principle behind lazy loading revolves around the concept of delaying the initialization of an object until it is required. In conventional data loading techniques, the entire data set is loaded irrespective of its usage in the near future. However, in lazy loading, the data is only loaded when it is invoked by a certain function or call.

Drupal, a popular open-source content management software, often used to make websites and applications, also supports lazy-loading. And even though Drupal’s core doesn’t offer a specific lazy-loading functionality, there are modules available to integrate this functionality into any Drupal project. ‘Blazy’, for instance, is a Drupal module that provides the lazy loading functionality.

Here is a tutorial on how to setup lazy loading with the ‘Blazy’ module in Drupal:

1. Install and enable the module using Drupal’s interface, or with the following Drush command:

drush en blazy -y

1. Once ‘Blazy’ is installed, you can configure its settings in the Drupal interface by navigating to Configuration > Media > Blazy. Here you can select the default options for lazy loading.

2. After configuring the options, you can use Blazy with Drupal’s image formatter. Navigate to ‘Manage display’ of a content type, select the image field you want to lazy load, select ‘Blazy’ as the format, and configure the formatters’ settings.

Lazy loading is not just limited to images, it can also be applied to loading CSS, JavaScript and other such resources. A tool for managing this can be the ‘AdvAgg’ module, which allows you to asynchronously load CSS/JS files.

Lazy loading can be a substantial optimization for web pages containing heavy resources that are not instantly needed at page load - such as images further down on your webpage or secondary interactions happening on button click or when scrolling down. Take advantage of these techniques to provide a smoother, more compelling user experience.