Lazy load: qué es, cómo funciona y cómo afecta a tus Core Web Vitals

El lazy load o carga diferida es una técnica de optimización que retrasa la carga de imágenes, vídeos e iframes hasta que el usuario los necesita. Aplicarlo correctamente mejora la velocidad de tu web, impacta positivamente en los Core Web Vitals y, por tanto, favorece tu posicionamiento en Google. En nuestra agencia SEO te explicamos desde la teoría hasta la implementación paso a paso.

¿Qué es el lazy load o carga diferida? 🚀

Cuando un usuario abre una página web, el navegador intenta descargar todos los recursos de golpe: imágenes, vídeos, scripts, fuentes… Sin embargo, la gran mayoría de esos recursos están situados debajo del pliegue (below the fold) y el visitante no los verá hasta que haga scroll. Cargarlos todos de forma inmediata es, en la mayoría de los casos, un desperdicio de ancho de banda y tiempo.

El lazy load, también llamado carga diferida o carga perezosa, es precisamente la técnica que resuelve ese problema: retrasa la carga de los recursos no visibles hasta el momento en que el usuario se aproxima a ellos. Solo se descarga lo que el visitante necesita ver en cada instante.

Lo contrario de este patrón es el Eager Loading, que carga todo el contenido en el momento inicial sin importar si el usuario llegará a verlo o no.

💡 Definición: El lazy loading es un patrón de diseño de rendimiento web que pospone la inicialización de objetos hasta el momento en que son realmente necesarios, reduciendo el tiempo de carga inicial y el consumo de recursos.

¿Cómo funciona el lazy load?

Para entender el mecanismo, conviene imaginar la pantalla del navegador como una ventana. Todo lo que queda dentro de esa ventana, el viewport es lo que el usuario ve en cada momento. El lazy load solo descarga los elementos que están dentro del viewport o a punto de entrar en él.

El atributo nativo loading="lazy"

Desde 2019, los navegadores modernos soportan de forma nativa la carga diferida mediante un simple atributo HTML. No hace falta JavaScript externo:

<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy" width="800" height="600">

<iframe src="video-embed.html" loading="lazy"></iframe>

Con solo añadir loading="lazy", el navegador decide de manera autónoma cuándo cargar cada elemento. Es la opción más sencilla, liviana y compatible con las directrices de Google.

La Intersection Observer API

Para casos más avanzados o para compatibilidad con navegadores más antiguos, la solución más recomendada por la comunidad técnica es la Intersection Observer API. Esta API de JavaScript permite detectar con precisión cuándo un elemento entra o sale del viewport, sin tener que escuchar el evento de scroll en cada píxel.

Su funcionamiento es el siguiente:

1. Se crea un observer que vigila los elementos con el atributo data-src en lugar de src.
2. Cuando el elemento entra en el área visible, el observer lo detecta.
3. En ese momento, el script sustituye data-src por src y el navegador inicia la descarga.

Este enfoque es considerablemente más eficiente que las librerías antiguas basadas en el evento scroll, que ejecutaban código en cada milisegundo del desplazamiento.

Librerías JavaScript especializadas

Además de las opciones anteriores, existen librerías dedicadas como lazysizes o lozad.js que ofrecen compatibilidad extendida y opciones de configuración avanzada. Son especialmente útiles en proyectos a medida donde el CMS no cubre todas las necesidades.

Lazy load y Core Web Vitals: la relación que debes conocer

Los Core Web Vitals son el conjunto de métricas de experiencia de usuario que Google utiliza como factor de posicionamiento desde 2021. Entender cómo el lazy load interactúa con estas métricas es fundamental para evitar errores que pueden perjudicar tu SEO.

Lazy load y LCP (Largest Contentful Paint)

El LCP mide el tiempo que tarda en cargarse el elemento visual más grande de la página dentro del viewport inicial. Aquí radica el riesgo más común: aplicar lazy load a la imagen principal del hero o de la cabecera es un error grave.

Si esa imagen que es precisamente el elemento más grande visible desde el primer momento se carga de forma diferida, el LCP empeora considerablemente. La regla es clara: el lazy load debe aplicarse solo a los recursos que están por debajo del pliegue.

Lazy load y CLS (Cumulative Layout Shift)

El CLS mide los cambios inesperados en el diseño de la página mientras carga. Si una imagen se carga de forma diferida sin reservar espacio previo en el DOM, puede provocar que el contenido de alrededor se desplace visualmente, lo que penaliza el CLS.

La solución es sencilla: siempre define los atributos width y height en las imágenes, aunque utilices CSS para hacerlas responsivas. De esta manera, el navegador reserva el espacio antes de que se carguen.

Lazy load e INP (Interaction to Next Paint)

El INP, que desde marzo de 2024 reemplazó al FID como métrica de interactividad, mide la capacidad de respuesta de la página ante las interacciones del usuario. La carga diferida bien implementada reduce el hilo principal del navegador, lo que favorece un INP más bajo y, por tanto, mejores resultados.

Lazy load y SEO: ¿qué dice Google?

Una duda habitual que nos plantean los clientes es si Google puede indexar correctamente las imágenes cargadas de forma diferida. La respuesta es que sí, siempre que la implementación sea correcta.

Googlebot es capaz de ejecutar JavaScript y renderizar páginas de forma similar a un navegador moderno, lo que le permite detectar y rastrear el contenido que se carga dinámicamente. Sin embargo, hay algunos matices importantes:

• El rastreo por JavaScript puede retrasarse. Googlebot prioriza el HTML estático. Si el contenido solo aparece tras la ejecución de JavaScript, puede que tarde más en ser indexado que el contenido presente en el HTML inicial.
• El atributo nativo loading="lazy" es perfectamente compatible con Google. La propia documentación oficial de Google recomienda esta técnica para mejorar el rendimiento.
• Evita ocultar contenido crítico detrás de lazy load. Si hay texto relevante que solo aparece tras interacciones de scroll gestionadas por JavaScript, puede haber problemas de indexación.

Desde nuestra agencia de posicionamiento web siempre auditamos la implementación del lazy load dentro del proceso de auditoría SEO técnica, porque un error en este punto puede tener consecuencias visibles en el ranking.

Cómo implementar la carga diferida paso a paso

Opción 1: HTML nativo (recomendado para la mayoría de casos)

La opción más simple y eficiente. Añade loading="lazy" a tus imágenes e iframes, y especifica siempre las dimensiones:

<!-- ✅ Correcto: con dimensiones definidas -->
<img
  src="foto-producto.jpg"
  alt="Descripción detallada del producto"
  loading="lazy"
  width="600"
  height="400"
>

<!-- ❌ Incorrecto: sin dimensiones (puede causar CLS) -->
<img src="foto-producto.jpg" alt="Producto" loading="lazy">

Opción 2: Intersection Observer API (para mayor control)

Esta solución es ideal cuando necesitas comportamientos personalizados, como animaciones de entrada o umbrales de activación específicos:

// Seleccionamos todas las imágenes con data-src
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px' // Empieza a cargar 200px antes de que entre en pantalla
});

images.forEach(img => observer.observe(img));

Opción 3: Lazy load para vídeos e iframes de YouTube

Los iframes de YouTube son especialmente pesados. Una técnica muy eficaz consiste en mostrar únicamente la miniatura del vídeo y cargar el iframe solo cuando el usuario hace clic en él. Esto puede reducir el peso de la página en varios cientos de kilobytes por vídeo incrustado.

Opción 4: Plugin

Implementar lazy load en un sitio web puede variar según la tecnología y el marco de trabajo utilizado. Existen diversas bibliotecas y plugins de JavaScript que facilitan su integración. En el caso de sitios web basados en WordPress, hay plugins disponibles que pueden agregar funcionalidades de lazy load con facilidad. En Top SEO solemos usar los siguientes:

1. A3 Lazy Load: plugin popular y fácil de usar que permite habilitar Lazy Loading en imágenes, videos y elementos iframe. Ofrece opciones de configuración flexibles, lo que te permite personalizar cómo se carga el contenido diferido en tu sitio web.
2. Lazy Load by WP Rocket: es otro plugin confiable que brinda la funcionalidad de Lazy Loading a tu sitio WordPress. Es ligero y se integra bien con otros plugins de caché. Puedes configurar fácilmente qué elementos deseas que se carguen de forma diferida.
3. Smush: solución completa para la optimización de imágenes en WordPress. Además de la compresión de imágenes, ofrece Lazy Loading como una característica adicional. Puedes ajustar la configuración para optimizar tus imágenes y habilitar el Lazy Loading de manera sencilla.