react-notion-x icon indicating copy to clipboard operation
react-notion-x copied to clipboard

Replaced third-party lazy-loading implementation with native lazy-loading for improved performance

Open rodriguescarson opened this issue 10 months ago • 5 comments
trafficstars

Replaced third-party lazy-loading implementation with native lazy-loading for improved performance.

Performance Benefits:

  • Reduced JavaScript Overhead: Native lazy-loading is handled by the browser, eliminating the need for additional libraries and reducing the initial JS load.
  • Optimized by the Browser: Modern browsers automatically optimize native lazy-loading, resulting in better performance and lower memory usage.
  • Improved Initial Load: By leveraging native lazy-loading, we reduce the number of unnecessary requests, improving page load times, especially on slower connections or devices.
  • No Extra Dependencies: This change removes the need for third-party libraries like react-lazy-images or react-lazy-load-image-component, making the codebase simpler and more maintainable.

This change leverages the built-in loading="lazy" attribute in React for images, which provides a significant performance boost by deferring image loading until they're close to the viewport, optimizing the user experience on initial load.

rodriguescarson avatar Jan 11 '25 18:01 rodriguescarson