How to Improve Website Performance with Lazy Loading

Published on January 3rd, 2025

---

Why?

Image and other assets(scripts,icons,audio,css...) you use on your website can grow exponentially in size as your app grow and that throttles the amount of bandwidth available to your app and also slow your app/page down.

| Method | Logic | Performance | Impact | | - | - | - | - | | Without Lazy Loading | All assets try to load at once | Slow page load time | high initial bandwidth usage | | With Lazy Loading | Resources are deferred | Faster load time | reduced initial page size |

Implementation of lazy loading of Images and others

1. Lazy load images

<img src="image.jpg" alt="Description" loading="lazy"/>

This will delay the image loading until it is close to being visible in the viewport.

2. Lazy Loading of JavaScript Modules

document.getElementById("someActionThatNeedHeavyModule").addEventListener("click", function() {
  import("./heavyModule.js").then((module) => {
    // Use the module
    module();
    console.log(module.someVariable);
  }).catch((error) => {
    console.error("Error loading the module:", error);
  });
});

I btw used lazy loading for this image

Benefits of lazy loading

1. Reduces Initial Load Time Lazy loading will only loads essential assets first, speeding up the page load and making it feel faster.

2. Bandwidth Savings Non-visible resources aren’t loaded until necessary, saving bandwidth and server resources.

3. Improved SEO Faster loading time contributes positively to SEO, as Google prioritizes quicker-loading websites.