Docs / Image / JavaScript vs Browser Native Lazy Loading

JavaScript vs Browser Native Lazy Loading

JavaScript Lazy Loading

JavaScript lazy loading uses intersectionObserver to detect elements in the viewport and lazy load them.

Pros:

  • Supported by all major browsers

Cons:

  • Low performance compared to browser native
  • Requires JavaScript

Browser Native lazy loading

Native lazy loading gives the best performance since it doesn't rely on JavaScript. This is supported in all browsers like Chrome, Firefox, Edge.

The threshold of lazy loading is determined by the browser-based on several factors like connection speed, data saver mode, etc.

Pros:

  • Fast, high performance
  • Less chance of conflicts
  • Browser intelligently calculates the threshold

Cons:

  • Not supported in all browsers, like Safari

You can read more about native lazy loading here: https://web.dev/native-lazy-loading/