Carga diferida
Una técnica que posterga la carga de imágenes fuera de pantalla hasta que el usuario se desplaza cerca de ellas, mejorando significativamente la velocidad de carga inicial de la página.
La carga diferida posterga la descarga de imágenes fuera del viewport hasta que el usuario se desplaza cerca de ellas, mejorando directamente la velocidad del primer pintado y las métricas LCP (Largest Contentful Paint).
Agregar loading="lazy" a las etiquetas <img> habilita la carga diferida nativa del navegador. La API Intersection Observer proporciona un control más fino sobre los umbrales de activación de carga.
Las imágenes dentro del viewport inicial (imágenes hero, logos) no deben usar carga diferida. Estas requieren loading="eager" o fetchpriority="high" para carga prioritaria. Combinada con optimización de imágenes, la carga diferida minimiza la transferencia inicial incluso en páginas con muchas imágenes. Junto con imágenes responsivas, entrega imágenes del tamaño apropiado solo cuando se necesitan.