Encuentra las imágenes que bloquean el primer render

Los equipos de rendimiento y SEO lo usan cuando el primer render tarda y las imágenes fuera de pantalla pueden estar bloqueándolo.

Encuentra las imágenes que bloquean el primer render. El resultado queda listo para usar, sin cuenta ni transferencia del contenido.

Cómo usar

Pega el HTML de la página que quieres auditar.
Ejecuta la auditoría para encontrar las imágenes presentes en el primer renderizado.
Revisa las imágenes que no deberían cargarse de inmediato.
Añade carga diferida a las imágenes que están fuera de la vista inicial.

Ejemplo

Un especialista en SEO observa que una página de inicio tarda demasiado en mostrar su contenido principal. Pega el HTML, ejecuta la auditoría y detecta que las imágenes del pie de página se cargan demasiado pronto. Esas imágenes se cambian a carga diferida antes de volver a probar la página. También se asegura de que la imagen principal siga siendo prioritaria para no perjudicar la primera vista.

Entrada

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Límites y formatos

La auditoría lee el HTML que proporcionas, no una visita en vivo a la página.
Puede que no se detecten todas las imágenes inyectadas por JavaScript o cargadas mediante CSS.
La carga diferida no es adecuada para imágenes visibles en la primera pantalla.
Vuelve a comprobar el comportamiento en móvil después de cambiar el marcado.
El informe debe actualizarse después de cada cambio en el marcado.

Dónde se procesa

El HTML pegado se examina dentro de tu navegador. No se realiza ninguna solicitud externa y la herramienta no obtiene la página auditada. El informe permanece local hasta que salgas de la página.

Preguntas frecuentes

¿La herramienta visita mi sitio web?

No, no carga tu página desde una dirección web. Tú mismo copias el HTML en la entrada. Por lo tanto, la auditoría solo cubre el marcado que proporcionas y no ejecuta los scripts de la página.

¿Qué imágenes deberían tener carga diferida?

Céntrate en las imágenes situadas más abajo en la página que no se necesitan para la primera vista. Las imágenes de encabezado o la imagen principal del producto a menudo deben cargarse de inmediato. Comprueba el resultado en una pantalla real.

¿Por qué falta una imagen en el informe?

Puede que la añada JavaScript, que se use como fondo CSS o que la cargue un componente de terceros. La auditoría solo ve el HTML que pegas. Usa las herramientas de desarrollo del navegador para completar la visión.