Lazy loading. Cómo mejorar el SEO y la UX de tu página
Gracias al lazy loading, puedes hacer que tu página no cargue las imágenes o el contenido de los iframes hasta que llegue el momento de verlos. Y lo mejor, sin necesidad de usar ningún script.
El lazy loading, o carga diferida, puede ayudarte a mejorar tu web de forma rápida y sencilla. Gracias a este atributo, que funciona en casi todos los navegadores, tu página cargará más rápidamente, mejorando con ello tu puntuación en los buscadores y la experiencia de usuario. Te explico cómo.
Hoy en dÃa, toda técnica que ayude a mejorar el SEO de tu página debe ser tenida en cuenta. Uno de los parámetros que los buscadores en general, y Google en particular, tienen en cuenta a la hora de puntuar tu página, es la velocidad de carga.
Esta depende de varios factores, pero uno muy importante es la cantidad de bits que tienen que descargarse hasta que la página se renderiza en el navegador. En páginas con gran cantidad de imágenes, en las que tienes que desplazarte hacia abajo para ver el contenido, el peso puede verse notablemente afectado.
Afortunadamente, HTML5 incorpora un atributo para las etiquetas <img> y <iframe>
El atributo loading
Actualmente, casi todos los navegadores soportan el atributo loading, que se aplica a imágenes y marcos. Este atributo puede tomar tres valores: eager, lazy y auto, si bien este último aún no está implementado en todos los browsers.
A grandes rasgos, el uso de este atributo con el valor lazy indica al navegador que no cargue aquél contenido que esté por debajo del área visible de la pantalla. De este modo, el contenido no se carga hasta que el usuario se desplaza hacia abajo. Eso implica que la cantidad de imágenes que van a cargarse antes de que la página se muestre serán las justas y necesarias. Con ello, la página se visualiza más rápidamente y el usuario gasta menos datos en caso de que no llegue hasta el final.
Su uso es extremadamente sencillo. Un ejemplo:
<img src="imagen.jpg" loading="lazy" />
Con este atributo, te aseguras de que la imagen contenida en el atributo src no se cargará hasta que le toque ser vista.