Comprobador de carga diferida
La imagen justa, en el momento justo
Este comprobador de carga diferida lee cada imagen y cada marco de una página en orden y juzga cuándo carga cada uno. Detecta imágenes de más abajo que cargan demasiado pronto, imágenes principales que esperan demasiado e imágenes sin espacio reservado.
- GratisPrecio
- LCP, CLSMide
- NingunoRegistro
- NadaSe guarda
Comprobador de carga diferida
Qué imágenes esperan al desplazamiento, cuáles cargan demasiado pronto y cuáles retrasan el mayor pintado
- Imágenes y marcos
- 0
- Esperan al desplazamiento
- 0
- Cargan de inmediato
- 0
- Por mejorar
- 0
- Ya correctas
- 0
| # | Elemento | Carga | Veredicto | Qué hacer |
|---|---|---|---|---|
| Pega una dirección arriba y el orden de carga aparecerá aquí. | ||||
La posición se lee del orden del código, porque una página obtenida en un servidor nunca se maqueta. Las primeras imágenes se tratan como las que un visitante ve primero, algo cierto en casi todos los diseños y que conviene revisar a ojo en el tuyo.
Listo. Pega cualquier dirección pública y este servidor lee sus imágenes una vez.
La carga diferida tiene dos caras
La carga diferida le dice al navegador que descargue una imagen solo cuando está a punto de entrar en pantalla.
Usada en imágenes de más abajo, ahorra datos y hace que la parte superior llegue antes. Sin embargo, usada en la primera imagen, hace justo lo contrario.
La primera imagen grande suele ser lo que Core Web Vitals miden como Largest Contentful Paint. Si espera al desplazamiento, toda la página puntúa como lenta.
Así que la respuesta correcta depende de dónde está cada imagen y del momento en que se necesita. Esa es la pregunta que este comprobador le hace a cada una.
Qué imágenes deben esperar
Todo lo que un visitante tiene que desplazarse para ver. Por ejemplo, galerías, imágenes al fondo de un artículo, logotipos del pie y vídeos incrustados.
Los marcos merecen atención especial. Un vídeo o un mapa incrustado carga una segunda página entera, así que loading="lazy" en un iframe suele ahorrar más que en cualquier imagen.
Qué imágenes no deben esperar
La imagen principal, la foto de producto de arriba y el logotipo de la cabecera deben cargar de inmediato.
De hecho, la imagen más grande de arriba puede ir más allá. fetchpriority="high" le dice al navegador que la descargue antes que otras, lo que a menudo mejora bastante el Largest Contentful Paint.
Pedir prioridad alta y carga diferida en la misma imagen es una contradicción, y por eso el comprobador lo marca.
Por qué width y height importan aquí
Una imagen sin width ni height no tiene espacio reservado. Cuando por fin llega, todo lo de abajo salta, y Core Web Vitals lo cuentan como desplazamiento del diseño.
Las imágenes diferidas lo empeoran, porque llegan mientras el lector ya se desplaza. En consecuencia, el comprobador trata la falta de dimensiones como un fallo en cada imagen.
Pon en los atributos las proporciones reales de la imagen. El CSS responsive aún puede redimensionarla, ya que el navegador solo necesita la proporción.
Carga diferida nativa o por script
Los plugins antiguos esconden la dirección real en data-src y la cambian con un script. Eso funciona para los visitantes, pero los rastreadores y quien no tiene JavaScript solo ven un marcador.
El atributo loading="lazy" no necesita ningún script y lo admiten todos los navegadores actuales. Por tanto, el comprobador lo recomienda donde encuentre el patrón antiguo.
Cómo se juzga la posición
Una página leída en un servidor nunca se maqueta, así que el comprobador usa el orden del código. Las tres primeras imágenes se tratan como la primera pantalla, algo cierto en casi todos los diseños, aunque conviene echar un vistazo al tuyo.
En esta página
- La herramienta
- La carga diferida tiene dos caras
- Cómo usar el comprobador de carga diferida
- Qué hace diferente a este comprobador de carga diferida
- Pautas para aplicar bien la carga diferida
- Seis errores de carga diferida que ralentizan las páginas
- Dudas habituales sobre la carga diferida
- Herramientas para imágenes más rápidas
Sigue leyendo
Cómo usar el comprobador de carga diferida
Una dirección entra; salen todas las imágenes y marcos, en el orden en que la página los lista.
- 1
Pon la URL que quieres revisar
Usa la página que más te importe, normalmente la portada o una landing principal.
- 2
Fíjate en las tres filas de arriba
Son las imágenes que un visitante ve primero. Por tanto, ninguna debería esperar al desplazamiento.
- 3
Luego lee más abajo
Por debajo de la primera pantalla, cada imagen y cada marco deberían llevar loading="lazy".
- 4
Corrige los tamaños al final
Añade width y height donde falten y luego repite la revisión.
Qué hace diferente a este comprobador de carga diferida
Contar loading="lazy" es fácil. En cambio, saber dónde ayuda y dónde perjudica es la parte útil.
Primero la posición
Cada imagen se juzga por dónde está, así que una imagen principal diferida es un fallo y no un aprobado.
El mayor pintado, protegido
Las imágenes de arriba que esperan, y la prioridad alta mezclada con carga diferida, se marcan como lo más urgente.
Desplazamiento del diseño revisado
La falta de width y height se detecta en cada imagen, ya que las imágenes diferidas empeoran el salto.
Cargadores por script detectados
Se nombran los marcadores data-src que los rastreadores nunca ven, junto con el atributo nativo que usar.
También los marcos
Los vídeos y mapas incrustados se revisan junto a las imágenes, porque a menudo son lo más pesado de la página.
Exporta con un clic
Copia el informe o descárgalo en CSV para quien construye la página.
Pautas para aplicar bien la carga diferida
Ocho hábitos que convierten la carga diferida en una ventaja y no en una penalización.
- Nunca difieras la imagen principal. La primera imagen grande es lo que mide Largest Contentful Paint, así que debe empezar a descargarse de inmediato.
- Dale prioridad alta a la imagen principal. fetchpriority="high" en esa única imagen la pone al principio de la cola.
- Difiere todo lo que está bajo la primera pantalla. Las imágenes y marcos a los que hay que desplazarse deberían llevar loading="lazy".
- Sin width y height, la página salta al cargar la imagen. Reservan el espacio, así nada salta cuando llega la imagen.
- Prefiere el atributo nativo. loading="lazy" no necesita script, funciona en todos los navegadores actuales y los rastreadores ven la dirección real.
- Difiere primero los incrustados. Un marco de vídeo o de mapa puede pesar más que todas las imágenes de la página juntas.
- Vigila los valores por defecto del tema. Muchos temas añaden loading="lazy" a todas las imágenes, incluida la primera. Por eso conviene quitarlo en la principal.
- Prueba en un móvil. La primera pantalla de un móvil muestra menos imágenes que la de un ordenador, así que comprueba cuáles aparecen realmente primero.
Seis errores de carga diferida que ralentizan las páginas
Cada uno parece una optimización y, en cambio, cuesta velocidad sin avisar.
Poner loading=lazy hasta en la imagen principal
Incluida la primera, lo que retrasa el mayor pintado en cada visita.
Prioridad alta en una imagen diferida
Las dos instrucciones se anulan, y el navegador solo puede seguir una.
Sin width ni height
La página salta cada vez que llega una imagen, que es justo lo que mide el desplazamiento del diseño.
Carga diferida solo por script
Los rastreadores y los visitantes sin JavaScript ven un marcador vacío en lugar de la imagen.
Olvidar los incrustados
Un marco de vídeo al final de un artículo sigue cargando su reproductor de inmediato sin loading="lazy".
Un plugin de carga diferida encima del nativo
Si un plugin y un tema lo gestionan a la vez, las imágenes pueden esperar dos veces o no cargar nunca.
Dudas habituales sobre la carga diferida
¿Qué cambia al añadir loading=lazy a una imagen?
Retrasa la descarga de una imagen o un marco hasta que está a punto de entrar en pantalla, así la parte superior de la página carga antes.
¿La carga diferida ayuda al SEO?
De forma indirecta. Las páginas más rápidas puntúan mejor en Core Web Vitals. Sin embargo, aplicar carga diferida a la imagen equivocada empeora la puntuación.
¿Debo aplicar carga diferida a la primera imagen?
No. La primera imagen grande suele ser el elemento de Largest Contentful Paint, así que debe cargar de inmediato, idealmente con fetchpriority="high".
¿loading="lazy" funciona en todas partes?
Todos los navegadores actuales lo admiten en imágenes, y además los principales lo admiten también en iframes.
¿Google ve las imágenes con carga diferida?
Con loading="lazy", sí, porque la dirección real sigue en src. En cambio, con cargadores solo de script depende del script, y por eso el atributo nativo es más seguro.
¿Por qué el comprobador pide width y height?
Sin ellos el navegador no puede reservar espacio, así que la página se desplaza cuando llega la imagen. Aun así, el CSS puede redimensionarla.
¿Cómo sabe el comprobador qué hay en la primera pantalla?
Usa el orden del código, ya que una página leída en un servidor no tiene maquetación. Por eso las tres primeras imágenes se tratan como la primera pantalla.
¿Por qué no aparecen todas las imágenes en el informe?
Las imágenes que añade después un script, o las definidas como fondos CSS, no están en la página que envía el servidor, así que no aparecen.
¿Debo aplicar carga diferida a los iframes?
Sí, siempre que estén por debajo de la primera pantalla. Un marco de vídeo o de mapa suele ser lo más pesado de la página.
¿Se guarda la página que reviso?
No. La dirección sirve para una sola lectura y luego desaparece, y no se guarda nada de ella.
Herramientas para imágenes más rápidas
El orden de carga es una parte de la velocidad de las imágenes. Estas cubren el resto.
Convierte imágenes pesadas a WebP o AVIF sin subirlas.
Abrir herramienta →Busca imágenes sin alt en una página
Un veredicto sobre el texto alternativo de cada imagen de una página.
Abrir herramienta →Compresión, caché y las ocho cabeceras de seguridad, con la corrección.
Abrir herramienta →
¿Listo para revisar tu orden de carga?
Pega una dirección y mira cuándo carga cada imagen. El comprobador de carga diferida es gratis, no necesita cuenta y no guarda ningún registro de la página.