Hemos abordado las Métricas web principales en nuestro artículo previo sobre la actualización de Google Core Web Vitals. Sin embargo, no podemos hablar de las Métricas web principales sin profundizar en un factor clave: Largest Contentful Paint (LCP), también conocido como renderizado del mayor elemento con contenido.
En esta guía, abordaremos qué es LCP, por qué es importante, sus beneficios y qué mejoras puedes hacer para optimizar tu web.
- ¿Qué es LCP y por qué es importante?
- Definir LCP bueno o pobre
- ¿Qué causa un LCP pobre?
- Cómo solucionar un LCP pobre
- Descubriendo tu LCP
- ¿Qué puede hacer Semrush para ayudar?
¿Qué es LCP y por qué es importante?
LCP (Largest Contentful Paint) significa renderizado del mayor elemento con contenido. LCP es una medida de la velocidad de página, y te dirá cuánto tiempo es necesario para que se cargue el principal contenido de una web (básicamente cuando una web se hace visible para el usuario).
El LCP está integrado en la experiencia de usuario. Normalmente, a los usuarios no les gusta esperar a que se cargue una web si pueden conseguir inmediatamente una mejor experiencia en alguna otra parte.
Si tu LCP es pobre, es posible que experimentes una mayor tasa de rebote, y tus rankings generales pueden estar sufriéndolo. Un mal LCP puede traducirse incluso en una menor tasa de conversión, lo que no es bueno para tu negocio.
Gracias a la actualización de renderizado del mayor elemento con contenido de Google, el LCP se ha convertido en un factor más importante para que posiciones en los resultados de búsqueda. Para seguir posicionando orgánicamente y mantener esas visitas, es muy importante estar en el ranking más alto de LCP.
El LCP solo se aplica al contenido principal en la mitad superior de la página. Esto incluye cualquier imagen, vídeos y bloques de texto mostrados sin que el usuario tenga que hacer scroll para encontrarlos. Tenlo en cuenta cuando observes las áreas problemáticas.
Definir un LCP bueno o pobre
De acuerdo con las pautas de Google, el contenido principal de tu página debe cargarse dentro de los primeros 2,5 segundos de la visita de un usuario para obtener un buen LCP. El siguiente gráfico te lo muestra con más detalle:
Si tus usuarios tienen que esperar cinco segundos o más para que se cargue el contenido principal (es decir, si tu LCP es deficiente y necesita mejorar), es muy probable que busquen en otra parte.
Las directrices de Google especifican que tu LCP necesita posicionar como "buena" al menos, el 75% de las veces. Si puedes gestionarlo, tu rendimiento irá como un cohete.
Echaremos un vistazo a tu LCP específico en un momento. Por ahora, vamos a centrarnos en las causas generales de un LCP pobre y cómo lidiar con él.
¿Qué causa un LCP pobre?
El listado de las causas de un LCP pobre es técnicamente infinito.
Puede ser cualquier cosa que ocupe mucho espacio: reproductores de medios que pueden causar una carga de página lenta, slides de imágenes sin optimizar, botones de redes sociales o incluso widgets como el logueado, un formulario de suscripción a una newsletter y mucho más.
Pero vamos a ser un poco más específicos.
Como muestra el gráfico superior, los factores que causan un LCP pobre con frecuencia pertenecen a cuatro grupos principales:
1. Tiempo de respuesta del servidor lento
Tener un tiempo de respuesta del servidor lento impacta negativamente en todas tus métricas de carga y es, sin duda, una causa definitiva de un LCP pobre.
Los tiempos de respuesta lentos del servidor son a menudo el resultado de problemas con tu infraestructura back-end, consultas de la base de datos no optimizadas o respuestas de API que están tardando mucho en resolverse, todo ello en la parte trasera de tu sitio.
El primer paso hacia la mejora es asegurarse de que almacenas tu web en un buen servidor.
2. JavaScript y CSS que bloquean el renderizado
Aunque personalizar tu web es una excelente manera de ayudarte a destacar, añadir JavaScript y CSS para embellecer el tema de tu sitio y su contenido, lamentablemente, también afectará el tiempo de carga de tu web.
Algunas veces es buena idea tener un diseño de sitio menos "pesado" y reducir el número de plugins que tienes, particularmente en la parte superior y mejorar tu LCP.
3. Renderizado del lado del cliente
El renderizado del lado del cliente (también conocida como renderizado de páginas web directamente en el navegador con JavaScript) es un método de desarrollo web bastante popular.
Sin embargo, implica mucho ir y venir para que el navegador recopile y cargue el JavaScript antes de renderizar el contenido principal y más espera para tu usuario.
Si también confías en el renderizado del lado del cliente, es algo que querrás tener en cuenta cuando trabajes en tu LCP.
4. Tiempos de carga de recursos lentos
Es un hecho que los grandes recursos o el contenido visualmente impactante en una página, inevitablemente significa más tiempo de carga.
Si tienes muchas imágenes de gran calidad, GIFs y cajas de texto no optimizadas para presentar en la mitad superior de la página, tu LCP se verá afectado.
Lee más para aprender cómo optimizar estos aspectos y mejorar tu LCP.
Cómo solucionar un LCP pobre
Hay unas cuantas cosas que puedes hacer para solucionar un LCP pobre, algunos más fáciles que otros. Vamos a acompañarte a través de los más sencillos.
1. Optimiza tu CSS
Los archivos CSS son recursos que bloquean el renderizado. Los recursos tienen que ser cargados y procesados antes de que el servidor pueda renderizar la página entera.
Sin embargo, puedes optimizar los archivos CSS para eliminar manualmente el código sin utilizar, minimizar los archivos CSS sin usar u optimizar tus imágenes de fondo CSS con consultas de medios.
Suena muy trillado, ¡pero hay cientos de recursos y tutoriales sobre las métricas de velocidad centrada en el usuario que te pueden ayudar!
2. Optimiza tus imágenes
Puedes seguir unos cuantos pasos cuando se trata de optimizar tus imágenes. Estos son los principales:
- Comprime tus imágenes
- Considera convertir tus imágenes a formatos más eficientes
- Usa vídeos en lugar de GIFs (tardan menos en cargar)
- Asegúrate de que tus imágenes tienen las dimensiones correctas
Y siempre merece la pena pensar, ¿de verdad necesito esta imagen? ¿Añade algo a mi página? Si no, quizás merece la pena librarse de ella.
Este artículo sobre SEO para imágenes te ayudará a la optimización de tu página.
3. Optimiza tu fuentes web
Las fuentes, normalmente, vienen en archivos grandes. Como resultado, el contenido de texto en una fuente poco común no se mostrará en una página hasta que el archivo de fuentes se cargue.
¡Lo que hará que a los usuarios les lleve más tiempo ver la información esencial! Simplemente, no sirve.
Para evitarlo, optimiza tus WebFonts. Reduciendo el tamaño del archivo de fuente, usando un font-display o actualizando el estilo de página para utilizar una fuente personalizada, la página se cargará más rápido.
4. Optimiza tu JavaScript
Escribes tu JavaScript, consigues toda la información que necesitas y estás listo, ¿verdad? bueno, piénsalo dos veces.
Si tu JavaScript ha estado un tiempo estancado, merece la pena comprobarlo ya que puede estar ralentizando la velocidad de carga de tu página.
Entre las cosas que puedes hacer para optimizar tu JavaScript (dadas las nuevas métricas LCP) se incluyen:
- eliminar el código sin utilizar
- comprobar que tu código está actualizado y es compatible con los navegadores modernos
- instalar JavaScript actual y reducir las cargas con la división de código
Descubriendo tu LCP
¿Cómo saber cuál es tu LCP entonces?
Un buen lugar para empezar es comprobar tu rendimiento de LCP con las herramientas que Google proporciona: Google Search Console, Google Page Insights y Lighthouse.
Encontrarás una pestaña en el menú de navegación izquierdo de Google Search Console con el nombre de Métricas web principales. Si accedes a esta pestaña verás una visión general de tus URLs. Desde ahí, es bastante fácil ver dónde se están generando los problemas y qué ajustes puedes realizar para resolverlos.
Si no tienes Google Search Console configurado para tu web, no te preocupes. Siempre puedes acceder a esta información mediante las herramientas de Lighthouse y PageSpeed Insights. Si eres nuevo en PageSpeed Insights, puedes encontrar en nuestro blog una explicación completa de cómo utilizar esta herramienta de Google.
Aquí tienes una visión general en Page Insights del sitio de escritorio de Amazon. Te muestra todas las Métricas web principales de un vistazo:
Como puedes ver, el renderizado del mayor elemento con contenido está bastante bien, pero siempre hay lugar para la mejora. Salta a la sección de Oportunidades, explora todas las recomendaciones y recopila todas estas oportunidades para conseguir posiciones aún mejores.
Es buena idea trabajar en estas recomendaciones a tiempo para pasar con nota la actualización de Métricas web principales de Google. Comprueba con frecuencia para asegurar una mejora constante de tu LCP y otras métricas del sitio y tu situación general SEO.
¿Qué puede hacer Semrush para ayudar?
Bien, ya has comprobado tu LCP, y has identificado unos cuantos problemas. Ahora, tienes que trabajar en solucionarlos y después, repetir el proceso en una semana o dos.
El mantenimiento constante de tu SEO para mantener el LCP de tu web al día puede ser agotador. La buena noticia es que sabemos exactamente cómo puedes hacer este proceso más eficiente: con la herramienta Auditoría del sitio.
Prueba la velocidad de tu sitio con la herramienta y genera un listado de todos los problemas y mejoras posibles, justo como PageSpeed Insights pero en profundidad. La herramienta Auditoría del sitio puede además escanear errores de SEO técnico para proporcionar gráficos fáciles de leer y tablas con explicaciones sobre cómo corregir problemas y solucionarlos.
La herramienta puede ayudarte a completar los huecos de LCP evaluando tu URL y analizando tu contenido mientras te mantiene constantemente informado sobre el desempeño de tu LCP.
Una vez que hayas configurado tu auditoría del sitio, todo lo que tienes que hacer es hacer clic en "ver detalles" bajo "Core Web Vitals":
Puedes encontrar tus resultados de LCP en el gráfico a mano izquierda:
Ahora sabes cómo mantener tu rendimiento de LCP actualizado y dónde se encuentran los puntos destacados de mejora. Si trabajas regularmente en cada recomendación de Auditoría del sitio, tu LCP y tus Métricas web principales están bien orientadas hacia la mejora.
Usa estos datos para realizar un seguimiento de tu LCP a lo largo del tiempo, y mejorarás el rendimiento de tu velocidad web.
¿Tienes más dudas sobre este tema? Aquí te dejamos un webinar sobre Core Web Vitals, con Lino Urruñuela.
