¿Cómo funciona el atributo loading="lazy" para imágenes e iframes?
Descubre cómo loading="lazy" en HTML mejora el rendimiento al diferir la carga de imágenes e iframes hasta que son visibles. ¡Optimiza la velocidad de tu web!
El atributo loading="lazy" es una potente característica nativa de HTML diseñada para implementar la carga diferida («lazy loading») de imágenes (<img>) e iframes (<iframe>). Su objetivo principal es mejorar significativamente el rendimiento de carga inicial de tus páginas web y optimizar el uso de recursos.
¿Cómo funciona loading="lazy"?
Cuando un navegador moderno encuentra una etiqueta <img> o <iframe> que tiene el atributo loading="lazy", no descarga inmediatamente el recurso (la imagen o el contenido del iframe) si este se encuentra fuera de la pantalla visible actual («off-screen») o lejos del «viewport» (el área de la página que el usuario está viendo en ese momento).
En lugar de ello, el navegador monitoriza el desplazamiento (scroll) del usuario. Solo cuando el usuario se desplaza hacia abajo y el espacio reservado para la imagen o el iframe está a punto de entrar en el «viewport», el navegador inicia la petición y descarga del recurso correspondiente.
El navegador utiliza heurísticas internas para determinar cuán «cerca» debe estar un elemento para empezar a cargarlo, buscando un equilibrio entre ahorrar recursos y asegurar que el contenido esté listo cuando el usuario lo vea.
¿En qué elementos se puede usar?
El atributo loading con el valor lazy se aplica principalmente a dos tipos de elementos:
- Imágenes:
<img src="ruta_imagen.jpg" loading="lazy" alt="Descripción de la imagen"> - Iframes:
<iframe src="ruta_contenido_embebido.html" loading="lazy" title="Título del iframe"></iframe>
Valores del atributo loading
El atributo loading puede tener principalmente tres valores:
lazy: Habilita la carga diferida. El navegador retrasa la carga del recurso hasta que determina que es probable que el usuario lo vea.eager: Carga el recurso inmediatamente, sin importar si está visible o no. Este es el comportamiento predeterminado si el atributoloadingno está presente o si se le asigna un valor inválido.auto: Permite que el navegador decida si aplicar o no la carga diferida. El comportamiento exacto puede variar entre navegadores o basarse en diferentes factores (como la velocidad de conexión). En la práctica, para asegurar la carga diferida, es más fiable usarlazyexplícitamente.
Principales beneficios de usar loading="lazy"
- Mejora del tiempo de carga inicial (First Contentful Paint, Largest Contentful Paint): Al reducir la cantidad de datos que se deben cargar al inicio, las partes visibles de la página se muestran más rápido.
- Ahorro de ancho de banda: Los usuarios no descargan recursos que quizás nunca vean (si no se desplazan hasta el final de la página), lo cual es especialmente beneficioso para usuarios con planes de datos limitados o conexiones lentas.
- Reducción del consumo de recursos del dispositivo: Menos procesamiento inicial para el navegador y menos uso de memoria.
- Mejora de la experiencia de usuario percibida: Las páginas se sienten más rápidas y fluidas.
Consideraciones importantes al usar loading="lazy"
- Contenido «above the fold» (visible sin hacer scroll): Es crucial no aplicar
loading="lazy"a imágenes o iframes que son importantes y visibles en la parte superior de la página cuando esta se carga por primera vez (el contenido «above the fold»).
Estos elementos deben cargarse de forma prioritaria (eagero sin el atributoloading) para no afectar negativamente la experiencia del usuario ni métricas como el LCP. - Dimensiones de las imágenes (
widthyheight): Para las etiquetas<img>, es muy recomendable especificar siempre sus atributoswidthyheight.
Esto permite al navegador reservar el espacio correcto para la imagen antes de que se cargue, lo que ayuda a prevenir saltos en el diseño (CLS - Cumulative Layout Shift) cuando la imagen finalmente se muestra.
Ejemplo de uso:
<body>
<header>
<img src="logo.png" alt="Logo del sitio" width="150" height="50"> </header>
<main>
<h1>Artículo Interesante</h1>
<p>Mucho texto aquí...</p>
<img src="imagen_grande_del_articulo.jpg" loading="lazy" alt="Imagen descriptiva del artículo" width="800" height="600">
<p>Más texto...</p>
<iframe src="https
: //www.youtube.com/embed/VIDEO_ID" loading="lazy" title="Vídeo de YouTube" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</main>
<footer>...</footer>
</body>
Lenguaje del código: PHP (php)En resumen, loading="lazy" es una herramienta nativa de HTML muy eficaz para optimizar la carga de imágenes e iframes, mejorando el rendimiento general de tu sitio web sin necesidad de recurrir a bibliotecas JavaScript externas para esta funcionalidad básica.
