Pintura con contenido más grande (LCP): guía técnica completa y estándar de optimización

Largest Contentful Paint (LCP) es una de las tres métricas Core Web Vitals de Google, establecida para medir la velocidad de carga de la página percibida.LCP rastrea el tiempo transcurrido desde que un usuario inicia la carga de una página web hasta que la imagen más grande, el fotograma del póster de video o el bloque de texto dentro de la ventana gráfica visible inicial se pinta completamente en la pantalla.

Debido a que los usuarios juzgan la velocidad de la página web en función de la rapidez con la que el contenido principal se vuelve visible y legible, LCP se considera ampliamente la métrica de rendimiento de carga más importante.En consecuencia, Google incorpora LCP en las señales de clasificación de la experiencia de su página oficial para la búsqueda orgánica.

Resumen de la primera respuesta

Largest Contentful Paint (LCP) es una métrica de Core Web Vital que mide la velocidad de carga de la página percibida midiendo el momento en que el bloque de texto visible más grande o el elemento de imagen en la ventana gráfica termina de renderizarse.Una puntuación LCP aprobatoria es de 2,5 segundos o menos para al menos el 75% de las visitas a la página en datos de campo de usuario real (CrUX).La latencia de LCP se compone de cuatro subpartes distintas: tiempo hasta el primer byte (TTFB), retraso de carga de recursos, duración de la carga de recursos y retraso de procesamiento de elementos.La optimización de LCP requiere precargar recursos principales, implementar almacenamiento en caché perimetral, comprimir imágenes a formatos WebP/AVIF y eliminar CSS y JavaScript que bloquean el procesamiento.

Escala de calificación de puntuación LCP y umbrales de Core Web Vitals

Para brindar una experiencia rápida y atractiva a los usuarios, las páginas web deben cumplir con los umbrales de Core Web Vitals establecidos por Google para Largest Contentful Paint:

Para lograr una calificación aprobatoria para la evaluación Core Web Vitals, un sitio web debe lograr una puntuación LCP en la categoría Bueno ($\le 2.5\text{ segundos}$) durante al menos el 75 % de las visitas a la página, evaluadas en cohortes de dispositivos móviles y de escritorio con datos de campo del mundo real.

¿Qué elementos DOM son elegibles para la evaluación LCP?

Según la especificación oficial de Pintura con contenido más grande del W3C, el navegador monitorea elementos DOM visibles específicos ubicados dentro de la ventana gráfica inicial:

• Elementos <img> estándar (incluidas las imágenes representadas dentro de etiquetas <picture> responsivas).
• <image> elementos incrustados dentro de un contenedor vectorial <svg>.
• Imágenes de carteles de vídeo (el atributo poster en un elemento <video>).
• Elementos con una imagen de fondo CSS cargada mediante la función url().
• Contenedores HTML a nivel de bloque que contienen nodos de texto o elementos secundarios de texto en línea (como encabezados <h1> a <h6>, párrafos <p> o bloques <div>).

Deconstruyendo LCP: las cuatro subpartes

Para diagnosticar y optimizar eficazmente las puntuaciones lentas de Largest Contentful Paint, los ingenieros de rendimiento dividen la latencia de LCP en cuatro subpartes distintas:

1. Tiempo hasta el primer byte (TTFB): El tiempo transcurrido desde que el usuario solicita la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML del servidor.Objetivo: $< 800\text {ms} $ ($40%$ del presupuesto de LCP).
2. Retraso en la carga de recursos: el retraso entre el momento en que el documento HTML termina de recibir bytes de respuesta y el momento en que el navegador descubre y comienza a buscar el recurso LCP (como una imagen principal).Objetivo: $< 200\text {ms} $ ($10%$ del presupuesto de LCP).
3. Duración de carga de recursos: la duración necesaria para que el navegador descargue la imagen LCP o el recurso de fuente a través de la red.Objetivo: $< 800\text {ms} $ ($40%$ del presupuesto de LCP).
4. Retraso de renderizado de elementos: el tiempo entre el momento en que el recurso LCP termina de descargarse y el momento en que el navegador completa los cálculos de diseño y pinta el elemento en la pantalla.Objetivo: $< 200\text {ms} $ ($10%$ del presupuesto de LCP).

Matemáticamente, la latencia total de LCP es la suma de estas cuatro subpartes:

$$\text {LCP} = \text {TTFB} + \text{Retraso de carga de recursos} + \text{Duración de carga de recursos} + \text{Retraso de procesamiento de elementos}$$

Técnicas probadas para optimizar LCP

1. Elimine el retraso en la carga de recursos: agregue <link rel="preload" as="image" href="..."> o fetchpriority="high" a la etiqueta de su imagen principal para que el navegador inicie la descarga de la imagen inmediatamente durante el análisis HTML.
2. Optimizar la respuesta del servidor (TTFB): implemente el almacenamiento en caché perimetral a través de CDN, optimice el rendimiento de las consultas de la base de datos y utilice la multiplexación push del servidor HTTP/2 o HTTP/3.
3. Comprima y modernice imágenes: proporcione imágenes destacadas utilizando formatos WebP o AVIF modernos con tamaños srcset responsivos adaptados a las dimensiones de la pantalla de dispositivos móviles y de escritorio.
4. Reduzca los recursos de bloqueo de renderizado: inserte CSS crítico en la etiqueta <head> y difiera JavaScript no crítico usando los atributos de script defer o async.
5. Optimizar la carga de fuentes web: use font-display: swap o font-display: optional en las reglas CSS @font-face para garantizar que los bloques de texto permanezcan visibles inmediatamente mientras las fuentes web terminan de descargarse a través de la red.

LCP frente a First Contentful Paint (FCP) frente a índice de velocidad

Si bien LCP, FCP y Speed ​​Index miden el rendimiento de carga, capturan diferentes aspectos de la progresión de carga de la página:

• Primera pintura con contenido (FCP): mide cuándo el primer elemento DOM (como un color de fondo, un control giratorio o un texto de encabezado) termina de mostrarse en la pantalla.
• Pintura con contenido más grande (LCP): mide cuándo el elemento de contenido visual principal (banner principal o bloque de párrafo principal) completa la representación.
• Índice de velocidad: Mide la rapidez con la que el contenido visual llena la ventana gráfica a lo largo del tiempo durante la grabación del progreso visual.

LCP recibe el peso más alto entre las métricas de carga en el algoritmo de puntuación Lighthouse de Google (actualmente el 25% de la puntuación de rendimiento total) porque se alinea más estrechamente con la percepción del usuario real sobre la finalización de la carga de la página.

Monitoreo continuo de LCP con SimpleOps

SimpleOps automatiza el seguimiento de Largest Contentful Paint mediante la captura de auditorías sintéticas del laboratorio Lighthouse y métricas del conjunto de datos de campo Chrome UX Report (CrUX) en un único panel de monitoreo unificado.SimpleOps envía alertas proactivas instantáneas cada vez que el LCP del percentil 75 de su sitio supera su presupuesto de rendimiento de 2,5 segundos, lo que permite a su equipo proteger las conversiones y las clasificaciones de búsqueda.