The Art of Lazy Loading

Lazy Loading

In the fast-paced field of web development, prioritizing user experience is key. If a website takes too long to load, visitors may leave, causing a drop in traffic and potential revenue. Lazy loading is a smart technique that postpones loading certain elements until they’re needed, significantly boosting page load times and improving the overall user experience.

🤔 But What is this Lazy Loading?

Lazy loading ( also known as asynchronous loading ) is a technique in software and web development that delays the loading of page assets until needed. This is also known as deferred loading or on-demand loading. Lazy loading can improve program performance and speed. For example, it is possible to speed up the initial display of a web page by delaying uploading images to the site until needed.

🏋️‍♀️ Let's see how lazy loading works along with an example

Lazy loading in React is caused by code splitting, a technique that allows you to split your code into small chunks and load when you want. This helps reduce the initial bundle size, improving page load time. React provides a dynamic import() function to implement lazy loading.

Read more about code splitting here:

Code Splitting: The Key to a Faster, More Responsive Web

// MyComponent.js

import React from 'react';

const MyComponent = () => {
  return <div>Hello, I'm lazily loaded!</div>;
};

export default MyComponent;

// App.js

import React, { lazy, Suspense } from 'react';

// Create a dynamic import for the component you want to lazy load
const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <h1>Your React App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        {/* Wrap the lazy-loaded component in Suspense with a fallback */}
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

In this example:

👉 The lazy function allows us to set up a dynamic import of the component LazyComponent. This approach ensures that the loading of LazyComponent is triggered only when it is needed.
👉 The Suspense element is employed to contain the lazily-loaded component. It receives a fallback property, which is displayed while the lazy component is loading.
👉 Once the requirement for LazyComponent arises, React will load it on demand. Until then, the fallback content is displayed.

🧐 Lazy Loading Images and Iframes:

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

<iframe src="www.google.com" frameborder="0" loading="lazy"></iframe>

In the lazy loading example, the “ loading = “ lazy ” ”attribute is the key. The browser will prioritize loading this image when it's close to the viewport and in the case of iframes it informs the browser to delay loading the iframe until it's near the user's viewport, enhancing the efficiency of your webpage, conserving bandwidth and improving overall page loading speed.

🪄 Benefits

Boost Page Loading Time: Lazy loading speeds up page loading, creating a faster and more enjoyable user experience.

Bandwidth efficiency: This method conserves bandwidth by loading only essential resources, saving resources for both users and servers.

Improved user experience: Lazy loading prioritizes, allowing users to interact with the site almost immediately.

🤩 Conclusion

Lazy loading is an effective strategy for boosting web performance and providing an improved user experience. By postponing the loading of non-essential resources, developers can ensure that users can interact with the website speedily and efficiently. With the many techniques and libraries available, lazy loading has grown into an indispensable practice for contemporary web development.

📚 Earlier Post:

👉 Understanding Minification: A Process with Purpose
👉 Bundling: Optimizing Web Performance
👉 Optimizing Web Performance: Tree Shaking Explained
👉 Dependencies , DevDependencies & PeerDependencies

🔍 Coming up next:

👉 From Click to Content: Unwrapping the Inner Workings
👉 Client Side Rendering
👉 The Trio Of Web Development

Stay tuned for more insights into the world of ReactJs development! 🚀📦

🤝 Let’s connect on LinkedIn: https://www.linkedin.com/in/omkarbhavare/