Barry Pollard, defensor de los desarrolladores de rendimiento web de Google Chrome, explicó cómo encontrar las causas reales de una puntuación baja de Contentful Paint y cómo solucionarlas.

Pintura con contenido más grande (LCP)

LCP es una métrica central de Web Vitals que mide cuánto tiempo tarda el elemento de contenido más grande en mostrarse en la ventana gráfica de los visitantes del sitio (la parte que un usuario ve en un navegador). Un elemento de contenido puede ser una imagen o un texto.

Para LCP, los elementos de contenido más grandes son elementos HTML a nivel de bloque que ocupan el mayor espacio horizontalmente, como el párrafo

, encabezados (H1 – H6) e imágenes (básicamente, la mayoría de los elementos HTML que ocupan una gran cantidad de contenido). del espacio horizontal).

1. Sepa qué datos está analizando

Barry Pollard escribió que un error común que cometen los editores y los SEO después de ver que PageSpeed ​​Insights (PSI) marca una página con una puntuación LCP baja es depurar el problema en la herramienta Lighthouse o mediante Chrome Dev Tools.

Pollard recomienda seguir con PSI porque ofrece múltiples sugerencias para comprender los problemas que causan un rendimiento deficiente de LCP.

Es importante comprender qué datos le proporciona PSI, en particular los datos derivados del Informe de experiencia del usuario de Chrome (CrUX), que provienen de puntuaciones de visitantes anónimos de Chrome. Hay dos tipos:

1. Datos a nivel de URL
2. Datos a nivel de origen

Las puntuaciones a nivel de URL son las de la página específica que se está depurando. Los datos a nivel de origen son puntuaciones agregadas de todo el sitio web.

PSI mostrará datos a nivel de URL si ha habido suficiente tráfico medido hacia una URL. De lo contrario, mostrará datos a nivel de origen (la puntuación agregada de todo el sitio).

2. Revise la puntuación TTFB

Barry recomienda echar un vistazo a la puntuación TTFB (tiempo hasta el primer byte) porque, en sus palabras, “TTFB es lo primero que le sucede a su página”.

Un byte es la unidad más pequeña de datos digitales para representar texto, números o multimedia. TTFB le indica cuánto tiempo le tomó a un servidor responder con el primer byte, lo que revela si el tiempo de respuesta del servidor es una razón para el bajo rendimiento de LCP.

Dice que centrar los esfuerzos en optimizar una página web nunca solucionará un problema que tiene su origen en una llaga TTFB deficiente.

Barry Pollard escribe:

“Un TTFB lento básicamente significa 1 de 2 cosas:

1) Se tarda demasiado en enviar una solicitud a su servidor
2) Su servidor tarda demasiado en responder

Pero puede ser complicado determinar cuál es (¡y por qué!) y hay algunas razones posibles para cada una de esas categorías”.

Barry continuó su descripción general de depuración de LCP con pruebas específicas que se describen a continuación.

3. Compare TTFB con la prueba de Lighthouse Lab

Pollard recomienda realizar pruebas con Lighthouse Lab Tests, específicamente la auditoría de “Tiempo de respuesta inicial del servidor”. El objetivo es comprobar si el problema del TTFB se puede repetir para eliminar la posibilidad de que los valores de PSI sean una casualidad.

Los resultados de laboratorio son sintéticos y no se basan en visitas reales de usuarios. Sintéticos significa que son simulados mediante un algoritmo basado en una visita provocada por una prueba Lighthouse.

Las pruebas sintéticas son útiles porque son repetibles y permiten al usuario aislar una causa específica de un problema.

Si la prueba de Lighthouse Lab no replica el problema, significa que el problema no es el servidor.

Él aconsejó:

“Una cosa clave aquí es comprobar si el TTFB lento es repetible. Así que desplácese hacia abajo y vea si la prueba de laboratorio de Lighthouse coincidió con este TTFB lento de usuario real cuando probó la página. Busque la auditoría “Tiempo de respuesta inicial del servidor”.

En este caso fue mucho más rápido. ¡Eso es interesante!”

4. Consejo de experto: cómo comprobar si CDN oculta un problema

Barry dio un excelente consejo sobre las redes de entrega de contenido (CDN), como Cloudflare. Una CDN mantendrá una copia de una página web en los centros de datos, lo que acelerará la entrega de las páginas web pero también enmascarará cualquier problema subyacente a nivel del servidor.

La CDN no guarda una copia en todos los centros de datos del mundo. Cuando un usuario solicita una página web, la CDN buscará esa página web del servidor y luego hará una copia en ese servidor más cercano a esos usuarios. Entonces, la primera recuperación siempre es más lenta, pero si el servidor es lento para empezar, esa primera recuperación será incluso más lenta que entregar la página web directamente desde el servidor.

Barry sugiere los siguientes trucos para sortear el caché de la CDN:

• Pruebe la página lenta agregando un parámetro de URL (como agregar “?XYZ” al final de la URL).
• Pruebe una página que no se solicita comúnmente.

También sugiere una herramienta que se puede utilizar para probar países específicos:

“También puedes verificar si hay países particularmente lentos, particularmente si no estás usando una CDN, con CrUX y el Treo de @alekseykulikov.bsky.social es una de las mejores herramientas para hacerlo.

Puede ejecutar una prueba gratuita aquí: treo.sh/sitespeed, desplazarse hacia abajo hasta el mapa y cambiar a TTFB.

Si determinados países tienen TTFB lentos, compruebe cuánto tráfico proviene de esos países. Por razones de privacidad, CrUX no le muestra los volúmenes de tráfico (a menos que tenga suficiente tráfico para mostrar), por lo que deberá consultar sus análisis para esto”.

En cuanto a las conexiones lentas desde áreas geográficas específicas, es útil comprender que el bajo rendimiento en ciertos países en desarrollo podría deberse a la popularidad de los dispositivos móviles de gama baja. Y vale la pena repetir que CrUX no revela de qué países provienen las puntuaciones bajas, lo que significa incorporar Analytics para ayudar a identificar países con tráfico lento.

5. Arreglar lo que se puede repetir

Barry finalizó su discusión advirtiendo que un problema sólo puede solucionarse una vez que se haya verificado que es repetible.

Él aconsejó:

“En cuanto a problemas con el servidor, ¿el servidor tiene poca potencia?

¿O el código es demasiado complejo/ineficiente?

¿O la base de datos necesita ajuste?

Para conexiones lentas desde algunos lugares, ¿necesita una CDN?

O investigar por qué hay tanto tráfico desde allí (¿campaña publicitaria?)

Si ninguno de ellos destaca, podría deberse a redirecciones, especialmente de anuncios. Pueden agregar ~0,5 segundos a TTFB, ¡por cada redireccionamiento!

Intente reducir las redirecciones tanto como sea posible:
– Utilice la URL final correcta para evitar la necesidad de redirigir a www o https.
– Evite múltiples servicios de acortamiento de URL “.

Conclusiones: cómo optimizar para obtener la pintura con mayor contenido

Barry Pollard de Google Chrome ofreció cinco consejos importantes.

1. Los datos de PageSpeed ​​Insights (PSI) pueden ofrecer pistas para depurar problemas de LCP, además de otros matices discutidos en este artículo que ayudan a entender los datos.

2. Los datos PSI TTFB (tiempo hasta el primer byte) pueden indicar por qué una página tiene puntuaciones LCP bajas.

3. Las pruebas de laboratorio de Lighthouse son útiles para la depuración porque los resultados son repetibles. Los resultados repetibles son clave para identificar con precisión el origen de los problemas de LCP, lo que luego permitirá aplicar las soluciones adecuadas.

4. Las CDN pueden enmascarar la verdadera causa de los problemas de LCP. Utilice el truco de Barry descrito anteriormente para omitir la CDN y obtener una puntuación de laboratorio real que pueda resultar útil para la depuración.

5. Barry enumeró seis causas potenciales de puntuaciones bajas de LCP:

• Rendimiento del servidor
• redirecciones
• código
• base de datos
• Conexiones lentas específicas debido a la ubicación geográfica
• Conexiones lentas desde áreas específicas que se deben a motivos específicos, como campañas publicitarias.

Lea la publicación de Barry en Bluesky:

Algunas personas se comunicaron conmigo recientemente para pedirme ayuda con problemas de LCP.

Imagen destacada de Shutterstock/BestForBest