¿Qué es el WPO y cómo lograr la Optimización WPO ?
Optimización WPO, es un conjunto de buenas prácticas que intentan mejorar en en cuatro ámbitos:
- Mejora de la experiencia de usuario y UX
- Mejora en los rastreos por parte del bot de Google.
- Mejora en la puntuación del test de velocidad de carga.
- Mejora en le consumo de recursos.
Mejorar la experiencia de usuario.
Cuando mejoramos la experiencia de usuario en nuestra web, estamos aumentando el tiempo de permanencia en la web, evitamos rebotes y convertimos más. Estamos dando señales a Google para que nos valore positivamente.
Si solo estamos teniendo en cuenta los datos técnicos para optimizar el WPO creo que nos estamos equivocando. Debemos aplicar la lógica para acercarnos al usuario, renunciando en algunos casos a un valor en un parámetro que está ensuciando la experiencia de usuario.
Diseño web Vs Optimización WPO .
En muchas ocasiones nos enfrentamos a proyectos en los que la web se ha construido sin tener en cuenta el WPO de partida y nos piden que «arreglemos» la web para mejorar la velocidad de carga o el posicionamiento. Esto es siempre la crónica de una muerte anunciada porque terminamos cambiando tantas cosas que habría sido mejor hacer la web nueva.
Por esta razón, si estás arrancando un proyecto nuevo asegúrate de considerar de partida el WPO, quizás tengas que renunciar a ciertos artificios o juegos malabares en el diseño, pero seguro ganas en eficiencia. No son incompatibles en diseño web y la optimización WPO, son complementarios.
Mejorar los tiempos de carga.
La mejor forma para medir la velocidad de carga es utilizando las herramientas de desarrollador de Google Chrome. Con esta extensión podemos emular dispositivos y coneciones.
Con esta herramienta podemos ver el impacto que tiene CSS y JS en nuestro tiempo de carga.
Herramientas para medir y optimización WPO.
Abrimos en modo incognito sin extensiones activadas para evitar que se hagan peticiones extras y ensucien los resultados.
Para medir con las herramientas de desarrolladores, podemos abrir el inspector y desde la pestaña red podemos emular la navegación, el modelo de móvil y eliminar la caché del navegador.
Está bien comprobar la velocidad, pero los clientes suelen mirar Google pagespeed insights. El problema es que los test se hacen desde servidores de EEUU y no se pueden emular dispositivos.
Desde 2018 Google Lighthouse se implementa en todos los navegadores de Chrome y es capaz de medir más datos que PageSpeed. Esta herramienta emula un Motorola G4 con Android.
En Web.dev
Solo lighthouse mide con nuestros servidores.
PageSpeed mide con servidores de EEUU. Por esa razón las métricas son diferentes.
¿Por qué los datos varían en cuanto a velocidad de carga?
En teoría si se utilizan servidores externos, se deberían obtener los mismos datos. El problema es que se simula una pantalla de Motorola G4, se ralentiza 4 veces la velocidad del procesador. Esto hace que dependiendo de la latencia de la red y el ordenador que utilices, vas a obtener datos diferentes.
También las extensiones instaladas en los navegadores van mermar la puntuación en LightHouse y el Core Web Vital va a ser bajo.
¿Qué es core web vitals?
El Core Web Vital es una métrica que hace una media entre las puntuaciones de velocidad de carga que se obtienen entre los usuarios que visitan tu web. Por tanto, si tus usuarios utilizan dispositivos de baja gama, red wifi de poco ancho de banda o latencia y tienen activadas muchas extensiones en su navegador; vamos a tener datos de carga poco atractivos.
Por esta razón la velocidad de carga no es factor determinante, pero si lo son las buenas prácticas que te recomiendan las herramientas.
Parámetros a tener en cuenta.
FCP: 10%
Mide cuanto tiempo pasa desde la solicitud hasta que se empieza a dibujar en pantalla. En definitiva cuando empieza a ser visible.
Se puede mejorar con un plugin de cache que mejore la carga de js y css.
También influye la implementación http/2 en el hosting.
LCP: 25%
Cuanto tarda en cargarse el elemento más grande visible que suele ser la imagen. Esto retrasa el FCP.
Con el inspector podemos identificar el elemento que Google considera LCP.
Para mejorar, solo tenemos que identificarlo y optimizarlo para que cargue muy rápido.
CLS: 15%
Mide los desplazamientos de los elementos en pantalla durante la carga. Esto afecta a la navegación.
Deberíamos aproximar los parámetros estándar con los definitivos para evitar desplazamientos de contenido.
FID:
Mide el tiempo que tarda una web a ser interactiva desde que pulsamos un botón.
Mejorando FCP y LCP vamos a mejorar el FID.
TTI: 10%
Es el tiempo que tarda la web en ser interactiva una vez cargada la web. Solo se mejora agilizando el tiempo de carga (FCP y LCP).
TBT: 30%
Mide el tiempo perdido en tareas pesadas. Empieza a medir cuando termina la primera carga.
Optimizando los script por debajo de 50ms, vamos a mejorar esta métrica.
Las Core Web Vitals
LCP + FID + CLS
Tiempo de carga del elemento más grande + tiempo en ser interactiva + estabilidad de la página durante la carga
La extensión Web Vitals Extensión y Search Console nos dan datos de estos parámetros.
