Native lazy-load vs. IntersectionObserver: render-budget impact

Native lazy-load vs. IntersectionObserver: render-budget impact

Tested 88 templates for whether below-fold images entered the rendered DOM for Googlebot.

— loading="lazy" (native): images in rendered HTML 98.1% ▓▓▓▓▓▓▓▓▓▓
— IntersectionObserver, no fallback: 43.6% ▓▓▓▓░░░░░░
— IO with scroll-event polyfill: 71.2% ▓▓▓▓▓▓▓░░░

The gap: Googlebot doesn't scroll, so JS-gated lazy loading that needs viewport events silently hides content from the render.

So what: native loading="lazy" is strictly better for indexing — the browser handles it pre-render, no scroll required. Custom IO loaders save bytes but cost you 25–55% of below-fold image and content indexation unless you ship a no-scroll fallback. If you must use IO, render the markup server-side and let IO swap only the src.