Add loading="lazy" to any <img> or <iframe> below the fold and the browser defers loading until the element nears the viewport. No JavaScript required.
Pair it with decoding="async" to take image decoding off the main thread. Above-the-fold hero images should stay eager — loading="eager" fetchpriority="high" tells the browser this image is critical.
For LCP-critical hero images, also add fetchpriority="high" — it nudges the network priority above other in-flight requests.