Skip to content
Rankora
ES
Iniciar sesión
Todas las herramientasSEO técnicoSEO on-pageInvestigación de palabras claveSERP y posicionesBacklinksSchema y JSON-LDSitemaps y robots.txtRendimientoSEO internacionalGEO y búsqueda IAGoogle Search ConsoleASO / App StorePrecios
Gratis · en tu navegador

Verificador de lazy loading

Comprueba que la carga diferida se usa donde toca: bajo el pliegue, nunca en la imagen principal y con los atributos correctos.

Privacidad y coste

Esta herramienta funciona en tu navegador. Lo que escribes o pegas no se envía a nuestros servidores y usarla es gratis.

Cómo funciona

  1. Pega el HTML de la página; los elementos <img> e <iframe> se leen en tu navegador, ignorando <noscript>.
  2. La herramienta estima la imagen LCP (la primera imagen no diminuta) y avisa si tiene loading="lazy", así como de las imágenes lazy muy arriba en la página.
  3. También revisa los valores de loading y fetchpriority, imágenes lazy sin width/height, patrones de lazy loading con JavaScript e iframes sin loading="lazy".
  4. Obtienes una tabla imagen por imagen que puedes exportar a CSV.

Ejemplo

Seis imágenes y un iframe de YouTube: la primera imagen (hero.jpg, 1200×600) lleva loading="lazy" y se marca como riesgo de LCP; 3 imágenes son lazy y 3 no tienen atributo; dos imágenes lejanas sin atributo podrían ser lazy; la última es lazy sin width/height; el iframe de YouTube no es lazy. Resultado: 6 imágenes, 3 lazy, 3 sin loading, 0 de 1 iframes en diferido.

Qué significa el resultado

La carga diferida nativa ahorra ancho de banda en lo que queda fuera de pantalla, pero en la imagen principal visible al abrir retrasa el Largest Contentful Paint. La herramienta adivina esa imagen solo con el HTML; es una estimación, porque no conoce tu CSS ni el tamaño de pantalla. Confírmalo con PageSpeed Insights o Chrome DevTools.

Problemas habituales que ayuda a resolver

  • loading="lazy" en la imagen de la parte superior, que retrasa el pintado del elemento mayor.
  • Decenas de imágenes bajo el pliegue cargadas de inmediato.
  • Imágenes lazy sin width/height que desplazan el diseño al llegar.
  • Iframes de YouTube o de mapas cargados al instante, muy pesados para lo que aportan.

Preguntas frecuentes

¿Todas las imágenes deben ser lazy?

No. Resérvalo para las imágenes bajo el pliegue. La imagen principal visible al cargar debe cargarse de inmediato, idealmente con fetchpriority="high".

¿Qué hace fetchpriority="high"?

Indica al navegador que una imagen es prioritaria para pedirla antes. Funciona mejor si es escasa: una o dos imágenes.

¿La carga diferida nativa funciona en iframes?

Sí, loading="lazy" también se aplica a los iframes en los navegadores actuales. Ayuda con vídeos y mapas incrustados más abajo.

¿Y si mi web ya usa un script de lazy loading?

La herramienta lo señala (data-src, clase lazyload). El loading="lazy" nativo evita depender de JavaScript y sigue funcionando si el script falla.

Herramientas relacionadas