Esta es una de las métricas web centrales (Core Web Vitals) que Chrome Experiencia de Página tiene en cuenta a la hora de determinar la calidad de la experiencia de los usuarios que visitan tu sitio.
Hablamos de estas métricas muy brevemente en nuestra introducción y, como prometimos, hablaremos más detalladamente en este artículo. Por si acabas de llegar, también puedes visitar nuestro anterior artículo donde comentábamos sobre el FID, otra de las métricas web centrales que deberías conocer.
¿Qué es el Largest Contentful Paint?
La métrica LCP proviene de las siglas en inglés para Largest Contenful Paint. Explicar este término es un poco más difícil que en otros casos, así que lo más importante es que sepas que “pintar” se refiere al momento en que un pixel cambia.
Mientras más grande es un contenido (imagen, video, animación, botón, etc.), más píxeles ocupa. De esta manera, LCP refleja la cantidad de segundos que tardan en pintarse o rederizarse todos los píxeles del contenido más pesado de la web.
Cómo en cada una de las métricas de Chrome Experiencia de Página, cada una de tus páginas tiene un puntaje LCP individual, por lo que tendrás que trabajar sobre cada una de ellas para conseguir un posicionamiento óptimo en Google.
Cómo saber si tu puntaje de Largest Contentful Paint es bueno
Tras estudiar la experiencia de millones de usuarios que navegan a través de los incontables sitios de internet, se establece que 2,5 segundos es el tiempo máximo que deberían tardar en pintarse todos los píxeles del contenido más extenso.
Para contar con una buena puntuación de LCP, este no debería ser mayor a 2,5 segundos para el 75% de las sesiones registradas en tu sitio.
Calcular tu puntaje Largest Contentful Paint
LCP es sólo una de las partes que componen las métricas de Chrome Experiencia de Página. Esta se puede conocer, como con las demás, a través de Google Search Console.
Aquí podrás tener un vistazo acerca de cómo están comportándose las páginas de tu web cuando un usuario ingresa. Si quieres llevar a cabo una prueba más detallada, puedes usar Chrome Dev Tools para ver qué es lo que deberías corregir.
Puede que haya diferencias entre los resultados que arroje Chrome Dev Tools y Search Console. Siempre recuerda que las métricas de Chrome Experiencia de Usuario se basan en lo que usuarios reales ven al navegar tu web. Así que siempre toma en cuenta este último.
También puedes usar la API Performance Observer desarrollada por Chrome para revisar el código de tu web en busca de problemas que lleven a un bajo LCP.
Cómo mejorar el Largest Contentful Paint de tu web
Un bajo puntaje de LCP puede deberse a tres factores fundamentales: un servidor lento, una red lenta, o un código lento. La mejor manera de proceder para solucionar cualquier problema es ir paso a paso.
1. Servidor lento
Optimizar tu servidor es un trabajo extenso y complicado, por lo cual no podremos extendernos mucho aquí. En este caso, lo mejor es usar caché de larga vida útil para todos los contenidos de tu web como imágenes y videos.
Si todos tus contenidos están cacheados, el servidor no tendrá que enviarlos y descargarlos en el dispositivo del usuario cada vez que alguien ingrese a tu web.
2. Red lenta
Una vez que hayas chequeado que todo esté bien con tu servidor, lo que sigue es revisar que la red sea eficiente.
La red se compone de cables que llevan la información desde tu servidor hacia el usuario que navega tu sitio. Para que la carga de los archivos de tu web sea instantánea, los mismos deberían estar cargados en un servidor cercano al usuario.
Para que tu red sea la más rápida, lo mejor es asegurarte de que el CMS (o lo que sea que usas) con el que trabajas cuente con un CND. Un CND (por sus siglas en inglés Content Network Delivery).
Se trata de una serie de servidores intermediaros que guardan los archivos de tu web en una ubicación más cercana a los usuarios que te visitan.
Otra buena solución son los trabajadores de servicio. Se trata de archivos javascript que se descargan en el navegador. De esta manera los archivos necesarios están en el navegador del usuario y no necesitan descargarlos directamente desde tu servidor.
3. Código lento
Si ya has revisado todo lo anterior, lo último que queda es chequear que todo esté en orden con el código front end de tu web.
Detrás de la atractiva interfaz que has creado para los usuarios se esconden líneas y líneas de código que hacen que todo funcione. Muchas veces este código puede tener algunos inconvenientes.
Si leíste nuestro artículo anterior, recordarás que mencionamos que todas las líneas de código se mueven por defecto en una sola “cuerda”. De esta manera, cada función se ejecuta una por una. En este paso deberás mirar el código de tu web para verificar que no se carguen hojas de estilo y otros elementos en el encabezado.
Deberías borrar todo lo que se cargue antes del viewport inicial para que la web se muestre interactiva instantáneamente y luego cargue todo lo demás.
Preconfigurar DNS
Una última acción que puedes tomar para acelerar los tiempos de carga de la interfaz de tu web es preconfigurar las DNS. Se trata de un código sencillo por medio del cual le dices al navegador que, si necesita buscar recursos como imágenes o videos en otro dominio, debería hacerlo en segundo plano mientras carga todo lo esencial para que la web esté interactiva.
Junto con el atributo async, esta es la solución más limpia y sencilla para mejorar considerablemente los tiempos de carga y conseguir una puntación LCP más alta.
¿Necesitas ayuda con Chrome Experiencia de Página?
Siguiendo el enlace al video más arriba podrás encontrar enlaces a todos los recursos que se mencionan en el artículo.
Si todavía no lo tienes claro o necesitas un poco de ayuda para mejorar tu posicionamiento web, puedes ponerte en contacto con Nomlogo y responderemos a todas tus preguntas ¡ponte en contacto!
