Optimiza tu página web WordPress.
Mejora los tiempos de carga de tu Largest Contentful Paint (LCP) Programador web Freelance

Guía práctica de Optimización WordPress. Trucos, conceptos y herramientas.

Miércoles, 22 Diciembre 2021 18:16

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.

Mejora los tiempos de carga de tu Largest Contentful Paint (LCP)
 

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.

LPC medido en ligthouse

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.

  1. 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.

  2. Optimzar la entrega de CSS

  3. Cargar JavaScript diferido

  4. 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.

  5. Minimice los archivos CSS y JavaScript

  6. 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:

  1. Identifica el elemento LCP con la prueba Lighthouse
  2. 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:

preload backgroun image desde CSS

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)

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

https://www.estegrafico.com

Artículos relacionados:

Optimización Web
Optimización Wordpress para tienda online
L. Javier Gil
e-commerce
Tienda online para cervecería artesanal
L. Javier Gil

Trabajemos juntos; comienza tu proyecto web profesional.

Rellena este pequeño formulario y me pondré en contacto contigo con la mayor brevedad posible.