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.
- What is lazy loading and how does it work?
- How do you implement lazy loading?
- Lazy loading and the tracking pixel problem
- Overview of the advantages and disadvantages of lazy loading in a table
What is lazy loading and how does it work?
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.
How do you implement lazy loading?
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.
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
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:
<img src="”example.png"" loading="lazy" alt="…"> <iframe src="”https://example-domain.de"" loading="lazy" alt="…"></iframe>
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.
Lazy loading with the Intersection Observer API
Native lazy loading currently does not work in Safari (neither on macOS nor iOS). However, since Safari supports the Intersection Observer API, you can alternatively use a polyfill based on the Observer.
Lazy loading via WordPress plugin
Lazy loading and the tracking pixel problem
Website operators often use pixels to track user behaviour 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.
Overview of the advantages and disadvantages of lazy loading in a table
|Improved performance||User experience may be affected. For example, backtracking may not be possible if the page structure is not optimal.|
|External libraries may be required|