Lazy Loading

If you are looking to optimize your website’s performance, sooner or later you will come across the term lazy loading. This popular method helps to improve the load times of websites, especially those containing large amounts of data like images or videos.

When you request a website, your browser loads all the required resources to display the page as desired. This means that all objects are requested, even those that are not visible to the user (i.e. objects that are “below the fold”). This results in unnecessarily long load times. To get around this issue, developers use lazy loading. Using a script such as LazyLoad, the browser only loads images and other data when they are in the viewport (i.e. the visible area), such as when scrolling or enlarging the browser window.

The lazy loading method can be best explained by using the example of image objects. To be able to use lazy loading, you have to modify the markup of the img tag. In place of the src attribute, this method uses a data attribute that includes the corresponding source link. As soon as the image is visible, the script adds the src attribute using the data attribute which makes the image appear. You can even use fade-in or slide-in effects to make the loading process more aesthetically pleasing.

There are several different ways to integrate lazy loading into your web project. Over the years, the lazy loading integration method has been continuously refined and improved. In the following sections, we will cover some of the most popular solutions for implementing this method.

There are now countless JavaScript templates for lazy loading which can be easily integrated into your website. For example, you can use the previously mentioned script LazyLoad which is a lean solution without jQuery. In addition to being able to set up native lazy loading for images, video, and iFrames, this 2.4 KB (kilobyte) script also supports responsive images, among other things.

As an alternative to LazyLoad, you can use the script Lazy Load Remastered developed by Mika Tuupola. It differs from LazyLoad in that it uses jQuery and provides some nice effects such as the blur technique.

Native lazy loading is the easiest way to integrate the lazy loading method into your web project. While it was initially only available in the Google Chrome browser (version 75 and higher), this method now also works in Firefox, Edge, and Opera. To use this option, all you have to do is add the appropriate loading attribute to the corresponding website content:

In addition to the value “lazy” for lazy loading, the following values are also available:

• eager: The browser loads the object as soon the page is requested.
• auto: The browser decides whether to load the object immediately or with a delay.

The advantage of using native lazy loading is that the browser does not need to load an additional JavaScript library. In addition to improving load times, this also ensures that the browser loads images using lazy loading even if the user has disabled JavaScript.

If you integrate lazy loading with JavaScript, the browser will request the position of an object permanently. This can result in unsightly side effects such as jerking and is an additional load for the server. If you use the Intersection Observer API, it behaves differently. The interface keeps track of changes to any elements in relation to a specific parent element. This parent element is usually the viewport. If the object overlaps with the parent element or if the distance between the elements changes by a specific amount, the Intersection Observer will execute a callback function and display the element.

If you created your website with WordPress, you can easily integrate lazy loading with a plugin such as a3 Lazy Load. In addition to images and videos, this extension also supports the lazy loading method for other embedded content.

Website operators often use pixels to track user behavior on the website. In some cases, these tracking pixels are only integrated in the non-visible area. If you apply lazy loading to all images, the browser will also only load the tracking pixel when it is in the visible area. As a result, you will lose important data about clicks and conversions.

Depending on the type used, you may also be able to load the tracking pixel separately as soon the page is requested:

• Native lazy loading: Add the attribute loading="eager" to the tracking pixel.
• Lazy loading with JavaScript: Assign the tracking pixel a specific class that you can exclude in the JavaScript code. Alternatively, you can assign a class to all objects that the browser will load using lazy loading and apply the script explicitly to them.