Desde que somos víctimas de la tiranía de Google para desarrollo de sitios web, la gente ha buscado formas de que funcione todo más fluido en la carga de una página, muchas veces haciendo uso de sucios trucos que no es que hagan más rápida la carga, sino que engañan a la vista. Lo más burdo y que aún persiste, es la famosa ruedita que te indica que debes esperar, pero que "algo" está haciendo.
Hay varios scritps que recomienda mismo Speed Insights de Google para tratar de que la primera pantalla se dibuje de inmediato y todos los elementos que están fuera de ella, se vayan cargando mientras el usuario vaya haciendo scroll en el contenido, algo que tiene mucha lógica. Por decir algo, he publicado galerías con 3000 fotos y no es bueno para el usuario ni para mi servidor, que cuando una persona entre, su navegador consuma el total de las imágenes aún si no las ve.
Así entonces, la técnica Lazy Load que podríamos traducir como carga progresiva, permite justamente eso: no descargar elementos que no estén en pantalla o cercanos a ella. La buena noticia es que ya existe de manera nativa para la mayoría de navegadores modernos, y es añadiendo la propiedad loading="lazy" al elemento en cuestión. En este caso donde se utiliza es en IMG e IFRAME.
¡Eso es todo!, de verdad, parece magia. Sólo se añade esa propiedad a la etiqueta HTML y listo, algo como:
<img src="https://tar.mx/tar-negro.svg" alt="TAR.mx" width="270" height="76" loading="lazy" />
Con eso basta. El navegador no va a cargar ese elemento hasta que llegue visualmente a el, así si tienes muchas imágenes e iframes, les puedes añadir esa propiedad y olvidarte de soluciones en javascript para la carga progresiva de tu sitio web.
https://panchito-kardashian.tar.mx/media/2021/09/lazy-load.jpg