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!
Just added the lazy sizes library, performance seems a lot better. Do you know how to change the placeholder for an iframe though? The docs say to use data-src for the placeholder but I'm already using that for, well, the iframe source URL.
I also added the HTML attribute, not sure I can see any real change.
I just tested on M1 Pro with Safari, and it loaded great even on really lousy internet where I'm at. So not sure if your optimizations are already in effect, but I'm not having the challenges others mentioned with the current version of site.
Awesome! Yeah I didn't do any optimizations when I first posted here, but I added lazy loading on the iframe as well as React component lazy loading, so it looks like it's working pretty well.
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!