La incorporación de los Core Web Vitals en el algoritmo de Google da buena cuenta de la importancia que el motor de búsqueda otorga a la experiencia del usuario en la página. Este paquete de indicadores está compuesto por tres métricas: FID (First Input Delay), CLS (Cumulative Layout Shift) y LCP (Largest Contentful Paint). Hoy nos detendremos en conocer qué es el LCP y cómo optimizarlo para mejorar el posicionamiento web.
Qué es el LCP y por qué es importante
El LCP (Largest Contentful Paint) mide la velocidad de despliegue del contenido más extenso de una página web. Es decir, marca el tiempo que tarda en renderizar la imagen o el bloque de texto más grande con relación al momento en que comenzó a cargarse la página.
La principal ventaja del LCP es que gracias a esa correlación entre el despliegue inicial de la página y la velocidad de carga del elemento de mayor tamaño se consigue una evaluación de la experiencia del usuario en la página más precisa que la que ofrecen las métricas utilizadas anteriormente.
Elementos del LCP
La incorporación del LCP como factor de posicionamiento responde a la necesidad de simplificar métricas más complejas como el FMP (First Meaningful Paint) o el SI (Speed Index). Por ello, los elementos considerados para el LCP son intencionalmente limitados. Así, los recursos que recoge la API de LCP son los siguientes:
- Elementos de imagen
- Elementos de imagen dentro de un elemento
- Elementos de vídeo
- Elementos con una imagen de fondo
- Elementos en bloque que contienen nodos de texto u otros elementos en línea de texto
Reporte del LCP
Para comprender este proceso, es fundamental tener en cuenta que la carga en etapas que realizan frecuentemente las webs puede hacer que el elemento más grande cambie durante la navegación del usuario.
Si pensamos que un elemento solo se considera como el de mayor tamaño cuando se muestra en la pantalla de visualización del usuario, el reporte del LCP debe adaptarse a los cambios que se produzcan.
Así, el navegador envía una entrada de rendimiento (Performance Entry) en el momento que se despliega el primer marco y repetirá esta operación con cada cambio en el elemento de mayor tamaño. No obstante, la medición del despliegue se interrumpe cuando se produce la primera interacción del usuario.
Cómo optimizar el LCP para mejorar la experiencia de usuario
Una vez identificado qué es el LCP y su funcionamiento, es el momento de profundizar en las distintas estrategias de optimización que se pueden poner en marcha.
Medición del LCP
El primer paso para mejorar el LCP es determinar cuáles son sus valores óptimos. Para ello, Google emplea la siguiente escala:
Un buen tiempo de carga del LCP es inferior a 2,5 segundos durante al menos el 75 % de las sesiones en mobile y desktop. Para cuantificar ese tiempo se utilizan las siguientes herramientas:
- Page Experience de Search Console: los resultados recogidos en este informe se extraen de las interacciones de los usuarios con la página, así que dependen de las características de sus dispositivos.
- Chrome DevTools: permite configurar una emulación de dispositivos móviles de nivel medio o bajo que recrea la experiencia de los usuarios en la página.
- Performance Observer API: desglosa los distintos elementos del LCP para obtener una visión detallada del rendimiento de cada uno de ellos.
- Extensión Web Vitals: analiza de manera simple y visual los indicadores de los Core Web Vitals mediante una escala de rendimiento basada en los colores de un semáforo.
Acciones para la mejora del LCP
A continuación identificamos los principales problemas que derivan en un LCP lento y las soluciones que plantea la guía para la optimización de LCP de WebDev.
- Tiempos de respuesta del servidor demasiado lentos: el tiempo que tarda el navegador en recibir la información del servidor tiene una incidencia directa en el LCP de la página. Para medir los tiempos de respuesta del servidor, es recomendable utilizar el parámetro TTFB (Time to first Byte).
- Bloqueos de renderización en JavaScript y CSS: el despliegue de contenidos depende de la lectura del HTML. Si el analizador de contenidos encuentra ciertos elementos en los que necesita detenerse, ralentizará el LCP. Minimizar y simplificar el JavaScript y el CSS de la página es la mejor estrategia en este sentido.
- Tiempo de carga de recursos demasiado lento: la optimización de los elementos del LCP es fundamental para conseguir una velocidad de renderizado óptima. Unas buenas prácticas pasan por comprimir los elementos y precargar los recursos más importantes.
- La representación del lado del cliente en JavaScript: este tipo de renderizado puede tener un impacto negativo en las métricas de LCP ya que no permite que se visualicen los elementos hasta que todo el JavaScript se haya descargado e impide la interacción de los usuarios. Cambiando la representación al lado del servidor se soluciona este problema.
Si bien los Core Web Vitals son un indicador secundario para el posicionamiento SEO, su incorporación abre un nuevo camino en el que la experiencia de usuario ocupa un lugar destacado. Por tanto, conocer qué es el LCP, el CLS y el FID, así como su optimización, supone una ventaja competitiva. En Labelium podemos ayudarte a poner en marcha una estrategia de crecimiento y aceleración digital integral que impulse tu negocio desde todos los ángulos posibles. ¡Habla con nosotros!
