Herramientas para optimizar el WPO de tu web de forma sencilla.

El pasado 24 de septiembre nuestra Laura López, SEO manager en Internet República, participó en el SEOnderground el mayor evento de marketing digital de LATAM. Colaboró con su ponencia sobre Herramientas para optimizar el WPO de forma sencilla sin necesidad de conocimientos sobre programación o desarrollo.

¿Qué son y cómo afectan las Core Web Vitals al rendimiento de una página web?

El Web Performance Optimization (WPO) o Core Web Vitals, es el conjunto de acciones y mejoras aplicados a un sitio web con el objetivo de conseguir reducir su velocidad de carga, haciendo que la experiencia de usuario sea lo más positiva posible.

Partiendo de esta premisa, Laura nos comenta que la evolución de las Core Vitals y su implicación en el rendimiento de las webs está bastante discutido entre los que piensan que sí afectan dentro del ranking y otros que creen que no. Compartiendo las palabras de John Mueller podemos afirmar que las Core Web Vitals sí afectan al posicionamiento en el ranking, pero no quiere decir que vaya a ser lo único que afecte a nuestra web.

Bajo la experiencia, Laura nos confirma que optimizar este rendimiento es un hecho que ayuda en el posicionamiento por lo que es algo que debemos tener muy en cuenta a la hora de optimizar nuestras páginas.

¿Cómo podemos mejorar el rendimiento en nuestra web?

Es importante saber qué es lo que está mal y cómo y con qué herramientas vamos a analizarlo.

Por lo tanto, vamos a dividir este proceso en tres partes. La primera es analizar el rendimiento de mi web, obteniendo estos datos podremos ver qué es lo que está afectando de forma negativa a nuestra web y por último y más importante cómo lo podemos mejorar.

¿Cómo analizar el rendimiento de mi web?

Existen infinidad de herramientas en las que apoyarnos y analizar el rendimiento de nuestras páginas web. En su presentación Laura nos muestra las que, para ella, son las más relevantes.

Lighthouse: Nos permite analizar el rendimiento de la página sin salir del navegador, lo cual nos da rapidez a la hora de hacer un primer informe.

PageSpeed: Si queremos más detalle del rendimiento de la página esta herramienta nos permite ver qué es lo que está mal y lo que está bien en nuestra web. Con un sistema de puntuaciones y colores es muy sencilla de entender.

DevTools: Dentro de esta herramienta tenemos una opción que nos permite ver en qué momento se ejecuta cada elemento dentro de la página, lo que es interesante para ver todos los marcadores que Google tiene en cuenta en las Core Web Vitals.

Web.dev: Esta herramienta es muy parecida a Pagespeed, sin embargo, esta herramienta en cada uno de los errores que nos identifica nos da una solución con guías, paso a paso, para mejorarlo.

Chrome UX Report: Este informe de experiencia de usuario de Google es interesante porque nos lleva a generar data estudios donde nos hace una evolución del rendimiento de las Core Web Vitals de nuestra web y su competencia. Esta herramienta nos permite hacer un seguimiento y ver los resultados de las acciones en el momento.

Pagespeed Compare. Es una herramienta que nos permite añadir urls de los competidores que queramos y nos da sus métricas principales en comparación con todos los competidores seleccionados. Esto es muy interesante sobre todo si quieres hacer un análisis de benchmark rápido sobre las Core Web Vitals.

Google Search Console: Esta herramienta nos da los errores y la calidad de las urls y lo más importante es que nos da ejemplos de otras páginas web, lo que nos permite obtener pistas sobre lo que podemos mejorar.

Google Analytics: Nos permite anotar algún hito relevante a nivel de rendimiento.

Screaming Frog + Pagespeed: A la hora de priorizar el trabajo es imprescindible analizar qué url y qué métricas tenemos peor en función del rendimiento de sus Core Web Vitals. Esto lo podemos medir añadiendo en la herramienta Screaming Frog la API de Pagespeed, lo cual nos permitirá el análisis exhaustivo de cada url.

¿Qué me esta penalizando?

Habitualmente los errores que nos salen en estos informes sobre las Core Web Vitals suelen ser los mismos en todas las urls, pudiendo variar el nivel en unas y otras páginas web.

Las puntuaciones negativas suelen ser por:

Tamaño de las imágenes

Tiempo de respuesta del servidor

Recursos que bloquean el renderizado

Formatos de nueva generación

CSS que no se está usando

Minificar CSS

Minificar JavaScript

¿Cómo puedo mejorar?

Laura nos ayuda a darle la vuelta a estos rendimientos negativos sin la necesidad de programar, a base de herramientas y plugins sencillos de manejar.

Uno de los problemas más comunes en la optimización de páginas web es el tiempo de respuesta del servidor. ¿En qué afecta esta métrica? Principalmente en el TTFB (Time To First Byte), SI (Speed Index), FID (First Input Delay) y en el LCP (Largest Contentful Paint). Para mejorarlo es imprescindible mantener nuestro site actualizado, así como nuestros accesos a la base de datos y nuestro Api. Mejorar nuestro hosting y la caché también es algo básico para optimizar el rendimiento.

Si estamos trabajando con WordPress lo primero que debemos realizar es una actualización del propio CSS y de los plugins que estamos utilizando a su última versión, siempre con cuidado y realizando una copia de seguridad ya que afectan a la parte técnica del proyecto.

Otra de las partes que más ralentizan la web es el JavaScript y CSS, afectan a las siguientes métricas: FCP (First Contenful Paint), el TTI (Time To Interactive), el TBT (Total Blocking Time), el LCP (Largest Contentful Paint) y el FID (First Input Delay). Para mejorar este punto debemos, minificar y unificar el código, carga diferida (es decir que los recursos que no sean críticos no se carguen en primer plano), la pre-carga (para esos recursos que si son necesarios en una primera carga) y eliminar el código sin usar.

Para realizar estas mejoras podemos usar los siguientes plugins: WP Rocket, Autoptimize y Total Cache. Otras herramientas para comprimir serían CSSCompressor y JScompress que nos permitirán optimizar la parte del código que seleccionemos consiguiendo así un rendimiento mejor.

Otro de los puntos que se suelen indicar en las auditorias sobre la Core Web Vitals son las imágenes y multimedia. Esto nos puede afectar en el FCP (First Contentful Paint) o CLS (Cumulative Layout Shift). En este caso arreglar estos archivos es muy sencillo, debemos optimizar las imágenes, redimensionarlas, comprimirlas o en el caso de los videos utilizar el Lazyload para que se carguen en una fase posterior y no en la carga inicial de la página.

Las herramientas que nos recomienda Laura para mejorar estas métricas son Cloudinary y el plugin de WP Smush. Herramientas que nos permiten analizar y gestionar todo lo que necesitemos. Otras herramientas de compresión de imágenes son compressjpeg y compresspng que nos permiten optimizar y reducir las imágenes que vayamos a utilizar. Otro plugin imprescindible es Lazy Load, para evitar que los videos se carguen en primer plano y conseguir una mejora del rendimiento sencilla y muy rápida.

Por último, otra de las cosas que siempre nos marca Google es la caché. La cual afecta principalmente al FCP (First Contentful Paint), al TBT (Total Blocking Time) y al CLS (Cumulative Layout Shift). La forma de mejorarlo es muy sencilla, optimizando la caché o indicando el tiempo de almacenamiento que vamos a tener esta caché.

Los plugins más recomendados para estas mejoras son WP Super Caché, TotalCache y WP Rocket.

Con estas cuatro bases (Servidor + JavaScript y CSS + Imágenes y multimedia + Caché) tendríamos controlado los cuatro pilares de optimización que nos pide Google.

¡Si quieres ver el evento al completo no te lo pierdas aquí !