Cómo acelerar WordPress de cara a los nuevos Core Web Vitals

A lo largo de 2021 Google tiene pensado sacar un nuevo conjunto de métricas (aunque pueden ser más en el futuro) con las que valorar la satisfacción de la experiencia de usuario y por lo tanto ser un punto clave a la hora de clasificar en las SERPs.

Por eso es importante prestarle atención a los nuevos Core Web Vitals, saber en qué consisten y cómo podemos mejorar nuestro sitio web hecho en WordPress para tener una mejor puntuación en ellos.

1. ¿Qué son los Core Web Vitals?

Los Core Web Vitals son tres nuevas métricas relacionadas con la velocidad de carga del sitio web y la estabilidad que ofrece al usuario.

Son los denominados LCP, FID y CLS. Cada uno de ellos se ocupa de medir un parámetro diferente:

• LCP (Largest Contentful Paint) ⇨ Velocidad de carga
• FID (First Input Delay) ⇨ Tiempo que pasa hasta que podemos interactuar con la web
• CLS (Cumulative Layout Shift) ⇨ Estabilidad de la web al cargar

¿Cómo medirlas?

Las tienes disponibles en la mayoría de herramientas que Google pone a disposición de los webmasters:

1. Search Console
2. PageSpeed Insights
3. Lighthouse
4. Extensión Web Vitals de Chrome

2. Mejorar el LCP

El LCP mide el tiempo que tarda el navegador en mostrar el elemento visual de mayor tamaño de la pantalla. Lo más normal es que si tienes un blog hecho en WordPress sea la imagen destacada de los artículos.

Hay tres clasificaciones de esta métrica:

• Buena: Menos de 2,5 segundos
• Necesita mejoras: Entre 2,5 y 4 segundos
• Pobre: Más de 4 segundos

Como puedes imaginarte, nuestro objetivo es tener una calificación del tipo “buena”, por lo que el elemento más grande debe cargar en menos de 2,5 segundos. Para conseguirlo podemos aplicar varias técnicas:

En primer lugar y uno de los factores más importantes es el tiempo de respuesta del servidor, por lo que si tienes alojada la web en un servidor lento o de poca calidad el LCP será casi imposible de reducir. Por eso, te recomendamos que contrates un hosting de confianza y con buenas prestaciones como FactoriaDigital.

Otras acciones que podemos aplicar para mejorar el LCP es utilizar un servicio de CDN que permita reducir el número de peticiones al servidor y mejore la velocidad de carga de la web.

Hay muchas empresas donde elegir y con todo tipo de precios, las más famosas son MaxCDN, CloudFlare, Amazon CloudFront, KeyCDN o Fastly.

Tener un buen plugin de cache también es muy importante para reducir ese tiempo de carga y si tiene integradas otras funciones como minificar archivos CSS y JS mucho mejor.

Además, reducir al máximo el número de plugins activos instalados en tu WordPress también mejorará el comportamiento global del sitio y repercutirá en tu tiempo LCP.

Como te hemos mencionado anteriormente, el contenido de mayor tamaño que se muestra “Above de fold” suele ser la imagen destacada de los artículos, por lo que tener optimizada esa imagen también es muy importante.

Nos referimos al tamaño, formato y nivel de compresión de la foto.

Intenta mostrar imágenes que se ajusten bien al tamaño de tu sitio web (ya que de otra forma pesarán en exceso y el navegador tendrá que redimensionarla) e intenta utilizar formatos optimizados como los nuevos WebP o JPEG XR.

En concreto, para WordPress, te aconsejamos utilizar un plugin como ShortPixel para optimizar cada una de las imágenes que tengas.

3. Mejorar el FID

El FID es la métrica que mide el tiempo que tarda el sitio web en reaccionar cuando el usuario realiza la primera acción, como hacer clic en un enlace, botón o elemento del menú (pero no hacer scroll o zoom en la pantalla).

Hay tres tipos de calificaciones para el FID:

• Buena: Menos de 100 milisegundos
• Necesita mejoras: Entre 100 y 300 milisegundos
• Pobre: Más 300 milisegundos

Debes tener en cuenta que Google necesita realizar la medición del FID con usuarios reales, ya que son los que pueden crear estas acciones y que la mejora del tiempo del FID está muy relacionada con el TBT o Tiempo Total de Bloqueo que es el tiempo que un sitio web necesita para poder ser interactiva.

Cuanto mayor sea el TBT mayor será la métrica del Core Web Vital.

Básicamente, para mejorar el FID debemos reducir el tamaño de la web para que cargue más rápido y pueda responder antes al usuario.

En primer lugar, deberemos minificar y comprimir los archivos CSS y JS cosa que podemos hacer con varios plugins.

El que yo utilizo en mi sitio web tecnobeta.net es WP Rocket que es de pago pero uno de los mejores que he probado.

Otra forma de mejorar el FID es utilizar en WordPress la compresión GZIP, cosa que podemos hacer habilitándolo a nivel de servidor, con un plugin como WP Rocket o desde el archivo .htaccess.

Puedes comprobar si lo tienes activado mediante la herramienta GiftOfSpeed de forma gratuita.

Por último, es posible mejorar aún más la velocidad del FID si aplazas la carga de los archivos javascript (JS) que no sean críticos para la correcta visualización de la web y los cargas de manera diferida.

Esto lo podemos hacer fácilmente con plugins como Async JavaScript o con WP Rocket.
La forma perfecta de hacer esto sería probando a cargar de forma diferida los archivos javascript uno a uno y comprobar que el tema de WordPress se sigue viendo bien.

Además, al igual que en el caso de la métrica LCP, reducir el número de plugins también ayudará a que la web pese menos y pueda ser interactiva en menor tiempo.

4. Mejorar el CLS

El CLS o Cumulative Layout Shift mide la estabilidad de la web desde el punto de vista visual y funcional de la web durante su tiempo de vida.
Es decir, mide el número e importancia de los cambios que sufre y que pueden afectar al usuario.

Para que lo veas de una forma mucho más sencilla piensa en esas webs que al cargar empiezan a cambiar de posición y mover el texto y los demás elementos como imágenes y botones y que empeoran mucho la experiencia de usuario, ya que si intentas pulsar en un botón y se mueve hacia abajo (normalmente por un anuncio o la carga de una imagen) estarás seleccionando otra cosa que no querías.

Esto es lo que mide el CLS.

Como en las métricas anteriores hay tres tipos de calificación:

• Buena: Menos de 0,1
• Necesita mejoras: Entre 0,1 y 0,25
• Pobre: Más de 0,25

NOTA: Actualmente que un elemento cambie su tamaño no implica que empeore su CLS a menos que también haga cambiar su posición o la de otros elementos.

¿Qué causa esta inestabilidad de la web y qué podemos hacer en WordPress para solucionarlo?

Lo más normal que puede causar que el CLS tenga una peor puntuación es incluir imágenes “Above the fold” en las páginas y entradas de nuestro sitio web de WordPress sin indicar sus dimensiones, por lo que el navegador no sabe cuanto espacio debe dejar en blanco antes de cargarlas en la estructura de nuestra plantilla.

Por eso, su solución es muy sencilla, no hay más que establecer los atributos “height” y “weight” en cada una de nuestras imágenes.

Al igual que las imágenes, si incluimos anuncios de Adsense o de cualquier otra red de anunciantes y no ponemos las dimensiones o no las sabemos habrá inevitablemente un empeoramiento del CLS.

Algo que podemos hacer es utilizar temas que estén correctamente programados y que sean conocidos, para evitar inestabilidades en la carga y cualquier otro efecto no deseable.

Algunos de estos temas son Twenty Twenty, GeneratePress o Thrive Theme Builder.

Este artículo ha sido escrito por Javier López, CEO de Tecnobeta.net. Apasionado de las nuevas tecnologías y del marketing online. Un emprendedor por vocación al que le llena su vocación y que sigue aprendiendo todos los días.