loading="lazy" no es magia.
No es la excusa para llenar tu landing de imágenes de 5 MB.
No es un atajo que arregla por sí solo una web obesa.
No es un plugin milagroso de WordPress con nombre molón.
Eso es lo que piensa el mediocre.
Lo que loading="lazy" sí es:
una instrucción directa al navegador para que posponga la carga de imágenes e iframes hasta que se acerquen al viewport.
Es una bala sencilla contra el peso inicial de tu web.
El secreto de un render rápido cuando tienes muchas imágenes pero pocas críticas.
Acto I — La mentira de la medianía
Dogma reproducido:
“Si pongo loading="lazy" en todas las imágenes, ya tengo la web optimizada”.
Autopsia:
Un blog mete 40 imágenes de stock de 2 MB cada una.
Todas con loading="lazy".
El navegador carga solo la hero image al inicio, sí, pero esa hero pesa lo mismo que un vídeo de YouTube.
Resultado: CLS brutal cuando entran las imágenes en scroll, métricas de LCP reventadas.
El diseñador sonríe porque “ya tiene lazy load”. El usuario abandona porque la web tarda en pintar lo que importa.
Causa: confundir pereza con optimización real.
Consecuencia: primeras impresiones lentas, saltos visuales, usuarios frustrados.
Smells — síntomas de uso chapucero:
- Todas las imágenes con
loading="lazy", incluyendo la hero o el logo. - Imágenes gigantes que siguen siendo lentas aunque se carguen tarde.
- CLS (Cumulative Layout Shift) alto porque no se reservó espacio con
widthyheight.
Contraejemplo rápido:
HTML
<!-- Hero image: carga inmediata, sin lazy -->
<img src="/images/hero.jpg" alt="Hero" width="1200" height="600">
<!-- Galería: carga perezosa, fuera de viewport -->
<img src="/images/gallery1.jpg" alt="Galería 1" loading="lazy" width="600" height="400">
<img src="/images/gallery2.jpg" alt="Galería 2" loading="lazy" width="600" height="400">
Explicación:
La hero es crítica: debe pintarse YA.
La galería es secundaria: puede esperar.
Ambas tienen dimensiones definidas para evitar saltos.
Acto II — La verdad de lazy loading
Visión:
El lazy load no sustituye a la optimización de imágenes.
No reduce su peso, solo retrasa la descarga.
Es el “ya veremos” del navegador: prioriza lo inmediato, pospone lo opcional.
Modelo operativo:
Crítico → carga inmediata.
Secundario → loading="lazy".
Innecesario → delete.
Táctica 1 — nunca en elementos críticos
No uses lazy en logos, hero images, above the fold. Eso mata tu LCP.
Táctica 2 — siempre con dimensiones
width y height (o aspect-ratio) evitan CLS cuando la imagen entra en escena.
Táctica 3 — combina con formatos modernos
Lazy + WebP/AVIF es el combo ganador. Lazy + JPEG de 2 MB es una chapuza.
Acto III — El manifiesto
Principios no negociables:
loading="lazy"es para lo no crítico, no para todo.- Dimensiones definidas en cada imagen.
- Lazy loading no sustituye a optimizar formatos y compresión.
- No más de 3 imágenes críticas por página sin lazy.
Definición de hecho (DoD):
- LCP mejorado con hero optimizado y no lazy.
- CLS < 0.1 gracias a width/height.
- Imágenes fuera de viewport cargadas solo al acercarse.
Métricas de guardarraíl:
- LCP < 2.5s en móvil real.
- CLS estable (< 0.1).
- Reducir tráfico inicial de red en al menos 40%.
Plan de acción en 24h:
- Quita lazy de hero, logo y primeras imágenes.
- Aplica lazy al resto de imágenes no críticas.
- Añade dimensiones a todas las imágenes.
- Convierte imágenes grandes a WebP/AVIF.
- Prueba en móvil real y mide CLS.
Pablo Rodríguez: el crítico implacable
¿Qué opinas de usar loading="lazy" en la hero?
Es la cagada más común. La hero es lo primero que el usuario ve, y tú se la das con retraso.
Es como invitar a alguien a cenar y esconderle el plato principal.
Eso no es optimización, es sabotaje.
¿Por qué tanta gente cree que lazy = optimización?
Porque venden humo. Plugins que prometen “optimizar tu web con un clic” y lo único que hacen es meter lazy en todo.
El resultado: métricas arruinadas y un placebo de rendimiento.
Optimizar es reducir peso, comprimir, elegir el formato correcto. Lazy es la guinda, no la tarta.
¿Cuándo usarías lazy de forma estratégica?
En galerías, en imágenes de posts largos, en thumbnails que no pintan hasta scroll.
En todo lo que esté fuera de la vista inicial.
Ahí lazy brilla: ahorra ancho de banda, acelera el render y el usuario ni lo nota.
¿Qué pasa con los saltos visuales (CLS)?
Ese es el crimen de los chapuceros: meten lazy y no ponen width/height.
Entonces la web baila como si estuviera poseída cada vez que aparece una imagen.
El CLS alto es un insulto al usuario y a Google.
Lazy sin dimensiones es como poner parches con cinta aislante en un puente.
¿Y qué dirías a los que abusan de iframes con lazy?
Lazy en iframes puede salvarte (ej: YouTube embebido que no bloquea nada).
Pero si llenas tu página de 10 iframes lazy, lo que tienes es un Frankenstein lento.
Menos mierda, más criterio. Si no es crítico, no debería estar.
La sentencia
loading="lazy" no es magia.
Es una herramienta simple que, usada con cabeza, recorta peso inicial y da fluidez.
Ignorada, tu web es lenta.
Abusada, tu web es un circo de saltos y esperas.
Un profesional decide qué carga YA y qué carga después.
Un mediocre se lo pone a todo y reza.
Y en diseño web, rezar no es estrategia.