Also I realize the site is very heavy since it's basically loading 20 other sites, if anyone knows how to make it load asynchronously or only what's in the viewport, as well as other ideas to keep the interactivity of iframes but reduce their size and loading speed, please let me know.
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.
