Forem: Henrique Schroeder

Optimizing Web Performance: Lazy Loading Images and Components

Henrique Schroeder — Fri, 21 Jun 2024 19:08:10 +0000

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

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.
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.
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:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Example</title>
    <style>
        .lazy {
            opacity: 0;
            transition: opacity 0.3s;
        }
        .lazy-loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>Lazy Loading Example</h1>
    <img data-src="image1.jpg" alt="Image 1 Description" class="lazy">
    <img data-src="image2.jpg" alt="Image 2 Description" class="lazy">
    <img data-src="image3.jpg" alt="Image 3 Description" class="lazy">
    <script src="lazyload.js"></script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading with lazysizes</title>
    <style>
        .lazyload {
            opacity: 0;
            transition: opacity 0.3s;
        }
        .lazyloaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>Lazy Loading with lazysizes</h1>
    <img data-src="image1.jpg" alt="Image 1 Description" class="lazyload">
    <img data-src="image2.jpg" alt="Image 2 Description" class="lazyload">
    <img data-src="image3.jpg" alt="Image 3 Description" class="lazyload">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
</body>
</html>

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

Translated post with the help of AI

Stop Using LocalStorage: Discover the Power of BroadcastChannel

Henrique Schroeder — Thu, 20 Jun 2024 15:00:59 +0000

In the world of web development, efficient communication between different parts of an application is crucial. While localStorage is widely used to share data between tabs, it has its limitations. A powerful and lesser-known alternative is the BroadcastChannel API. In this post, we'll explore what BroadcastChannel is, how to use it, practical use cases, its limitations, and best practices.

What is BroadcastChannel?

BroadcastChannel is a JavaScript API that allows communication between different browsing contexts (tabs, windows, iframes) within the same browser and domain. With it, you can send messages simply and efficiently between these different instances, overcoming some of the limitations of localStorage.

How Does It Work?

The operation of BroadcastChannel is quite straightforward. You create a communication channel with an identifier, and any message sent to that channel will be received by all listeners connected to it.

Usage Example

Creating the Channel

const channel = new BroadcastChannel('my_channel');

Sending Messages

channel.postMessage('Hello, world!');

Receiving Messages

channel.onmessage = (event) => {
  console.log('Message received:', event.data);
};

Closing the Channel

To close the channel and free up resources, use the close() method:

channel.close();

Use Cases

State Synchronization: Keep the application state synchronized across multiple tabs, such as updating a shopping cart in real-time.
Notifications: Send notifications or alerts between different contexts, like chat messages.
Global Logout: Implement a global logout that invalidates sessions in all tabs at once.
Media Playback Control: Synchronize media playback between different tabs.
Settings Adjustments: Update user settings simultaneously in multiple windows.

Limitations

Compatibility: Supported only in modern browsers, so check compatibility before using in production.
Same Domain: Works only between contexts of the same domain, limiting its application to a single site.
Performance: In intensive use cases, there may be performance impacts depending on the volume and frequency of messages.

Best Practices

Unique Identifiers: Use descriptive channel identifiers to avoid collisions and confusion.
Error Handling: Always implement error handling to deal with possible communication failures.
Resource Cleanup: Close unused channels to free up resources and avoid memory leaks.
Security: Do not send sensitive information via BroadcastChannel without adequate encryption measures.

Advanced Example: Theme Synchronization

Imagine you have an application with light and dark themes, and you want to synchronize the theme choice across different tabs.

// Listen for theme changes
channel.onmessage = (event) => {
  if (event.data.type === 'THEME_CHANGE') {
    document.body.className = event.data.theme;
  }
};

// Change theme and send message
function changeTheme(theme) {
  document.body.className = theme;
  channel.postMessage({ type: 'THEME_CHANGE', theme });
}

// Example theme change
changeTheme('dark-mode');

Security Considerations

While BroadcastChannel is secure for communications within the same domain, avoid sending sensitive information such as passwords or authentication tokens without additional security measures.

Conclusion

BroadcastChannel is a powerful tool for any web developer who needs to coordinate actions between different parts of an application. Its simplicity and efficiency make it ideal for synchronizing states and events across multiple browsing contexts. Try integrating it into your next project and see how it can simplify communication between browser tabs.