Guías

LCP, abreviatura de Largest Contentful Paint, es una de las Core Web Vitals de Google, las metricas que Google usa para puntuar la experiencia real de la pagina. Mide el rendimiento de carga: el tiempo desde que la pagina empieza a cargar hasta que se renderiza el elemento de contenido mas grande visible en el viewport. Dicho de forma sencilla, es el momento en que tu contenido principal aparece de verdad en la pantalla.

El elemento que observa LCP es el que sea mas grande en el viewport inicial mientras la pagina carga. La mayoria de las veces se trata de la imagen hero, un bloque grande de texto, el fotograma de portada de un video o una imagen de fondo de gran tamano. Google mide cuando ese elemento concreto termina de pintarse, porque ese es el punto en el que la pagina se siente cargada para una persona real, en lugar de estar en blanco o dibujada a medias.

Los umbrales de Google son claros. Un LCP de 2,5 segundos o menos es Bueno, entre 2,5 y 4 segundos Necesita mejorar, y por encima de 4 segundos es Deficiente. Como el resto de las Core Web Vitals, LCP se evalua con field data en el percentil 75 de las cargas reales de pagina, de modo que refleja lo que la mayoria de tus visitantes experimenta de verdad, y no una unica ejecucion de laboratorio con una conexion rapida.

LCP importa porque se corresponde de cerca con la rapidez con la que una pagina se siente utilizable. Un LCP lento significa que los visitantes miran una pantalla vacia o incompleta mientras el contenido principal aparece con lentitud, lo que hace que la gente se marche. Ademas forma parte de las Core Web Vitals que alimentan las senales de experiencia de pagina de Google, asi que un LCP deficiente puede frenar tanto a los usuarios como a los rankings.

Ayuda ver LCP como cuatro partes apiladas una tras otra: time to first byte (lo rapido que responde el servidor), retraso en la carga del recurso (cuanto tarda el navegador siquiera en empezar a solicitar el elemento LCP), tiempo de carga del recurso (cuanto tarda ese elemento en descargarse) y retraso de renderizado del elemento (cuanto tarda en pintarse realmente). Un LCP lento casi siempre se debe a que una o dos de estas partes dominan, asi que arreglarlo empieza por encontrar cual de ellas es el problema.

El primer tramo, time to first byte, tiene que ver con tu servidor y la entrega. Un host lento o distante anade retraso antes de que nada pueda cargarse, de modo que un host rapido y bien ubicado, junto con un CDN que sirva el contenido desde cerca de tus visitantes, reducen esta parte de forma directa. Es la solucion menos vistosa pero a menudo la de mayor impacto, porque cada milisegundo aqui retrasa todo lo que viene despues.

El propio elemento LCP, normalmente una imagen, es la siguiente gran palanca. Sirvela en un formato moderno como WebP o AVIF, dimensionala correctamente para el diseno en vez de enviar un original enorme, e indica al navegador que es importante mediante preload o una fetch priority alta para que empiece a descargarse pronto. Un error muy comun es aplicar lazy-loading a la imagen hero: el lazy-loading es estupendo para las imagenes por debajo del pliegue, pero aplicarlo al elemento LCP retrasa justo aquello por lo que se te esta midiendo.

Los recursos que bloquean el renderizado son el ultimo culpable habitual. Los archivos grandes de CSS y JavaScript que bloquean hacen que el navegador espere antes de poder pintar nada, incluido tu elemento mas grande. Recortar el CSS sin usar, aplazar el JavaScript no critico e incluir en linea solo los estilos criticos permiten que el navegador llegue antes al pintado.

Para mejorar una puntuacion de LCP en la practica: midela con una herramienta de field data para ver el numero real del percentil 75, identifica cual de las cuatro partes es la mas grande y luego ataca esa parte - un host o CDN mas rapido para un servidor lento, optimizacion de imagenes y preload para un recurso lento, y menos codigo que bloquee el renderizado para un pintado lento. Vuelve a medir con datos reales, porque una puntuacion de laboratorio en una maquina rapida puede parecer correcta mientras los usuarios reales con conexiones mas lentas tienen dificultades.

En resumen: Largest Contentful Paint mide cuando tu contenido principal se vuelve visible, y Google lo quiere en 2,5 segundos o menos. Llega ahi sirviendo rapido desde un buen host y un CDN, optimizando y priorizando el elemento mas grande en lugar de aplicarle lazy-loading, y quitando de en medio el codigo que bloquea el renderizado. Haz eso y la pagina no solo puntua mejor - de verdad se siente mas rapida para quienes la usan.