Lazy Loading

If you are looking to optimize your website’s per­for­mance, sooner or later you will come across the term lazy loading. This popular method helps to improve the load times of websites, es­pe­cial­ly those con­tain­ing 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 un­nec­es­sar­i­ly long load times. To get around this issue, de­vel­op­ers 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 cor­re­spond­ing 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 aes­thet­i­cal­ly pleasing.

There are several different ways to integrate lazy loading into your web project. Over the years, the lazy loading in­te­gra­tion method has been con­tin­u­ous­ly refined and improved. In the following sections, we will cover some of the most popular solutions for im­ple­ment­ing this method.

There are now countless JavaScript templates for lazy loading which can be easily in­te­grat­ed into your website. For example, you can use the pre­vi­ous­ly 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 re­spon­sive images, among other things.

As an al­ter­na­tive to LazyLoad, you can use the script Lazy Load Re­mas­tered 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 ap­pro­pri­ate loading attribute to the cor­re­spond­ing 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 im­me­di­ate­ly or with a delay.

The advantage of using native lazy loading is that the browser does not need to load an ad­di­tion­al 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 per­ma­nent­ly. This can result in unsightly side effects such as jerking and is an ad­di­tion­al load for the server. If you use the In­ter­sec­tion Observer API, it behaves dif­fer­ent­ly. 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 In­ter­sec­tion 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 in­te­grat­ed 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 con­ver­sions.

Depending on the type used, you may also be able to load the tracking pixel sep­a­rate­ly 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. Al­ter­na­tive­ly, you can assign a class to all objects that the browser will load using lazy loading and apply the script ex­plic­it­ly to them.