Pintura de Mayor Contenido (Largest Contentful Paint o LCP)

Largest Contentful Paint mide el tiempo que transcurre desde que una página comienza a cargarse hasta que el elemento de contenido más grande visible en la ventana gráfica termina de renderizarse. Es una de las métricas principales de Google Web Vitals y sirve como indicador de la velocidad de carga percibida, ya que una página se siente cargada cuando aparece su contenido principal, en lugar de cuando todos los recursos han terminado de descargarse.

El elemento que se mide suele ser una imagen principal, un póster de vídeo, una imagen de fondo aplicada a un bloque grande o un bloque de texto extenso. El elemento que se considera válido puede variar durante la carga a medida que se renderiza el contenido, y el valor final que se muestra corresponde al elemento de mayor tamaño en el momento en que el usuario interactúa por primera vez o cuando la página termina de cargarse. El umbral publicado por Google considera que 2.5 segundos o menos es un buen tiempo de carga, medido en el percentil 75 de las experiencias reales de los usuarios, lo que significa que el objetivo no es el visitante promedio, sino el cuarto de ellos que carga más lentamente.

Las causas de las malas puntuaciones se agrupan en unas pocas categorías recurrentes. La lenta respuesta del servidor retrasa todo lo demás, por lo que un tiempo de respuesta inicial elevado limita el resultado que se puede obtener. El CSS y JavaScript que bloquean la renderización en la cabecera del documento impiden que esta comience hasta que se hayan descargado y procesado. Las imágenes grandes y no optimizadas tardan más en transferirse y decodificarse, especialmente en conexiones móviles. Los recursos detectados tardíamente, como las imágenes referenciadas desde CSS o inyectadas por JavaScript, comienzan a descargarse después de que el navegador podría haber empezado. La renderización del lado del cliente agrava todos estos problemas, ya que el contenido no se puede mostrar hasta que se haya descargado y ejecutado un paquete.

Las soluciones se derivan directamente y, en su mayoría, implican un trabajo de ingeniería poco atractivo. Servir imágenes con el tamaño adecuado en formatos modernos, con dimensiones explícitas e indicaciones de prioridad para el elemento que probablemente sea el más grande, resuelve la causa más común. Precargar la imagen principal y las fuentes críticas permite que el navegador comience antes. Incluir el CSS crítico en línea y diferir el resto elimina la dependencia que bloquea la renderización. Mejorar el tiempo de respuesta del servidor mediante el almacenamiento en caché y una red de distribución de contenido aumenta el rendimiento para todo lo demás. La renderización del lado del servidor o la generación estática para páginas con mucho contenido evita por completo la espera de JavaScript.

La medición requiere distinguir entre datos de campo y de laboratorio, ya que responden a preguntas diferentes. Los datos de campo de usuarios reales reflejan las condiciones reales de los dispositivos y la red, y son los que utilizan los sistemas de clasificación de búsqueda, pero se agregan durante un período y no explican las causas individuales. Las herramientas de laboratorio producen diagnósticos reproducibles en condiciones controladas, lo que las hace útiles para la depuración, pero sus resultados pueden diferir sustancialmente de la experiencia de los usuarios reales. Ambos son necesarios: los datos de campo para saber si existe un problema y las herramientas de laboratorio para averiguar la causa.

Una advertencia práctica es que la métrica puede mejorarse de maneras que no mejoran la experiencia, y los equipos presionados para alcanzar un umbral a veces hacen precisamente eso. Retrasar la imagen principal para que un bloque de texto se convierta en el elemento más grande, reducir el tamaño del elemento visual principal para que otro elemento cumpla con los requisitos, u ocultar contenido hasta después de la medición, todo esto modifica el valor sin que la página se sienta más rápida. Dado que la medida es un indicador indirecto de la carga percibida, y no del elemento en sí, las mejoras deben compararse con una secuencia de carga real, que muestra si el visitante ve contenido relevante antes o simplemente si la herramienta cumplió con los requisitos.

El argumento comercial para abordarlo no se basa principalmente en el posicionamiento en buscadores, donde la velocidad es una señal entre muchas. Se basa en la relación bien documentada entre el retraso de carga y el abandono, que es más pronunciada en conexiones móviles y en páginas con alta intención de compra donde los visitantes ya han decidido actuar. En la práctica, esto convierte la medida en un componente estándar de rendimiento web trabajo, y las mejoras en el mismo aparecen con frecuencia en la medición de la conversión tan claramente como cualquier cambio probado a través de un Servicio de CRO programa, por lo que es mejor planificar el trabajo de rendimiento y optimización de forma conjunta en lugar de en fases separadas.