Lazy loading: cargue solo lo que el visitante ve
El test #06 verifica si las imágenes y contenidos embebidos se cargan solo cuando el visitante llega a ellos al desplazarse. Una ganancia de rendimiento masiva, nativa en navegadores modernos.
- Sin lazy loading, el navegador descarga TODAS las imágenes de la página al cargar — incluso las invisibles debajo del pliegue.
- Orilyt mide la cobertura: ≥ 50 % de imágenes/iframes con loading="lazy" = puntuación 100, 0 % = puntuación 30.
- El atributo loading="lazy" es HTML nativo — no necesita plugin, una línea es suficiente.
Una página WordPress promedio contiene entre 10 y 40 imágenes. Sin lazy loading, el navegador las descarga todas al abrir la página — incluidas las del final, que el visitante quizás nunca vea.
El resultado: megabytes de datos transferidos para nada, un primer renderizado más lento y una experiencia móvil degradada. Es puro desperdicio.
El test #06 de Orilyt detecta este problema y mide la cobertura de lazy loading. Veamos cómo funciona y cómo convertir sus resultados en argumento de venta.
Por qué cargar imágenes invisibles es un problema
En un artículo de blog con 15 imágenes, el visitante solo ve 2 o 3 en la primera pantalla. Sin lazy loading, el navegador descarga las 15 en paralelo, consumiendo ancho de banda y retrasando el contenido visible.
El impacto es severo en móvil: en una conexión 4G, cada imagen no diferida añade cientos de milisegundos al tiempo de carga. Multiplique por 15 imágenes y obtendrá un sitio que tarda 5 a 10 segundos en cargar completamente.
Google lo sabe: el Largest Contentful Paint (LCP) y el peso de página son factores de clasificación. Un sitio sin lazy loading se penaliza doblemente — lentitud Y consumo excesivo de datos.
¿Cómo funciona el test #06?
Orilyt analiza el HTML de la página y cuenta dos cosas:
- El número total de imágenes (<img>) e iframes (<iframe>) en la página.
- El número de esos elementos que usan el atributo loading="lazy".
La relación entre ambos da la tasa de cobertura. La puntuación se calcula así:
Si no se detectan imágenes ni iframes, la puntuación es 50/100 (no medible — la página no tiene candidatos).
El informe detallado muestra el número exacto de imágenes, iframes y el porcentaje de cobertura. Sabe inmediatamente si el problema es crítico o menor.
loading="lazy": el lazy loading nativo del navegador
Desde 2020, todos los navegadores modernos soportan el atributo HTML loading="lazy". Sin JavaScript, sin plugin — una simple modificación de la etiqueta <img> es suficiente:
<img src="foto.jpg" alt="Foto">
<img src="foto.jpg" alt="Foto" loading="lazy">
El navegador solo descarga la imagen cuando el visitante se acerca a su posición en la página. Es transparente, sin impacto en el SEO (Google entiende loading="lazy"), y funciona con iframes también (videos de YouTube, Google Maps).
Atención: las imágenes visibles en la primera pantalla (above the fold) NO deben usar lazy loading. Deben cargarse inmediatamente para un buen LCP. WordPress 5.9+ agrega automáticamente loading="lazy" a las imágenes, excepto la primera.
¿Cómo usar este test en sus propuestas?
El lazy loading es un argumento poderoso: el cliente puede entender el problema en una frase ("su sitio descarga 40 imágenes al cargar cuando el visitante solo ve 3").
Así se estructura la recomendación con el método FIA:
- Hecho: "Su página contiene X imágenes, pero solo Y usan carga diferida. Las otras Z se descargan inmediatamente, incluso siendo invisibles."
- Impacto: "El navegador descarga N MB de datos innecesarios. El tiempo de carga móvil se duplica. Google penaliza las páginas lentas."
- Acción: "Agregar loading=\"lazy\" a todas las imágenes bajo el primer pliegue. Con WordPress, activar el lazy loading nativo o usar un plugin (WP Rocket, Perfmatters). Tiempo estimado: 20 minutos."
El informe de Orilyt muestra el conteo exacto de imágenes, la tasa de cobertura y una puntuación clara — perfecto para ilustrar el problema en una propuesta.
Integrar este test en su flujo de trabajo
El test #06 encaja naturalmente en un diagnóstico de rendimiento completo:
- Lance la auditoría Orilyt → la puntuación "Carga inteligente de imágenes" aparece en la sección Rendimiento.
- Si la puntuación es roja (30/100), abra los detalles: verá cuántas imágenes e iframes no tienen lazy loading.
- Después de la corrección, relance la auditoría y use la comparación antes/después para mostrar la reducción del peso de página al cliente.
Combinado con los tests peso de página (#28), imágenes modernas (#05) y dimensiones de imágenes (#20), el lazy loading forma parte de la estrategia completa de optimización de medios.
Conclusión
El lazy loading es una de las palancas de rendimiento más simples y menos conocidas. Un atributo HTML nativo, soportado por todos los navegadores, que puede reducir el peso inicial de la página entre un 60 y 80 %.
El test #06 de Orilyt le da un diagnóstico instantáneo: conteo de imágenes, cobertura de lazy loading, puntuación clara. Es un argumento concreto para cada propuesta de cliente.
Pruebe un sitio de cliente ahora — la relación entre imágenes totales e imágenes con lazy loading suele tener sorpresas.