Acerca de Largest Contentful Paint
¿Qué es Largest Contentful Paint?
Largest Contentful Paint mide cuánto tarda en terminar de renderizarse el elemento visible más grande, normalmente una imagen principal, la miniatura de un vídeo o un bloque de texto de titular. Es lo más cerca que puede estar un único número de responder a «¿cuándo apareció la página?».
Ignora deliberadamente todo lo que está por debajo del pliegue y todo lo que es invisible. Una página puede seguir cargando scripts y fuentes mucho después de su LCP y, en lo que respecta a esta métrica, no pasa nada, porque el visitante ya tiene algo que leer.
Eso es lo que lo diferencia del tiempo de carga total. El tiempo de carga describe el momento en que el navegador termina su trabajo; el LCP describe el momento en que la página se vuelve útil, es decir, el momento que experimenta realmente el visitante.
¿Qué se considera un buen LCP?
Google considera que 2,5 segundos o menos es un buen resultado, que entre 2,5 y 4 segundos requiere mejoras y que cualquier valor superior a 4 segundos es deficiente. El umbral se aplica al percentil 75 de las cargas de página reales, por lo que debe cumplirse para tres de cada cuatro visitantes, no como promedio.
Ese percentil importa más de lo que parece a primera vista. Una media puede verse fácilmente favorecida por visitas rápidas en conexiones rápidas, mientras que el percentil 75 mantiene en el punto de mira al cuarto más lento de tu audiencia, que normalmente corresponde a los usuarios móviles.
Por tanto, una página puede fallar en LCP y, aun así, parecer perfectamente rápida en el equipo en el que se creó. Esa diferencia es lo habitual, no la excepción.
Qué suele provocar un LCP lento
El elemento en sí rara vez es el problema. Lo que lo retrasa casi siempre es algo que ocurre antes de que aparezca, y normalmente hay cuatro culpables:
- Una respuesta lenta del servidor, que retrasa todo lo demás hasta que se renderiza el primer byte.
- CSS y JavaScript que bloquean el renderizado en la sección ``, y que el navegador debe terminar de procesar antes de mostrar el contenido.
- Que la imagen principal sea demasiado grande, no esté optimizada o se cargue de forma diferida cuando no debería.
- Que la imagen se detecte tarde porque se establece mediante CSS o se inserta con un script, en lugar de estar presente en el HTML.
Ese último punto es el que más suele pasar desapercibido. Un navegador solo puede empezar a descargar lo que puede ver en el marcado, por lo que una imagen que el HTML nunca menciona no puede empezar a cargarse hasta que se haya descargado y analizado la hoja de estilos o el script que la menciona.
Cómo mejorarlo
- Incluye la imagen principal en el HTML como una etiqueta img para que el navegador la encuentre de inmediato.
- No apliques nunca la carga diferida al elemento LCP; la carga diferida es para el contenido que queda por debajo del área visible.
- Sírvela en un formato moderno y con el tamaño al que realmente se muestra.
- Precárgala si de verdad es el elemento más importante de la página.
- Mueve el CSS y JavaScript no críticos fuera de la ruta de renderizado.
- Reduce el tiempo de respuesta del servidor, ya que cada milisegundo se consume antes de que empiece cualquier otra cosa.
Qué comprueba esta herramienta
La prueba de LCP lee los datos de campo de Google para la página —mediciones recopiladas de visitantes reales en Chrome— y muestra en qué posición se encuentra con respecto a los umbrales anteriores.
Si no se muestra ningún resultado, la página no recibe suficiente tráfico para que Google pueda informar sobre ella, algo habitual en páginas nuevas o con poco tráfico. Esto no indica un fallo; lo sensato es corregir las causas evidentes en lugar de esperar a que aparezca una puntuación.
Qué hacer a continuación