¿Qué es el lazy loading o la carga diferida?
El “lazy loading” es una técnica de optimización web que consiste en retrasar la carga de ciertos elementos como imágenes, vídeos, o scripts en la web hasta que el usuario los necesite… algo así como que a medida que hacemos scroll o vamos pasando por áreas de la web se van cargando parte de sus elementos internos.
Dado el tamaño y la cantidad de información cada vez más grande en las webs es ya y desde hace mucho una prioridad frente a la carga convencional donde todos los recursos de la página se activaban de manera inmediata al acceder a la página.
¿Y nos afecta el lazy loading...?
Pues sí, y mucho… sobretodo en la optimización de la velocidad de carga. Y en muchos contextos…
- Reducción de la carga inicial
Si cargamos solo los elementos necesarios inicialmente y retrasamos la carga de los adicionales reduciremos la cantidad de datos que el navegador del usuario necesita descargar. Una acción muy útil para acelerar el tiempo de carga de la página, sobre todo en conexiones lentas con recursos limitados
- Mejora de la experiencia de usuario
Si retrasamos la carga de elementos no visibles al inicio también mejoraremos la experiencia de usuario al garantizar que la página principal se cargue rápidamente y exista una interactividad ágil. Es decir; menos frustración del usuario y más probabilidad de permanencia en la web
- Ahorro de ancho de banda
Al cargar imágenes y demás recursos solo cuando son necesarios reduciremos el consumo de ancho de banda tanto para el usuario como para el servidor
- Optimización para dispositivos móviles
Dado que los dispositivos móviles pueden tener restricciones de ancho de banda y capacidad de procesamiento, aplicar el lazy loading ayudará a optimizar la velocidad de carga los dispositivos
Aplicar Lazy loading en imágenes
No sólo contar con un formato de imagen ligero es importante. La carga diferida en imágenes es una de las acciones más comúnes en el Lazy loading. A continuación os dejo tres opciones para activarla:
Atributo loading=”lazy”
Usar el atributo loading=”lazy” en las etiquetas <img> para habilitar su carga diferida y activar las imágenes solo cuando estén cerca del área visible del navegador
<img src=”imagen.jpg” alt=”Descripción de la imagen” loading=”lazy”>
Lazy loading con JavaScript
Si el navegador no admite el atributo loading puedes recurrir a JavaScript. Con ete código todas las imágenes con la clase lazyload se cargarán cuando estén cerca de de la ventana visible del navegador
<img data-src=”imagen.jpg” alt=”Descripción de la imagen” class=”lazyload”>
document.addEventListener(“DOMContentLoaded”, function() {
var lazyloadImages = document.querySelectorAll(“.lazyload”);
var lazyloadThrottleTimeout;
function lazyload() {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove(‘lazyload’);
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener(“scroll”, lazyload);
window.removeEventListener(“resize”, lazyload);
window.removeEventListener(“orientationChange”, lazyload);
}
}, 20);
}
document.addEventListener(“scroll”, lazyload);
window.addEventListener(“resize”, lazyload);
window.addEventListener(“orientationChange”, lazyload);
});
Intersection Observer
Con Intersection Observer y un script para que todas las imágenes con la clase lazy se carguen al entrar en el área visible.
Agregando el atributo data-src. En el HTML y el atributo data-src en lugar de src para evitar que las imágenes se carguen de inmediato:
<img data-src=”imagen.jpg” alt=”Descripción de la imagen” class=”lazy”>
document.addEventListener(“DOMContentLoaded”, function() {
var lazyImages = document.querySelectorAll(‘.lazy’);
var lazyLoadObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove(‘lazy’);
lazyLoadObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyLoadObserver.observe(lazyImage);
});
});
¿Y Lazy loading con WordPress...?
Más allá de limpiar de forma regular la base de datos en wordpress, los plugins también ofrecen una utilidad muy eficaz para potenciar el lazy loading. Suelen ser fáciles de instalar y configurar, perfectos para usuarios sin experiencia técnica o que buscan una solución sin complicaciones.
Además, la mayoría de plugins de lazy loading también ofrecen funcionalidades adicionales como optimización de caché, compresión de imágenes y otras utilidades de optimización de rendimiento para potenciar la velocidad del sitio.
WordPress ofrece varios plugins muy avanzados en la implementación del lazy loading. Algunas opciones populares son:
- WP Rocket: Con una funcionalidad completa de optimización de caché y lazy loading
- Lazy Load by WP Rocket: Es gratuita y muy completa si solo necesitas la función de lazy loading
- WP Smush: Además de comprimir imágenes, lazy loading para imágenes
Los plugins suelen recibir actualizaciones periódicas y son compatibles con la mayoría de temas y complementos de WordPress. Además, suelen estar siempre actualizados.
El último algoritmo de Google ha trastocado bastante posiciones y estrategias de contenido… ha priorizado la calidad y utilidad frente a la redundancia de keywords, contenido vacío y abuso de IA…
Pero también ha dado aún más peso a la velocidad de carga y factores relacionados con los hashtag#CoreWebVitals, por eso cada detalle cuenta y optimizando el “lazy loading” mejoraremos el rendimiento, la eficiencia y la experiencia de usuario.
Al cargar los recursos de una página web de forma diferida reduciremos la cantidad de datos a descargarse inicialmente y mejoraremos significativamente el tiempo de carga. Muy importante en dispositivos móviles donde la velocidad de carga puede marcar la diferencia en la experiencia de usuario
Otro pequeño detalle a tener en cuenta dentro de la estrategia global de posicionamiento…