I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques:
I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!
1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes)
I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!