El LCP es el tiempo en el que han terminado de cargarse los contenidos principales de la página. A menos LCP, más rápido cargará tu website. La velocidad de carga en general de un sitio es un factor clave en la experiencia de usuario. En este artículo te explico cómo mejorarlo en tu web Wordpress.
Índice de contenido del artículo
1. Qué es el LCP
El Largest Contentful Paint (LCP) es la cantidad de tiempo que le toma a una página mostrar el bloque de contenido más grande visible en la ventana del navegador. Mide cuánto tiempo deben esperar los usuarios para ver el contenido más importante de la página.
Hay que entender que el LCP es no es lo mismoque el concepto de tiempo de carga de la página.
La verdad es que no suele importarnos cuándo el servidor de un sitio web comienza a enviar el primer dato, mas bien nos interesa el tiempo que tendremos que esperar hasta que podamos comenzar a navegar el contenido de la página.
2. ¿Cuál es un buen puntaje de LCP?
Según Google, para brindar la mejor experiencia de usuario tu sitio debe tener un LCP de 2.5 segundos o menos.
Al igual que las otras métricas de Core Web Vitals, el LCP se califica en un rango de "bueno" a "deficiente":
Bueno: LCP de menos de 2,5 segundos.
Regular: Las puntuaciones entre 2,5 segundos y 4,0 segundos necesitan mejorar.
Malo: Un LCP de más de 4.0 segundos es demasiado, tus usuarios tienen una mala experiencia al visitar tu sitio web.
3. Cómo podemos mejorar nuestro LCP en Wordpress
Existen varias áreas de trabajo que puedes abordar con ayuda de algún plugin de optimización web como WP Rocket, LS Cache, AssetsCleanup entre otros y también manualmente, trabajando sobre las inserciones de código fuente en tu archivo functions.php que haga la plantilla o plugins que utilices.
Almacenamiento en caché de páginas
El almacenamiento en caché de página mejora el tiempo de carga en general al ofrecer un archivo en caché donde no se está ejecutando código PHP.Optimzar la entrega de CSS
Cargar JavaScript diferido
Retrasar la ejecución de JavaScript
esta técnica impide que los archivos CSS y JS no bloqueen el renderizado, lo que permite que el contenido de la página se cargue más rápido.Minimice los archivos CSS y JavaScript
Compresión GZIP
Estas características básicas de optimización wordpress reducen el tamaño de los archivos, por lo que el contenido de la página, incluido el elemento LCP, se verán afectados y si lo haces bien tu web cargará más rápido
4. Mejora de LCP si es una imagen
Muy a menudo, el elemento que más contribuye al LCP es una imagen.
En algunos casos, cuando activamos la carga en diferido de las imágenes obtenemos resultados negativos en nuestros LCP. Si la imagen es muy pesada tarda más en aparecer cuando el script LazyLoad está cargándola
En este caso, lo primero que puedes hacer es deshabilitar LazyLoad en la imagen LCP.
Sigue estos pasos:
- Identifica el elemento LCP con la prueba Lighthouse
- Deshabilita LazyLoad en la imagen específica
Comprime la imagen al menor peso posible, esto siempre es un ejercicio de compromiso pero intenta hacer una compresión sin pérdida en pantalla. Si es una fotografía, un buen comienzo puede ser exportarla en jpg a 59% de Compresión.
Si tu imagen es una imagen de fondo de un elemento html declarada en una hoja de estilos CSS como la siguiente:
Siempre puedes intentar precargarla y observar si deja de lastrar tus tiempos de LCP.
<link rel='preload' href='/background-image.png' as='image'>Utiliza ese código para
4.1. Otras sugerencias que pueden mejorar los tiempos LCP de imagen
- Optimizar y cambiar el tamaño de las imágenes
- Explora el formato svg y png para gráficos. Jpg para fotos.
- Entregua las imágenes usando CDN (Cloudflare puede ayudar)
Revisa el artículo: Cómo comprimir mis imágenes para la web: 5 herramientas alucinantes.
5. Mejora de LCP cuando el elemento LCP es un video
Los principales plugins de gestión de carga diferida de imágenes suelen traer esta opción. Aunque, al igual que con las imágenes también podemos hacerlo con código. En WPRocket, la opción LazyLoad para videos e iframes en la pestaña Medios puede ayudar
6. Otros métodos para mejorar LCP
- Considera utilizar una imagen estática en lugar de un slideshow en mobile
- Agregua el elemento LCP directamente en el HTML de la página en lugar de cargarlo con JavaScript / CSS
- Minimiza la cantidad de JavaScript crítico que se necesita para mostrar el contenido en la mitad superior de la página
- Evita colocar código CSS grande no crítico en el encabezado
- Mejorar tu plan de hosting a una máquina más potente
Si este artículo te pareció interesante, compártelo en las redes sociales!
L. Javier Gil
Programador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá, o desde un rinconcito de la vieja España llamado Benavente.
Blog de Este Gráfico
