How to Improve Website Performance With Lazy Loading

In today’s fast-paced digital world, website performance and user experience are paramount. Users demand quick and seamless browsing experiences, and website owners strive to provide them. One effective technique that has gained significant popularity in recent years is lazy loading.

Lazy loading is a method used to optimize web page loading times by loading only the content that is visible to the user, as a result it reduces the initial load time and improves overall performance. In this article, we will explore the concept of lazy loading, its benefits, implementation techniques, and its impact on website performance and user experience.

What is Lazy Loading?

Lazy loading, also known as on-demand loading, is an optimization technique used to defer the loading of non-critical resources, such as images, videos, and scripts, until they are needed. Instead of loading all the content of a web page at once, lazy loading loads only the content that is within the user’s viewport or near it. As the user scrolls down the page, additional content is loaded dynamically. This approach helps reduce the initial page load time, as only a fraction of the total content is loaded initially.

Benefits of Lazy Loading

Lazy loading is a technique that focuses on loading content on-demand rather than upfront, improving website loading times and overall performance. By deferring the loading of non-critical resources, such as images, videos, and scripts, until they are needed, lazy loading reduces the initial page load time. Let’s dive into the benefits of lazy loading and examine how it can be implemented using code examples.

1. Improved Performance: Lazy loading significantly improves website performance by loading only the content that is visible or near the user’s viewport. This approach eliminates the need to load all resources at once, reducing the initial load time and improving page rendering speed. Users can start interacting with the visible content sooner, resulting in a better overall experience.
2. Bandwidth Optimization: With lazy loading, only the necessary content is loaded initially, conserving bandwidth. Resources that are not visible to the user are loaded dynamically as the user scrolls down the page. This approach is particularly beneficial for mobile users with limited data plans or slower network connections. Let’s explore some code examples to implement lazy loading.

Implementation of Lazy Loading

JavaScript libraries and frameworks provide convenient solutions for implementing lazy loading. One popular library is ‘Intersection Observer API,’ which allows developers to track when an element enters or exits the viewport. Here’s an example illustrating the implementation of lazy loading using the Intersection Observer API:

// HTML markup
<img class="lazy" data-src="path-to-image.jpg" alt="Lazy loaded image">

// JavaScript code
const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = (target) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  });

  observer.observe(target);
};

lazyImages.forEach(lazyLoad);

In this code snippet, we select all elements with the class ‘lazy’ and create an Intersection Observer for each image. When an image enters the viewport (i.e., becomes intersecting), the observer’s callback function is triggered. The image source (data-src) is then assigned to the ‘src’ attribute, and the ‘lazy’ class is removed. Finally, we stop observing the image using ‘observer.unobserve(img)’ to prevent unnecessary re-execution.

Lazy loading is not limited to images alone; it can also be applied to videos, iframes, and scripts. Let’s explore code examples for lazy loading these resources.

For lazy loading videos, we can load a thumbnail or a placeholder image initially and replace it with the actual video when the user interacts with it. Here’s an example:

<!-- HTML markup -->
<video poster="thumbnail.jpg" class="lazy" data-src="path-to-video.mp4" controls></video>

// JavaScript code
const lazyVideos = document.querySelectorAll('.lazy');

const lazyLoadVideo = (target) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.dataset.src;
        video.load();
        video.classList.remove('lazy');
        observer.unobserve(video);
      }
    });
  });

  observer.observe(target);
};

lazyVideos.forEach(lazyLoadVideo);

In this example, we use the ‘poster’ attribute to specify a thumbnail or a placeholder image. When the video enters the viewport, the source URL (data-src) is assigned to the ‘src’ attribute, and the ‘lazy’ class is removed. The video’s ‘load()’ method ensures that the video is loaded correctly.

Similarly, lazy loading iframes and scripts can be accomplished using the same principles. Here’s an example for lazy loading iframes:

<!-- HTML markup -->
<iframe class="lazy" data-src="https://example.com"></iframe>

// JavaScript code
const lazyIframes = document.querySelectorAll('.lazy');

const lazyLoadIframe = (target) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const iframe = entry.target;
        iframe.src = iframe.dataset.src;
        iframe.classList.remove('lazy');
        observer.unobserve(iframe);
      }
    });
  });

  observer.observe(target);
};

lazyIframes.forEach(lazyLoadIframe);

For lazy loading scripts, we can utilize the ‘defer’ attribute in the ‘script’ tag. Here’s an example:

<!-- HTML markup -->
<script class="lazy" data-src="path-to-script.js" defer></script>

// JavaScript code
const lazyScripts = document.querySelectorAll('.lazy');

const lazyLoadScript = (target) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const script = entry.target;
        script.src = script.dataset.src;
        script.classList.remove('lazy');
        observer.unobserve(script);
      }
    });
  });

  observer.observe(target);
};

lazyScripts.forEach(lazyLoadScript);

In this example, we set the ‘defer’ attribute in the ‘script’ tag to ensure that the script is loaded asynchronously and executed after the document has finished parsing.

Conclusion

In conclusion, lazy loading is a powerful technique to enhance website performance and optimize user experience. By deferring the loading of non-critical resources until they are needed, lazy loading significantly improves page loading times and conserves bandwidth. Using JavaScript libraries like the Intersection Observer API, developers can easily implement lazy loading for images, videos, iframes, and scripts. By incorporating lazy loading into their websites, developers can ensure faster loading times, reduced bandwidth usage, and improved overall user experience.

What is MEAN Stack?

React Native Flexbox