Largest Contentful Paint (LCP): Qué es y Cómo optimizarlo

¿Alguna vez has intentado pintar un cuadro y te has preguntado cuánto tiempo te lleva pintar la parte más grande? En el mundo digital, existe una métrica similar que se aplica a las páginas web. Se llama Largest Contentful Paint o LCP. Imaginemos que nuestra página web es un lienzo y el LCP es el cronómetro que mide cuánto tiempo tarda en pintarse la parte más grande de ese lienzo.

Empieza ahora tu proyecto digital por menos de lo que imaginas.

Hosting -70%

En esta guía, vamos a explorar en profundidad el concepto de LCP. Entendiendo qué es con exactitud, por qué es importante y cómo podemos optimizarlo para mejorar la velocidad y la eficiencia de nuestra web hecha con el CMS WordPress.

De esta forma tener una comprensión clara de cómo el LCP puede afectar la experiencia del usuario en nuestro sitio y cómo podemos hacer ajustes para mejorar esta métrica crucial para la auditoria SEO WordPress.

¿Qué es el Largest Contentful Paint (LCP)?

Pensemos en el LCP como un cronómetro que comienza cuando hacemos clic en un enlace o escribimos una dirección en el explorador, y se detiene cuando la parte más grande de la página (como una imagen grande o un bloque de texto) aparece en tu pantalla. Un buen tiempo de LCP significa que los visitantes de nuestra página web pueden ver el contenido de forma rápida, lo que puede hacer que estén más dispuestos a quedarse y explorar.

¿Cómo medir el Largest Contentful Paint (LCP)?

El uso de herramientas que miden la métrica de Core Web Vitals, son el equivalente a hacer un chequeo de salud para nuestra página web. Necesitamos ciertas herramientas y programas para hacerlo. Imagina que estás recogiendo dos tipos de información: los datos de campo, que son como las opiniones de las personas reales que visitan tu página web, y los datos de laboratorio, que son como los resultados de un experimento en un entorno controlado. Algunas herramientas incluso mezclan estos dos tipos de datos para darnos un informe más completo que ayudará a mejorar nuestra página web.

Una de las herramientas más utilizadas para medir el LCP es PageSpeed Insights de Google. Piensa en ella como un médico gratuito para tu página web. Nos ayuda a entender cómo está funcionando la página web y nos da sugerencias sobre cómo mejorar el sitio.

Usar PageSpeed Insights es bastante sencillo. Vamos a ver un paso a paso sobre como utilizar de forma correcta esta herramienta:

Escribimos nuestra URL en la barra de búsqueda en la parte superior del sitio. Hay que tener en cuenta que el proceso de análisis puede llevar algunos minutos.

Una vez tengamos listo el análisis podemos centrar la atención en la sección de Diagnosticar problemas de rendimiento, para verificar las mejoras sugeridas que nos ayudaran a mejorar el puntaje.

Para poder ver más métricas y ajustes a detalle de que podemos mejorar podemos hacer clic en el botón de expandir vista, nos permitirá además de ver otras opciones como First Contentful Paint y el Cumulative Layout Shift, el poder ver una explicación de cada una de las métricas que nos presenta.

En algunas ocasiones solo queremos ver el análisis LCP, si es el caso podemos aplicar el filtro en función de lo que estamos buscando mejorar. Así mismo como una explicación de cada punto a detalle.

De igual forma, contamos con otras herramientas para inspeccionar nuestros sitios y obtener reportes que nos den el Largest Contentful Paint (LCP), una de estas es la página de gtmetrix, pero no es la única, también contamos con otras opciones como pigdom, lighthouse y Google Search Console.

¿Qué implica una buena puntuación de Largest Contentful Paint (LCP)?

El Largest Contentful Paint o LCP se mide en segundos, un poco como un cronómetro para nuestra página web. Lo más ideal sería que la parte más grande del sitio se mostrara en pantalla en menos de 2,5 segundos. Para comprenderlo mejor, es como estar en una carrera: si podemos correr 100 metros en menos de 2,5 segundos, estamos haciendo un buen trabajo.

Si nuestra página web tiene un tiempo de Largest Contentful Paint (LCP) de 1,2 segundos o menos, no tenemos que hacer nada, está perfecta. Un ejemplo sería obtener una A en un examen, por lo que no es necesario hacer nada más.

Si el tiempo de Largest Contentful Paint (LCP) está entre 1,2 y 2,5 segundos. Es como obtener una B en un examen, todavía es una buena nota, pero podríamos hacer algunos ajustes para mejorarlo.

Si, por el contrario, nuestro tiempo de Largest Contentful Paint (LCP) es superior a 2,5 segundos, eso es un problema. Es como obtener una C en un examen. Significa que la página web no está funcionando tan bien como debería, lo que podría hacer que los visitantes se frustren y se vayan. En última instancia, esto podría impedir que nuestra página web crezca y atraiga a más visitantes.

El Largest Contentful Paint o LCP no realiza una medición de todo el sitio, por el contrario, solo puede medir lo que se logra ver en la pantalla sin desplazarse, lo que se conoce como la ventana gráfica. Esto es importante porque el tiempo que tarda en aparecer esta parte de la página que tenga más peso, puede darnos una idea de lo rápido que se carga nuestro sitio web.

Este análisis toma en cuenta:

• Imágenes (incluyendo las que están dentro de un dibujo SVG y WebP WordPress)
• Videos
• Elementos con una imagen de fondo que se carga con la función url()
• Bloques de texto dentro de elementos de nivel de bloque

Lo que se considera el elemento más grande, puede variar dependiendo de varios factores, por ejemplo, para las imágenes, se considera el tamaño que puedes ver en la pantalla, para los bloques de texto, solo se tiene en cuenta el tamaño del texto en sí.

Como hemos comentado este análisis no toma en cuenta nada que no esté en la primera parte del sitio. Es como si estuvieras mirando a través de una ventana: no podemos ver lo que está fuera de nuestro campo de visión. Esto significa que no se cuentan cosas como los márgenes, el relleno o los bordes de un elemento.

¿Cómo optimizar el Largest Contentful Paint (LCP)?

Si nuestro tiempo de Largest Contentful Paint (LCP) es alto, puede significar que los visitantes de nuestra página web tienen que esperar mucho tiempo para ver el contenido, lo que puede llevar a una mala experiencia del usuario. Hay varias cosas que podemos hacer para que el tiempo de LCP sea un poco más bajo:

• Un servidor rápido: de ser posible debemos buscar un servidor más rápido, en otros términos más fáciles de comprender, es como un camarero lento en un restaurante. Si el camarero tarda mucho en traer tu comida, es lo que pasaría con nuestro sitio si se muestra de forma lenta.
• Renderización del lado del cliente: es como si nuestra página web estuviera tratando de hacer demasiadas cosas a la vez. Si la página web está tratando de cargar todo el contenido y también hacer otras cosas, puede ralentizar el tiempo de carga.
• Recursos que bloquean la renderización: estos son obstáculos en el camino que impide que los visitantes lleguen a la página web final.

Pero no hay de qué preocuparnos, hay varias formas de mejorar el tiempo de LCP. Algunos de ellos son los que vamos a ver a continuación:

Utiliza una CDN

Una CDN WordPress puede ayudarnos a mejorar el tiempo de LCP al repartir el trabajo. En lugar de que todas las solicitudes de los visitantes tengan que esperar en línea para ser atendidas por el mismo servidor, una CDN puede ayudar a manejar algunas de esas solicitudes. Esto puede hacer que la página web se cargue más rápido, lo que puede mejorar la experiencia del usuario.

Así mismo, algunas CDNs pueden tener características adicionales, como una CDN de imagen que puede ajustar el tamaño de las imágenes en tiempo real. Esto puede hacer que las páginas web con muchas imágenes se carguen más rápido.

Para configurar de forma correcta el CDN podemos hacerlo por medio de nuestra guia sobre ¿Qué es un CDN y cómo utilizarlo en una Web de WordPress? Una de las más populares es Cloudflare, que tiene más de 120 centros en todo el mundo.

Utiliza tamaños correctos en las imágenes

Las imágenes pueden ser la parte más grande de nuestra página web, sobre todo si nuestro trabajo se centra en servir estas imágenes en buena calidad, es importante asegurarnos de que tienen el tamaño correcto. Es como si estuvieras intentando meter un sofá grande por una puerta pequeña.

El uso de redimensionamientos de las miniaturas WordPress son fundamentales, si servimos imágenes dependiendo del tamaño o dispositivo que va a cargarla, aceleramos aún más la carga de nuestro sitio. Por ejemplo, si estamos usando imágenes grandes en la versión de escritorio, deberíamos usar imágenes más pequeñas en la versión móvil.

Para lograr esto es bueno conocer los tamaños adecuados según las versiones que estemos utilizando de nuestra web:

• Miniatura: exactamente 150 píxeles cuadrados
• Mediana: hasta 300 píxeles cuadrados
• Grande: hasta 1024 píxeles cuadrados
• Tamaño completo: el tamaño original de la imagen

Optimizar imágenes

Si ya hemos verificado el tamaño de las imágenes, otra opción que tenemos es la de optimizar el peso de estas mismas para que nuestra página web se cargue más rápido.

El optimizar las imágenes es bastante sencillo desde nuestros WordPress, para ello existen una gran variedad de plugins que nos facilitan esta tarea. Algunos de los más populares para optimizar las imágenes son TinyPNG, Imagify, Smush, Optimole, EWWW Image Optimizer, y ShortPixel.

En caso de que tengamos acceso al wepanel de webempresa, contamos con una herramienta que también nos ayuda a comprimir y optimizar las imágenes, optimizador.io tanto en la versión de WordPress como la del panel de administración.

Optimizar las imágenes no solo puede mejorar el tiempo de LCP, sino que también puede ayudarnos a ahorrar espacio de almacenamiento y en lo posible mejorar el rendimiento de la página web con respecto al análisis de los motores de búsqueda, lo que se conoce como SEO.

Mejorar el tiempo de respuesta del servidor

La velocidad de carga de nuestra página web está muy relacionada con cuánto tiempo tarda el servidor en responder. Imaginemos que estamos jugando al ping-pong: cada vez que golpeamos la pelota (es decir, cada vez que el navegador del visitante hace una solicitud) y la pelota vuelve (es decir, el servidor responde), eso se llama tiempo de ida y vuelta (RTT).

Para mejorar este tiempo de respuesta podemos:

• Usar el almacenamiento en caché del lado del servidor: al trabajar con Wepanel podemos utilizar magic caché, de esta forma garantizar una carga rápida por parte del servidor.
• Actualizar las especificaciones del servidor: en caso de poder o que tu plan de hosting lo permita actualizar las características como memoria RAM, o espacio en el servidor puede afectar al rendimiento. Es como si estuvieras actualizando tu coche a un modelo más rápido con más espacio de almacenamiento.
• Optimizar los códigos de la aplicación: al vaciar nuestros códigos que no estamos utilizando podemos liberar espacio crítico de nuestro sitio ayudándolo a que este cargue más rápido. Este paso puede ser un poco técnico, si no estamos habituados a eliminar o trabajar con los códigos del sitio lo mejor es consultarlo con profesionales.

De igual forma, tenemos disponible una guía sobre como optimizar la base de datos en WordPress, que nos ayudara a acelerar nuestro sitio.

Utilizar plugins de caché para servidor

La caché es como tener una copia de seguridad de las partes estáticas de nuestra página web guardada en un lugar temporal. Esto puede hacer que nuestra página web se cargue más rápido porque hay menos datos que transferir cuando ingresamos al sitio. Hay dos formas principales de hacer esto: almacenar la caché del lado del servidor y el almacenarla en el explorador.

El almacenamiento en caché del navegador es como si los visitantes de nuestra página web guardaran una copia de la web en su propio ordenador. De esta manera, no tienen que descargar la misma información cada vez que visitan la página web.

El almacenamiento en caché del lado del servidor, es como tener una copia de seguridad de la página web guardada en el mismo lugar donde está alojada. De esta manera, el servidor no tiene que reconstruir nuestra página o cargar el contenido de la base de datos cada vez que alguien la visita.

Una de las herramientas más populares para activar el almacenamiento en caché en las páginas web es LiteSpeed.

Problemas con lazy loading

El lazy loading, es una práctica que facilita a las páginas web cargar el contenido más relevante, dejando el resto para ser cargado mientras se visita el sitio. Esto puede hacer que la página cargue más rápido, pero también puede aumentar el Largest Contentful Paint (LCP) si no se implementa de forma correcta.

Para evitar que esto suceda debemos configurar en el plugin que estemos utilizando de lazy Load en WordPress, el atributo loading=”eager”, esto hará que el elemento principal que va a ser cargado no sea afectado por el plugin. De esta forma no afectamos el funcionamiento del sitio y mejoramos el LCP.

De la misma forma que en pasos anteriores contamos con guías, esta no es la excepción: Lazy Load en WordPress, mejora de la velocidad web

Minificar los archivos JS, CSS y HTML

La minificación de archivos es una técnica que nos permite reducir el tamaño de los archivos de la página web, un poco como si estuvieras comprimiendo un archivo en tu ordenador. Esto puede ayudar a mejorar el tiempo de Largest Contentful Paint (LCP).

Los archivos para comprimir más comunes son los archivos de CSS, JavaScript y HTML, estos son más propensos a tener espacios en blanco en su código lo que los hace más pesados. Aunque estos espacios en blanco pueden parecer pequeños, pueden sumar y ralentizar nuestra página web.

Podemos minificar estos archivos de forma manual o utilizando plugins especializados para esta función. Algunos plugins populares para la minificación son Fast Velocity Minify y WordPress Super Minify.

Uso de compresión GZIP

Si ya hemos realizado la minificación y vaciado de las caché, no nos queda mucho por hacer. Uno de los métodos para mejorar este Largest Contentful Paint (LCP) es el uso de la compresión GZIP. Se puede activar esta compresión utilizando algunos plugins comerciales como WP Rocket y más.

Sin embargo, si contamos con un panel de webempresa, tenemos a disposición nuestra compresión GZIP desde el primer momento, podemos ver estos pasos en la guía de compresión GZIP en WordPress. De igual forma, si no estamos utilizando un wepanel, sino que usamos un CPanel de otro proveedor, también vamos a encontrar cómo realizar este ajuste,

Con esta compresión estamos forzando a nuestro sitio a que comprima en gran medida elementos secundarios a la carga principal del sitio, acelerando aún más su tiempo de carga.

Recursos que bloquean el renderizado

Los recursos que bloquean la renderización son partes de los archivos que pueden hacer que tu página web se cargue más lenta. Estos pueden hacer que varias secciones de nuestra web carguen al mismo tiempo, lo que puede dar la impresión de que nuestro sitio es lento o proporcionar valores errados para el LCP.

Es por esto que al igual que en otros puntos importantes para este también contamos con una guía sobre eliminar los recursos que bloquean el renderizado en WordPress, lo cual nos ayudara a solucionar este problema de cara a Google.

En el podemos ver algunos ejemplo de cómo solucionarlo, de igual forma, algunos de los plugin más populares para solucionar este problema son W3 Total Cache, Autoptimize, y Speed Booster Pack.

Conclusiones

Como hemos podido ver a lo largo de esta guía el Largest Contentful Paint (LCP) es una medida que nos indica cuánto tiempo tarda una página web en cargar su contenido más grande. Esta unidad medida es clave para la experiencia del usuario en nuestro sitio y afecta la velocidad de carga de la página.

Si implementamos las medidas necesarias, podemos mejorar este tiempo de carga, no es necesario implementarlas todas a la vez, si se nos complica podemos implementar las que creamos convenientes y sean más sencillas.

También te puede interesar:

• Qué es el marketing automation
• Woocommerce multivendor
• Personalizar dashboard WordPress
• Extensiones Woocommerce
• Exportar widget WordPress
• Cambiar nombre de usuario WordPress
• Instalar tema en WordPress