Google: Por qué la carga perezosa puede retrasar la pintura contenta más grande (LCP)

Google: Por qué la carga perezosa puede retrasar la pintura contenta más grande (LCP)


En un episodio reciente de la búsqueda de Google en el podcast Record, Martin Splitt y John Mueller discutieron cuando la carga perezosa ayuda y cuándo puede ralentizar páginas.

Splitt usó un ejemplo del mundo real en desarrolladores.google.com para ilustrar un patrón común: hacer que cada imagen sea perezosa de forma predeterminada puede retrasar la pintura contenta más grande (LCP) si incluye imágenes superiores a las veces.

Split dijo:

«El sistema de administración de contenido que estamos utilizando para desarrolladores.google.com … predeterminan todas las imágenes a la carga perezosa, lo cual no es excelente».

Splitt usó el ejemplo para explicar por qué las imágenes de héroes de carga perezosa son arriesgados: le dice al navegador que espere en el elemento más visible, que puede retrasar LCP y causar cambios de diseño si las dimensiones no están configuradas.

Split dijo:

«Si está utilizando la carga perezosa en una imagen que es inmediatamente visible, lo más probable es que tenga un impacto en su pintura contenta más grande. Es casi garantizado».

Cómo los retrasos de carga perezosa LCP

LCP mide en el momento en que se pinta el texto o imagen más grande en la ventana de la ventana inicial.

Normalmente, el escáner precargado del navegador encuentra esa imagen de héroe temprano y la obtiene con alta prioridad para que pueda pintar rápido.

Cuando agregas loading="lazy" A ese mismo héroe, cambias la programación del navegador:

  • La imagen se trata como menor prioridad, por lo que otros recursos comienzan primero.
  • El navegador espera hasta que el diseño y otros trabajos progresen antes de solicitar la imagen del héroe.
  • El héroe luego compite por el ancho de banda después de los guiones, los estilos y otros activos ya lo han hecho en cola.

Ese retraso cambia el tiempo de pintura del elemento más grande más adelante, lo que aumenta su LCP.

En redes lentas o dispositivos limitados por CPU, el efecto es más notable. Si faltan ancho y altura, la imagen tardía también puede empujar el diseño y sentir «discordante».

Riesgo de SEO con algunas bibliotecas

Los navegadores ahora admiten un incorporado loading Atributo para imágenes e iframes, que elimina la necesidad de JavaScript pesado en escenarios estándar. WordPress adoptó la carga perezosa nativa de forma predeterminada, lo que ayudó a extenderse.

Split dijo:

«Los navegadores obtuvieron un atributo nativo para imágenes e iframes, el atributo de carga … lo que hace que el navegador se encargue de la carga perezosa para usted».

Las bibliotecas de carga perezosa más antiguas o personalizadas pueden ocultar URL de imagen en atributos no estándar. Si la URL real nunca aterriza en src o srcset En el HTML Google Renders, las imágenes pueden no ser recogidas para la indexación.

Split dijo:

«Hemos visto múltiples bibliotecas de carga perezosa … que usan algún tipo de atributo de fuente de datos en lugar del atributo de origen … si no está en el atributo de origen, no lo recogeremos si está en algún atributo personalizado».

Cómo verificar sus páginas

Use la inspección de URL de la consola de búsqueda para revisar el renderizado html y confirme que las imágenes anteriores y los módulos de carga perezosa se resuelven a los atributos estándar. Evite confiar en la captura de pantalla.

Splitt aconsejó:

«Si el HTML renderizado parece contiene todas las URL de imagen en el atributo de origen de una etiqueta de imagen … entonces estará bien».

Impacto de clasificación

Efectos de clasificación enmarcados como modestos. Core Web Vitals contribuye a la clasificación, pero lo llamó «un pequeño factor minucioso en la mayoría de los casos».

Lo que debes hacer a continuación

  • Mantenga el héroe y otras imágenes por encima de la reducción de ancho con ancho y altura establecidas.
  • Usar nativo loading="lazy" Para imágenes e iframes por debajo del plegado.
  • Si confía en una biblioteca para vistas previas, videos o secciones dinámicas, asegúrese de que el marcado final exponga URL reales en atributos estándar y confirme en HTML renderizado.

Mirando hacia el futuro

La carga perezosa es útil cuando se aplica selectivamente. Trátelo como una opción para el contenido no crítico.

Verifique su implementación con HTML renderizado y observe cómo su LCP tenden con el tiempo.


Imagen destacada: captura de pantalla de youtube.com/googlesearchcentral, agosto de 2025.

Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *