Carga diferida de imágenes
Cargue imágenes fuera de la pantalla solo cuando se desplaza.
Qué es
La carga diferida significa que las imágenes fuera del área visible no se cargan inmediatamente, sino solo cuando el usuario se desplaza hacia ellas. El atributo loading="lazy" es suficiente.
Por qué importa
Sin carga diferida, el navegador descarga incluso imágenes en la parte inferior de la página que el usuario quizás nunca vea; esto retrasa el primer renderizado y desperdicia datos. La carga diferida acelera el inicio y ahorra transferencia.
Cómo hacerlo
- 1Agregue cargando="lazy" a imágenes e iframes debajo del área visible.
- 2NO utilice lazy en la imagen principal de la mitad superior de la página (la imagen LCP); la desea lo antes posible (cárguela previamente si es necesario).
- 3Especifique siempre el ancho y el alto para que el diseño no salte (CLS).
Ejemplo
<img src="gallery-12.webp" alt="..." loading="lazy" width="800" height="600">Conclusión
La carga diferida es nativa hoy en día (un atributo) y acelera las páginas con muchas imágenes casi de forma gratuita. Solo tenga cuidado con la imagen principal de la mitad superior de la página; no la haga perezosa. Agregue dimensiones para la estabilidad del diseño.
Temas relacionados