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:
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!