¿Cómo posponer la carga de imágenes que no aparecen en pantalla?

En sitios web con una gran cantidad de imágenes, es complicado encontrar un balance adecuado entre rendimiento y funcionalidad. Aquí tienes una receta para mejorar estas páginas.

La teoría es muy sencilla, le vamos a ocultar al navegador del usuario algunas de las imágenes pesadas, que no estén a la vista, para aumentar la velocidad de carga.

Esta técnica, conocida como “Lazy Loading”, mejora considerablemente el tiempo que tarda en mostrarse una página web, cuando por ejemplo necesitamos mostrar muchas imágenes en un listado. Fotocasa, Idealista o Vibbo, son algunas de las páginas que lo hacen.

Ten en cuenta que, tus usuarios, no siempre navegan de la manera que diseñamos nuestras páginas. Un usuario puede llegar a una URL concreta de tu sitio, descargarse diez imágenes que se encuentran en una zona de la pantalla que no ve, y hacer click en un enlace antes de llegar a la zona donde se mostraban estos ficheros.

En este caso, habrá consumido innecesariamente todos esos datos. Es un problema notable en conexiones móviles.

Por si fuera poco, tu página podría quedarse congelada mientras se completan todas estas transferencias, haciendo que el navegar por el contenido sea frustrante, ya que al usuario le harás esperar más de lo necesario.

Como ya sabes, los usuarios que esperan más de 4 segundos a que cargue un sitio web, tienen muchas papeletas para desistir y marcharse. En dispositivos móviles, el margen de maniobra que tienes en este sentido, es muy pequeño.

¡Cuidado!, ¡aviso!, ¡importante!, léeme antes de hacer Lazy Loading con tus imágenes

Las imágenes que muestras, también ayudan al posicionamiento de tu sitio web. Si tienes una gran cantidad de visitas orgánicas que vienen desde el buscador de imágenes de Google, te interesa seguir estando ahí.

Posponer la carga de imágenes en sitios donde no debes, puede afectar negativamente a tu posicionamiento, ya que sólo se mostrarán cuando el navegador tenga JavaScript habilitado.

Para poner un ejemplo claro de cuándo y cómo hacerlo, piensa en Pinterest. Todo su negocio gira en torno a las imágenes que se comparten en esta red social y, aunque utilizan gran cantidad de JavaScript en toda su aplicación, las partes críticas funcionan aunque se deshabilite.

De hacer Lazy Loading, deberías hacerlo sólo en las imágenes que no te importe perder en las búsquedas.

Volviendo a las páginas de inmobiliaria de la introducción, podrías ocultar las imágenes de los listados, por ejemplo, siempre y cuando se vean dentro del anuncio principal.

Hay cientos de artículos sobre SEO, imágenes y demás batallas sobre si el JavaScript se indexa o no, que puedes consultar por Internet. Estas discusiones se alejan del alcance de este artículo.

Simplemente quiero recalcar que no deberías seguir estos pasos sin pensar en los riesgos y en los beneficios. Si tienes dudas, descarta la idea y céntrate simplemente en optimizar las imágenes de tu página web.

Ahora sí, ¡Lazy Loading!

Foto de Javier Mazzeo en Unsplash.

¿Te has fijado?, tu navegador no había cargado esta imagen hasta que no has hecho scroll hasta aquí abajo. Puedes hacer scroll de nuevo para ver el efecto, aunque la imagen ya estará en la memoria caché de tu navegador.

Vamos al código.

Para hacerlo, tienes que modificar el HTML de las imágenes para las que quieras posponer su carga, por ejemplo:

<img src="imagen.jpg" />

Quedaría así:

<img data-src="imagen.jpg" class="lazyLoad" />

Si te fijas, en lugar de “src”, usamos “data-src”. Este nombre del atributo es por convención, se podría llamar de cualquier otra manera. Además, le hemos añadido la clase “lazyLoad”, que utilizaremos para encontrar las imágenes desde los estilos CSS y el código JavaScript.

El CSS sería el siguiente:

.lazyLoad {
    width: 100%;
    opacity: 0;
}

.visible {
    transition: opacity 1000ms ease;
    opacity: 1;
}

No es más que una animación en la opacidad de la imagen, para que sea más agradable.

En cuanto al JavaScript, podemos usar la nueva API para los navegadores, IntersectionObserver:

// Este es el método que vamos a llamar
// cada vez que se detecte una intersección
function onScrollEvent(entries, observer) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            var attributes = entry.target.attributes;
            var src = attributes['data-src'].textContent;
            entry.target.src = src;
            entry.target.classList.add('visible');
        }
    });
}

// Utilizamos como objetivos todos los
// elementos que tengan la clase lazyLoad,
// que vimos en el HTML de ejemplo.
var targets = document.querySelectorAll('.lazyLoad');

// Instanciamos un nuevo observador.
var observer = new IntersectionObserver(onScrollEvent);

// Y se lo aplicamos a cada una de las
// imágenes.
targets.forEach(function(entry) {
    observer.observe(entry);
});

Por último, ten en cuenta que la API IntersectionObserver es relativamente nueva, puedes hacer que los navegadores que no lo soportan todavía puedan utilizarlo, añadiendo este JavaScript:

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Conclusión

Hoy nos hemos metido de lleno con una receta sencilla y que hará que tu página cargue mucho más rápido, retrasando la carga de las imágenes hasta que sea estríctamente necesario.

Si prefieres utilizar una biblioteca con mucho mejor soporte, lozad.js hara todo lo que has visto aquí, y mucho más.

Recuerda aplicar Lazy Load únicamente en las imágenes que no te importe perder en los resultados de búsqueda, ya que no todos los buscadores soportan JavaScript y, en el caso concreto de este método, mucho menos van a hacer scroll hasta la imagen que estás ocultando.