LCP mide el tiempo hasta que carga el contenido principal. El contenido principal es el bloque de texto o la imagen más grande de la página. En la mayoría de las páginas, el LCP es la métrica crítica porque decide cuándo la página le resulta útil al usuario.
El usuario llega a la página. La página empieza a cargar. El navegador descarga el HTML. Descarga el CSS. Descarga el JavaScript. Se pinta el HTML. El CSS aplica los estilos. Se ejecuta el JavaScript. Aparece el contenido principal. Eso es el LCP.
Un LCP de un segundo es excelente. El usuario ve el contenido rápido. Un LCP de tres segundos es lento. El usuario espera. Un LCP de cinco segundos es muy lento. El usuario se va.
Qué cuenta como Largest Contentful Paint
El elemento más grande de la página en la primera pantalla. Suele ser una imagen o un titular. Ejemplo: una página de inicio con imagen principal. La imagen principal es el elemento más grande. El momento en que aparece es el LCP.
Ejemplo: un artículo de blog con titular. El titular es el elemento más grande. El momento en que aparece el titular es el LCP.
Ejemplo: una página de producto con la imagen del producto. La imagen del producto es el elemento más grande. El momento en que aparece es el LCP.
LCP se mide desde que el usuario hace clic en el enlace (inicio de la carga de la página) hasta que aparece el elemento más grande. Incluye el tiempo de descarga del HTML, el CSS y el JavaScript, la descarga de la imagen y el pintado de la página.
Cómo optimizar el LCP
Objetivo de optimización: LCP por debajo de dos coma cinco segundos.
Estrategia uno: optimizar el tiempo de respuesta del servidor (TTFB). Un servidor más rápido hace que el HTML llegue antes. Que llegue el HTML es requisito para pintar la página. Reduce el TTFB mejorando el servidor, usando una CDN y reduciendo las consultas a la base de datos.
Estrategia dos: reducir el tamaño del archivo CSS. Un CSS más pequeño se descarga más rápido. El CSS debe descargarse antes de pintar la página. Reduce el CSS quitando estilos sin usar, minificándolo y aplazando el CSS no crítico.
Estrategia tres: reducir el tamaño del archivo JavaScript. Un JavaScript grande retrasa la ejecución y el pintado. Reduce el JavaScript quitando código sin usar, dividiendo archivos grandes y aplazando el JavaScript no crítico.
Estrategia cuatro: optimizar las imágenes. Las imágenes suelen ser los elementos más grandes (LCP). Reduce el peso de las imágenes comprimiéndolas, usando formatos modernos (WebP) y reduciendo sus dimensiones.
Estrategia cinco: precargar los recursos críticos. Dile al navegador que descargue pronto la imagen o la fuente crítica. La imagen se descarga en paralelo con el HTML y el CSS. Reduce el LCP.
Ejemplo real: optimizar el LCP de un artículo de blog
LCP de partida: dos coma ocho segundos.
Análisis: la imagen principal del artículo es el elemento más grande. La imagen pesa dos megabytes. Tarda uno coma dos segundos en descargarse. La descarga de la imagen es el cuello de botella.
Optimización
Comprime la imagen: de dos megabytes a cero coma cinco megabytes. El tiempo de descarga pasa a ser cero coma tres segundos.
Conviértela a formato WebP: la reduces aún más, a cero coma tres megabytes. El tiempo de descarga pasa a ser cero coma uno segundos.
Precarga la imagen: dile al navegador que la descargue pronto. La imagen se descarga en paralelo con el HTML. Ahorra cero coma dos segundos.
Mueve el CSS crítico a la primera pantalla: reduce el tiempo hasta que la página se puede pintar. Ahorra cero coma tres segundos.
Nuevo LCP: uno coma siete segundos.
Dos coma ocho menos uno coma dos (descarga de la imagen) más cero coma uno (descarga de la imagen comprimida) es igual a uno coma siete segundos. Por debajo del objetivo de dos coma cinco.
LCP y distintos tipos de página
Página de inicio
La imagen principal suele ser el LCP. Optimiza comprimiendo la imagen, usando una CDN y precargando.
Artículo de blog
El titular o la primera imagen es el LCP. Optimiza reduciendo el retraso del CSS y el JavaScript y precargando las fuentes.
Página de producto
La imagen del producto es el LCP. Optimiza comprimiendo la imagen y usando imágenes adaptables para cada dispositivo.
Página de pago
El formulario o el botón es el LCP. Optimiza reduciendo el CSS y el JavaScript y precargando los recursos críticos.
Cada tipo de página tiene sus propias estrategias de optimización. Averigua cuál es tu elemento LCP. Optimiza ese elemento.
LCP en móvil y en escritorio
El LCP en móvil suele ser más lento que en escritorio. La red móvil es más lenta. Los dispositivos móviles tienen menos potencia de procesamiento.
LCP de partida en escritorio: uno coma cinco segundos. LCP de partida en móvil: tres segundos.
El móvil es el doble de lento. Los usuarios de móvil notan más la lentitud.
Optimiza primero el móvil. Céntrate en reducir el tamaño de las imágenes (el ancho de banda móvil es limitado). Reduce el JavaScript (los dispositivos móviles lo procesan más despacio). Usa formatos pensados para móvil.
Cómo medir la mejora del LCP
LCP de partida
Mide antes de optimizar.
Aplica la optimización
Nuevo LCP
Mide después de optimizar.
Mejora
LCP de partida menos nuevo LCP.
Ejemplo
LCP de partida: dos coma ocho segundos. Tras optimizar: uno coma siete segundos. La mejora es de uno coma uno segundos.
Calcula el impacto
Una mejora de uno coma uno segundos puede subir la tasa de conversión un uno por ciento (según el punto de partida y el sector). Con cincuenta mil visitantes al mes, son quinientas conversiones más con un valor de pedido de cien dólares. Cincuenta mil dólares al mes. Seiscientos mil dólares al año.
Compáralo con el coste de la optimización. Si el coste es de cincuenta mil dólares, se amortiza en un mes. Un ROI excelente.
Preguntas frecuentes
¿Cómo sabemos cuál es nuestro elemento LCP?
Usa las herramientas para desarrolladores de Google Chrome. Haz clic derecho en la página. Inspeccionar. Pestaña Rendimiento. Graba la carga de la página. Las herramientas muestran el elemento LCP. O consulta PageSpeed Insights. Lighthouse identifica los elementos LCP. Consulta también el informe de Core Web Vitals de Search Console. Muestra los elementos LCP de tus páginas. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Debemos optimizar el LCP en todas las páginas o solo en la de inicio?
Optimiza todas las páginas. Pero prioriza por tráfico. La página de inicio es importante, pero también lo son las páginas de producto (en una tienda online) o las de artículos (en una publicación). Mide el LCP en todas las páginas importantes. Prioriza la optimización según el volumen de tráfico.
¿Precargar siempre ayuda al LCP?
No siempre. Precargar consume ancho de banda. Si precargas un recurso poco importante, gastas ancho de banda que podría descargar uno importante. Precarga solo los recursos críticos (la imagen principal, la fuente crítica). No precargues recursos no críticos.
¿Cómo optimizamos el LCP cuando el contenido principal es dinámico (se carga desde una API)?
La espera de la llamada a la API se suma al LCP. Reduce el tiempo de respuesta de la API optimizando la base de datos, guardando respuestas en caché y usando una CDN. Muestra también una pantalla esqueleto o contenido provisional mientras carga la API. El contenido provisional aparece al instante. El usuario percibe la página como cargada. El contenido real se rellena después. El LCP percibido es más rápido que el real.
¿Debemos usar carga diferida (lazy loading) en el elemento LCP?
No. La carga diferida retrasa la imagen hasta que está a punto de entrar en pantalla. Si la imagen está en la primera pantalla (es el elemento LCP), la carga diferida la retrasa sin necesidad. Aplica carga diferida solo a las imágenes que quedan fuera de la primera pantalla. Carga el elemento LCP de inmediato.
¿En qué se diferencia el LCP del FCP (First Contentful Paint)?
FCP es cuando aparece cualquier contenido (puede ser un texto pequeño). LCP es cuando aparece el contenido principal (normalmente una imagen grande o un titular). El FCP llega antes que el LCP. El LCP es más importante para la experiencia del usuario. Mejora primero el LCP.