Seguro que más de una vez has oído hablar de WPO, ¿verdad? Y sino, te lo explico muy rápido, WPO son las siglas de Web Performance Optimization y que hacen referencia a la optimización del rendimiento de una web, es decir, que vaya más rápido.
Pues bien, para conseguir que una web vaya más rápida hay muchos factores que podemos tocar, desde optimizar las tablas de la BD, optimizar las consultas, elegir un buen servidor de hosting, optimizar el código, minificar javascript / css, comprimir imágenes… un sinfín de cosas, que desde la perspectiva de consultor SEO muchas quedan fuera de nuestro alcance porque entran de lleno en la programación o administración de sistemas.
Pero sí hay otras tantas donde podemos hacer hincapié y mejorar la carga de nuestra web, y hoy vamos a hablar de una muy sencilla pero con un gran impacto, el lazy load. Una técnica que nos permite retrasar o postergar la carga de elementos que no sean imprescindibles en nuestra web.
¿Qué es exactamente el lazy load?
En términos sencillos, el lazy load es una técnica que retrasa la carga de elementos que no son inmediatamente visibles en la pantalla del usuario. En lugar de cargar todo el contenido de una página de golpe (imágenes, vídeos, iframes, etc.), estos recursos se cargan solo cuando el usuario está a punto de verlos al hacer scroll.
Te dejo un ejemplo de carga diferida de imágenes en la web.
Imagina que entras a un blog con 20 imágenes. Sin lazy load, tu navegador descargaría las 20 imágenes inmediatamente, aunque solo puedas ver las primeras dos o tres en tu pantalla. Con lazy load, solo se cargan esas primeras imágenes visibles, y el resto se irán cargando a medida que hagas scroll.
Te lo cuento en un vídeo:
¿Por qué implementar lazy load en tu web?
Los beneficios son muchos, a nivel de UX, SEO… incluso mejora del % de compra… pero destacan:
- Mejora la velocidad inicial de carga: Al cargar menos recursos al principio, la página se vuelve funcional mucho más rápido.
- Reduce el consumo de datos: Especialmente útil para usuarios con conexiones limitadas o en dispositivos móviles.
- Ahorra recursos del servidor: Menos peticiones simultáneas significa menos carga en tu servidor.
- Mejora las métricas Core Web Vitals: Particularmente LCP (Largest Contentful Paint) y CLS (Cumulative Layout Shift), factores que Google tiene en cuenta para el ranking.
- Aumenta la satisfacción del usuario: Una web que carga rápido siempre genera mejor experiencia.
Implementando lazy load en tu sitio web
Existen varias formas de implementar lazy load, desde las más sencillas hasta soluciones más personalizadas.
La más sencilla es sin duda implementar simplemente la etiqueta lazy load en HTML (Wordpress ya lo trae de forma nativa):
1. Lazy load nativo de HTML
La forma más simple es usar el atributo loading="lazy" en tus etiquetas de imagen:
<img src="mi-imagen.jpg" loading="lazy" alt="Mi imagen con lazy load">
Es simple, efectivo y no requiere JavaScript adicional. El contra, que si tienes un site con 10.000.000 de imágenes no es algo muy escalable.
También funciona para iframes:
<iframe src="mi-video.html" loading="lazy"></iframe>2. Usando plugins
Si usas WordPress tienes más facilidades, ya que tienes muchas opciones y son muy sencillas de implementar:
- Plugins específicos para lazy load: Perfmatters, WP Rocket, a3 Lazy Load,…
- Plugins de optimización que incluyen lazy load: Autoptimize, W3 Total Cache, WP Super Cache.
Con WP Rocket implementar Lazy Load es tan sencillo como marcar la opción en la sección correspondiente de MEDIOS y seleccionar qué elementos quieres que se aplique.
🏆Consejos prácticos para implementar lazy load
- No apliques lazy load a todo: Las imágenes que aparecen en la parte superior de tu página (above the fold) deberían cargarse normalmente. Aplica lazy load solo a lo que está fuera de la primera vista.
- Usa imágenes con dimensiones definidas: Especifica siempre el width y height de tus imágenes para evitar cambios bruscos en el layout (CLS).
<img src="imagen.jpg" loading="lazy" width="800" height="600" alt="Descripción">
- Proporciona un placeholder: Mientras la imagen se carga, muestra un placeholder para mejorar la experiencia de usuario.
- Prueba en diferentes dispositivos: Asegúrate de que tu implementación funciona correctamente en móviles, tablets y escritorio.
- Monitorea el rendimiento: Usa herramientas como PageSpeed Insights o Lighthouse para verificar las mejoras.
⚠️Lazy load y SEO: lo que debes saber
Aunque el lazy load es generalmente positivo para el SEO (al mejorar la velocidad), hay consideraciones importantes:
- Google puede ver el contenido con lazy load: Los crawlers modernos de Google ejecutan JavaScript y pueden ver contenido cargado de forma perezosa, pero no es garantía de que esto suceda siempre.
- Prioriza el contenido importante: Asegúrate de que el contenido crítico para SEO (como textos principales) no dependa de carga perezosa.
- Usa el atributo alt en las imágenes: Independientemente del lazy load, siempre incluye descripciones alt relevantes para SEO.
- Balancea SEO y experiencia de usuario: No sacrifiques una buena indexación por una carga extremadamente perezosa.
