Lazy loading:
el secreto para que tu sitio cargue volando (y por qué Google lo premia)

1. Qué es el lazy loading (y por qué es tan importante)

Lazy loading —"carga perezosa" en español— es una técnica sencilla con un impacto enorme: en lugar de descargar todas las imágenes de una página al mismo tiempo cuando el usuario llega, el navegador descarga solo lo que está a punto de ser visible. El resto se descarga conforme el usuario hace scroll.

Piensa en una página típica: un hero con una foto de portada, tres secciones intermedias y una galería al final con doce imágenes. Sin lazy loading, el navegador pide las dieciséis imágenes antes de que el usuario haya visto siquiera la primera línea. Con lazy loading, descarga la del hero (la única visible) y deja el resto para después. El usuario empieza a ver tu página inmediatamente.

Y lo mejor: el lazy loading es una técnica completamente del lado del cliente. Vive en tu HTML y en una pequeña pieza de JavaScript (o incluso solo en HTML moderno con loading="lazy"). No depende del backend, no depende del CDN y, sobre todo, no depende del proveedor de imágenes que uses.

2. El impacto real en la velocidad de navegación

El número que importa al usuario es uno solo: cuánto tarda en ver y poder usar la página. El lazy loading mueve esa aguja de manera dramática porque ataca el problema más caro de toda página web: descargar bytes que el usuario nunca verá.

Hay un beneficio adicional que pocos mencionan: el lazy loading también te ahorra dinero. Si pagas por ancho de banda en tu CDN o por transformaciones en un proveedor de imágenes, no descargar lo que el usuario no verá significa menos facturación. Para un sitio con tráfico moderado, esto puede traducirse en cientos de dólares mensuales.

3. Por qué Google lo recompensa en el ranking

Google no esconde sus criterios: desde 2021 los Core Web Vitals son señal oficial de ranking. Y dos de esas tres métricas se mejoran prácticamente solas cuando aplicas lazy loading correctamente.

Google no se limita a recomendar lazy loading — lo trae incorporado de fábrica en Chrome a través del atributo loading="lazy". Cuando ves esa directiva en una etiqueta <img>, es exactamente lo que el equipo de Chrome quiere que hagas.

4. La independencia: por qué no debes amarrarte a un proveedor

Aquí viene la parte que pocos artículos abordan honestamente: el lazy loading es una técnica de cliente, no una funcionalidad de un proveedor. Vive en tu HTML y en tu JavaScript. Funciona perfectamente sin ningún proveedor externo.

Esto importa porque en producción real las cosas cambian: un día contratas un servicio de imágenes a la carta como Webability, Cloudinary o Imgix. Otro día decides cambiar de proveedor o llevarlo in-house. Si tu lazy loading está bien diseñado, ese cambio es cuestión de minutos y no toca tu HTML.

En las siguientes secciones vamos a ver código concreto de las tres situaciones reales: primero un lazy loading que funciona solo, luego cómo conectarle un proveedor, y finalmente cómo desconectarlo cuando ya no lo necesitas — sin tocar el HTML.

5. Ejemplo: lazy load independiente (sin proveedor)

Empecemos por lo más limpio: un lazy loading que no depende de nadie. Tu sitio sirve sus propias imágenes y tú decides cuándo cargarlas.

El truco es siempre el mismo: no pongas la URL real en el atributo src. Ponla en data-src, y deja que un pequeño script la mueva al src en el momento adecuado.

El HTML

<!-- Imágenes con lazy load propio -->
<img class="lazy"
     data-src="/images/foto-1.jpg"
     width="800" height="600"
     alt="Vista del producto">

<img class="lazy"
     data-src="/images/foto-2.jpg"
     width="800" height="600"
     alt="Detalle del producto">

Nota cómo no hay src: solo data-src. El navegador no dispara la descarga automáticamente. Y los atributos width y height reservan el espacio para evitar saltos visuales (CLS).

El script (sin librerías)

// lazy.js — versión independiente, ~20 líneas, sin dependencias
(function () {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      const img = entry.target;
      // Mueve la URL real al src — el navegador descarga ahora.
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      img.classList.remove('lazy');
      img.classList.add('lazy-loaded');
      observer.unobserve(img);
    });
  }, {
    rootMargin: '200px 0px',  // empieza a cargar 200px antes de ser visible
    threshold: 0.01
  });

  document.querySelectorAll('img.lazy').forEach((img) => observer.observe(img));
})();

Eso es todo. Veinte líneas, cero dependencias, cero proveedores. Cualquier imagen con clase lazy se carga solo cuando entra (o está a punto de entrar) en pantalla. Y si el navegador no soporta IntersectionObserver —caso extremadamente raro hoy— la imagen simplemente nunca se carga, lo cual es bastante seguro como degradación. Para una protección extra, puedes incluir un fallback que cargue todo si el observer no existe.

6. Ejemplo: conectar el lazy load a un proveedor

Llega el día en que quieres entregar WebP a Chrome, AVIF a Safari, redimensionar al vuelo para cada dispositivo y servir desde un CDN global. Es decir: contratar un proveedor de imágenes a la carta.

Si tu HTML está bien diseñado, no tocas el HTML. Solo cambias el script. El truco es que el script construya la URL del proveedor a partir del data-src que ya tenías.

El HTML — exactamente igual que antes

<!-- Mismo HTML que en el ejemplo anterior. No cambia nada. -->
<img class="lazy"
     data-src="/images/foto-1.jpg"
     data-width="800"
     width="800" height="600"
     alt="Vista del producto">

Si quieres que el proveedor pueda redimensionar, agrega data-width con el ancho real al que se renderiza. Eso permite que el script pida la versión correcta para cada dispositivo.

El script — ahora con proveedor

// lazy.js — versión conectada a un proveedor (Webability como ejemplo)
(function () {
  const PROVIDER  = 'https://cdn.webability.info';   // base del proveedor
  const ACCOUNT   = 'mi-cuenta';                     // tu identificador
  const dpr       = window.devicePixelRatio || 1;    // soporte retina

  // Función que transforma "/images/foto.jpg" en una URL del proveedor.
  function buildUrl(originalSrc, width) {
    const w = Math.round(width * dpr);
    return `${PROVIDER}/${ACCOUNT}/w_${w},f_auto,q_auto${originalSrc}`;
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      const img      = entry.target;
      const original = img.dataset.src;
      const width    = parseInt(img.dataset.width || img.width || 800, 10);

      // Aquí está la única línea que cambia respecto al ejemplo independiente:
      img.src = buildUrl(original, width);

      img.removeAttribute('data-src');
      img.classList.remove('lazy');
      img.classList.add('lazy-loaded');
      observer.unobserve(img);
    });
  }, { rootMargin: '200px 0px', threshold: 0.01 });

  document.querySelectorAll('img.lazy').forEach((img) => observer.observe(img));
})();

Una sola función nueva —buildUrl()— y una línea modificada. El HTML sigue diciendo /images/foto-1.jpg; el script es el que decide convertir esa URL en https://cdn.webability.info/mi-cuenta/w_800,f_auto,q_auto/images/foto-1.jpg en el momento de la descarga. El navegador recibe AVIF si lo soporta, WebP si no, y el tamaño exacto para la pantalla del usuario.

7. Ejemplo: desconectar el proveedor sin romper nada

Imagina el escenario inverso: hace seis meses arrancaste con un proveedor, integraste todo, y ahora quieres cambiar de proveedor o servir tú mismo las imágenes. Si seguiste la receta de la sección anterior, esto es trivial.

Para "apagar" el proveedor, simplemente reemplaza lazy.js con la versión independiente:

Cambiar a otro proveedor

// lazy.js — la nueva función buildUrl con otro proveedor.
// El resto del archivo es idéntico: el observer no cambia,
// el HTML no cambia, los data-src no cambian.

function buildUrl(originalSrc, width) {
  // Antes: Webability
  // return `https://cdn.webability.info/mi-cuenta/w_${width},f_auto,q_auto${originalSrc}`;

  // Ahora: otro proveedor
  return `https://otro-proveedor.cdn.com/fit-in/${width}x0/filters:format(auto)${originalSrc}`;
}

Apagar el proveedor por completo

// Para volver a servir desde tu propio dominio,
// simplemente devuelve la URL original sin tocarla.

function buildUrl(originalSrc, width) {
  return originalSrc;   // adiós proveedor.
}

Eso es todo. Una función que devuelve un string. El HTML del sitio nunca se tocó: sigue teniendo data-src="/images/foto.jpg" como el primer día. Las miles de páginas, los miles de productos, los miles de artículos siguen funcionando. La migración entre proveedores es un solo archivo JavaScript.

8. Buenas prácticas y errores comunes

Un detalle importante: la imagen del hero —la que carga primero y define tu LCP— debería usar el atributo nativo fetchpriority="high" en lugar de lazy loading. Hacer lazy loading sobre el hero es contraproducente: es la única imagen que el usuario sí ve inmediatamente.

Y para todo lo demás —galerías, sliders, contenido secundario, footers— el lazy loading es no negociable. Es la diferencia entre una página que aparece al instante y una que hace esperar.

9. Referencias y lecturas recomendadas

Las fuentes oficiales y técnicas más sólidas para profundizar en el tema: