Qué es el Largest Contentful Paint (LCP) y cómo afecta al SEO
El Largest Contentful Paint (LCP), junto con el Cumulative Layout Shift y el First Input Delay, forman los Google Core Web Vitals, unas métricas de calidad de navegación y de experiencia de usuario que, desde hace un tiempo, son el nuevo factor de posicionamiento SEO de Google.
El Largest Contentful Paint es una de las tres métricas que analizan la usabilidad y la experiencia de usuario en un sitio web como parte de los Google Core Web Vitals.
LCP es un métrica que se encarga de medir cuánto tiempo tarda el contenido principal de una página web en descargarse y estar totalmente listo para que el usuario pueda interactuar con él. En este caso, se mide la imagen o bloque de texto más grande que aparezca dentro de la ventana gráfica del usuario, cualquier elemento más allá de este marco no cuenta.
Los elementos que se miden son las imágenes, imágenes de banners, miniaturas de vídeo, imágenes de fondo y elementos de texto como bloques o secciones con etiquetas de párrafo «<p>».
Se trata de una métrica importante para medir la experiencia de usuario, ya que permite medir lo que tarda una página web en ser totalmente funcional para un usuario. Por otra parte, de las tres métricas que conforman los Core Web Vitals, LCP es también la más sencilla de medir y de optimizar.
Esto se debe a que los elementos que causan la puntuación de LCP suelen estar contenidos en bloques utilizando las etiquetas HTML «main», «p», «div» o «section», por lo que son más sencillos de gestionar. Al mismo tiempo, es sencilla de comprender y medir, ya que basta con observar la página web y determinar cuál es el texto o imagen más grande, y optimizarlo eliminando cualquier elemento que dificulte la carga o haciéndolo más pequeño.
¿Cómo solucionar problemas con el LCP?
Para solucionar un problema con una imagen grande que tarda en cargar, lo más indicado es subir las imágenes siempre en el tamaño adecuado. Muchos profesionales cargan la imagen a tamaño completo y luego utilizan etiquetas HTML o CSS para ajustar el tamaño. Esto causa que, al principio, la imagen se cargue en todo su tamaño (causando problemas de CLS) o que tarde más en cargarse, ya que debe ajustarse al tamaño indicado.
Por otra parte, las imágenes que se cargan desde un CDN no cuentan para el LCP, por lo que no hay problemas si se carga una imagen grande desde un servidor externo.
Otro problema habitual que suele causar una mala puntuación de LCP son los servidores lentos. En este caso, se debe buscar mejorar el rendimiento del servidor, ya sea cambiando de compañía de hosting o instalando CDN. En algunos casos, la carga lenta del servidor puede deberse a problemas con ataques DDOS, por lo que es posible instalar plugins de defensa.
Otros problemas habituales que causan una mala puntuación LCP se solucionan optimizando el renderizado de los elementos de pantalla, utilizando las hojas de estilo (CSS) o aplicando soluciones de JavaScript que permitan el «precargado» de ciertos elementos grandes o pesados.
En otros casos, es posible agilizar la carga de los elementos eliminando todo el código CSS que no resulte imprescindible para la correcta carga inicial de la página web.
