had a client freak out because their landing page was heavy as hell on mobile. i ended up just using this simple intersection observer setup to swap the low res placeholder with the real thing only when it's actually in view.
don't skip this if you're working with unoptimized photography or high-density retina assets.
const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target);}});});it works fine for most standard grids but does it mess with your lcp scores on anything?