0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
2 minute read
No comments

Optimizing Web Performance: Lazy Loading Images and Components

Victoria Puzhevich
June 21, 2024
optimizing-web-performance:-lazy-loading-images-and-components
Total
0
Shares
0
0
0

Optimizing web performance is crucial for providing a superior user experience, improving SEO, and increasing conversion rates. For intermediate and experienced developers, lazy loading images and components is an advanced technique that can make a significant difference in web application performance. Let’s explore the more technical aspects of this practice and how to implement it efficiently using native JavaScript, lazysizes, React.lazy, Dynamic Imports, and next/script.

Advanced Benefits of Lazy Loading

  1. Improvement of Largest Contentful Paint (LCP):

    • LCP is one of Google’s key Core Web Vitals indicators. By deferring the loading of non-critical images and components, the rendering time of the largest visible element in the initial viewport is significantly reduced.

  2. Reduction of Resource Consumption:

    • Lazy loading reduces the load on the server and network by avoiding unnecessary requests, improving overall system efficiency and allowing resources to be allocated more effectively.

  3. Enhancement of Responsiveness:

    • Applications that use lazy loading are more responsive, especially on mobile devices, providing a smoother experience for end users.

Implementation of Lazy Loading for Images with Native JavaScript

Complete Example:

  1. HTML: 

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Lazy Loading Example<span class="nt">
    


    
Lazy Loading Example

     data-src="image1.jpg" alt="Image 1 Description" class="lazy">
     data-src="image2.jpg" alt="Image 2 Description" class="lazy">
     data-src="image3.jpg" alt="Image 3 Description" class="lazy">
  1. JavaScript (lazyload.js): 
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy');
    const lazyLoad = (image) => {
        image.src = image.dataset.src;
        image.onload = () => {
            image.classList.remove('lazy');
            image.classList.add('lazy-loaded');
        };
    };

    if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    lazyLoad(entry.target);
                    observer.unobserve(entry.target);
                }
            });
        });

        lazyImages.forEach(img => {
            observer.observe(img);
        });
    } else {
        // Fallback for browsers that do not support IntersectionObserver
        const lazyLoadThrottle = () => {
            lazyImages.forEach(img => {
                if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom > 0 && getComputedStyle(img).display !== "none") {
                    lazyLoad(img);
                }
            });
        };

        window.addEventListener("scroll", lazyLoadThrottle);
        window.addEventListener("resize", lazyLoadThrottle);
        window.addEventListener("orientationchange", lazyLoadThrottle);
    }
});

Implementation of Lazy Loading for Images with lazysizes

HTML: 


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Lazy Loading with lazysizes<span class="nt">
    


    
Lazy Loading with lazysizes

     data-src="image1.jpg" alt="Image 1 Description" class="lazyload">
     data-src="image2.jpg" alt="Image 2 Description" class="lazyload">
     data-src="image3.jpg" alt="Image 3 Description" class="lazyload">

Implementation of Lazy Loading for Components with React.lazy and Suspense

React: 

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

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

Implementation of Lazy Loading for Components with Dynamic Imports in Next.js

Next.js: 

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false
});

export default function Home() {
  return <DynamicComponent />;
}

Additional Optimizations with next/script

Next.js: 

import Script from 'next/script';

function MyApp() {
  return (
    <>
      <Script src="https://example.com/somescript.js" strategy="lazyOnload" />
      <Component />
    </>
  );
}

Final Considerations

Implementing lazy loading with native JavaScript, lazysizes, React.lazy, Dynamic Imports, and next/script is a powerful approach to improving the performance of your web applications. These techniques allow precise control over when and how resources are loaded, providing a faster and more efficient user experience.

When applying these advanced techniques, it’s important to monitor performance impacts using tools like Lighthouse, Google Analytics, and Core Web Vitals reports. Continuous analysis and iterative optimization will ensure that your applications deliver the best possible experience.

References

  1. Google Developers: Native Lazy Loading
  2. MDN Web Docs: Intersection Observer API
  3. Web.dev: Lazy Loading
  4. Google Developers: Optimize LCP
  5. Lazysizes GitHub Repository
  6. React Documentation: Code Splitting
  7. Next.js Documentation: Dynamic Import
Total
0
Shares
Share 0
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
what-is-change-control-in-project-management?

What Is Change Control in Project Management?

June 21, 2024
Next Post
my-flow-and-productivity-has-improved-with-the-simplicity-of-neovim

My Flow and Productivity has Improved with the Simplicity of Neovim

June 21, 2024
Related Posts