What Is Lazy Loading?

Date First Published: 20th February 2023

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 6/10

Learn more about what lazy loading is in this article.

In web design, lazy loading is a functionality that delays the loading of certain elements of a webpage, such as images and videos, until the user interacts with them in a way that the elements are needed. When properly and appropriately used, it can improve page loading times, which will result in a better user experience, limit bandwidth usage, and boost the ranking of a website in the SERPs.

Note:

It is called lazy loading as web browsers procrastinate and delay loading until needed, similar to the way that someone might delay a task.

Note:

The opposite of lazy loading is eager loading. When displaying an eager loading webpage, the browser loads all the resources at once, even when the user has not scrolled past them.

How Does Lazy Loading Work?

Lazy loading works by only loading the required content above the fold first and does not load any content below the fold that is specified as "lazy load" until the user scrolls down to see it. Elements that are above the fold need to load straight away or else it will harm the user experience. Therefore, elements below the fold can use lazy loading. When displaying a lazy loading webpage, instead of loading all the resources at once, the web browser will only load them when they are needed, such as when the user scrolls close to the element.

Advantages and Disadvantages Of Lazy Loading

• Quicker page loading times. With lazy loading, only the required content above the fold first and content below the fold does not load until the user scrolls down to see it. The webpage starts off with a smaller file size and webpages load faster since less elements are loaded at once.
• No unnecessary content is loaded. For example, if a webpage loads 7 images below the fold and the user leaves before viewing them, the bandwidth used to provide the images would be wasted. Lazy loading ensures that elements only load when necessary, saving bandwidth, processing power, and the time that the browser spends rendering and requesting the elements.
• It saves power needed to load content. This will save battery life on smartphones, tablets, and laptops.

• It may take a while for the resources below the fold to load. For example, if a user scrolls down a page, they might have to wait a while for the images below the fold to load, which is bad for user experience.
• Too much dynamic loading can result in interruptions and disrupt the experience of visitors.
• It requires extra code for the browser to process and render. Adding several lines of JavaScript code to a webpage to instruct browsers on how to lazy load page resources contributes to the amount of code that browsers have to process and render. This processing time might outweigh the time saved by lazy loading if it is not done in the correct way.
• Hiding a lot of content may be bad for SEO. If certain content is hidden, it may not be indexed by search engines. Google has a guide about lazy loading which lists best practices and information on how to ensure that Google can crawl and index lazy-loaded content.

Difference Between Lazy Loading and Infinite Scrolling

Lazy loading and infinite scrolling are quite different. The main difference between lazy loading and infinite scrolling is that lazy loading refers to delaying the loading of elements until they become necessary to be displayed and infinite scrolling refers to the loading of elements as soon as the user reaches the end of the page.

Lazy loading only requests the necessary resources when they are demanded, such as when the user scrolls down and users do not have to reach the end of the page to load the elements. Infinite scrolling uses lazy loading when users reach the bottom of the page and more content loads to prevent the page from becoming overloaded with content.

How To Implement Lazy Loading For Images?

There are two ways to implement lazy loading for images. These include:

Using the HTML "loading" attribute

Adding the "loading" attribute with the value "lazy" in the image tag will instruct browsers to delay loading the off-screen image until the user scrolls near them. Adding this attribute means that the image will only load if it is near or visible on the viewport. This implementation only supports newer versions of web browsers and Safari does not support it. Chrome only supports it on version 77 onwards. Below is the image tag to add to implement lazy loading in HTML:

Using a plugin

If using a content management system (CMS) or website builder, using a plugin to implement lazy loading is the quickest option. For example, there are lazy loading plugins available for WordPress.

Comments