Cuando queremos rankear en primeras posiciones en Google, el WPO (la velocidad de la página) es uno de los factores más importantes y aún así muchos de nosotros lo cuidamos poco.
Pensad que aunque tengas el mejor contenido, si tarda mucho en cargar una web y el usuario no puede navegar por ella,se ira.
Para que los usuarios naveguen felices por nuestras y reducir las malas experiencias, Google nos «pide» a que mejoremos la experiencia del usuario en lo que tiene que ver con el rendimiento de la web.
Para evaluar lo felices que son los usuarios cuando navegan por nuestra web, Google necesita medir lo que pasa en nuestro sitio y no basarse en suposiciones. Una vez medido lo feliz que es nuestro usuario, debe de definir lo qué es una buena experiencia de usuario y para ello implemento nuevas metricas.
El pasado mes de mayo, Google implemento lo que llamo: Core Web Vitals. A mi entender una de las metricas que mas van a dar que hablar durante los siguientes meses, que se usara para medir las experiencias de los usuarios en la web.
¿Qué son las Core Vitals Web ?
Según he podido leer, Google ha decidido usar tres métricas llamadas «Core Web Vitals». Estas métricas son:
- LCP
- CLS
- FID
¿Qué es el LCP en los Core Web Vitals?
Con el LCP lo que se intenta medir es cuando un sitio web es visible para el usuario y muestra el contenido visible dentro del viewport del usuario.
Esto no quiere decir que sea cuando el esté completamente cargado. A continuación se presentan ejemplos de sitios web que muestran diferentes LCP:
¿Qué es la CLS en Web Vitals?
CLS trata de medir los movimientos inesperados en una página
Esta es mi favorita, especialmente para las páginas de los móviles. CLS mide cuánto se mueven las cosas inesperadamente después de que se pida el recurso.
El ejemplo que nos pone Google es el de los banners que aparecen de la nada en la parte de arriba de la web y que mueven el contenido sobre el que ibas ha hacer click hacia abajo.
En el gif de aquí abajo se ve mas claro como estaba apunto de hacer click sobre «NO» y en el ultimo momento hace un pedido de 14 productos. Esto es un gran Dark Patern como diría mi colega Marc pero a partir de ahora debemos de andarnos con ojo.
¿Que es el FID de Core Web Vitals?
La metrica de FID intenta medir la primera impresion que tienen los usuarios sobre nuestro sitio.
Dicho de otro modo es el tiempo que se tarda desde que un usuario hace alguna accion sobre nuestra pagina hasta que el navegador da respuesta a ese accion.
Por ejemplo: Es desde que un usuario hace click en un enlace hasta que el navegador realmente recibe la orden de navegar a otro enlace.
¿Cómo puedes medir los Core Vital Web de un sitio y usarlos?
Lo mejor de los Web Vitals es que se pueden medir sin afectar el rendimiento de tu sitio web y que con ello cargue mas lenta.
Asi puedes tomar una decisión basada en datos mirando y no basada en la tipica herramienta de velocidad que se ejecuta desde nuestro equipo (depende mucho de la velocidad que tengamos contratada) o desde un servidor en la otra punta del mundo.
El script de Web Vitals se puede añadir a cualquier sitio web o aplicación de muchas maneras como te explican en Github, mi recomendacion es que lo pruebes en alguno de tus sitios y veas los resultados que da, a mi personalemente me gusta bastante.
https://github.com/GoogleChrome/web-vitals
Si lo haces lo mas seguro es que quieras que esos datos se vean reflejados en algun sitio y yo te recomiendo, Google Analytics.
Como usar los Core Web Vitals a Google Analytics
Una forma sencilla de usar estos datos en Analytics es usar una CDN y colocar el código de mas abajo en GA. Hay que tener en cuenta que este codigo se debe de implementar en dos partes: una en el Header y otra en el Footer
Este es el código que crea que los eventos en Analytics:
<!-- Add to Header -->
<script src="https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js"></script>
<!-- Add to Footer -->
<script>
function sendToGoogleAnalytics({name, delta, id}) {
// Assumes the global `ga()` function exists, see:
// https://developers.google.com/analytics/devguides/collection/analyticsjs
ga('send', 'event', {
eventCategory: 'Web Vitals',
eventAction: name,
// Google Analytics metrics must be integers, so the value is rounded.
// For CLS the value is first multiplied by 1000 for greater precision
// (note: increase the multiplier for greater precision if needed).
eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
// The `id` value will be unique to the current page load. When sending
// multiple values from the same page (e.g. for CLS), Google Analytics can
// compute a total by grouping on this ID (note: requires `eventLabel` to
// be a dimension in your report).
eventLabel: id,
// Use a non-interaction event to avoid affecting bounce rate.
nonInteraction: true,
});
}
addEventListener('DOMContentLoaded', function() {
webVitals.getCLS(sendToGoogleAnalytics);
webVitals.getFID(sendToGoogleAnalytics);
webVitals.getLCP(sendToGoogleAnalytics);
});
</script>¿Cómo instalar Web Vitals a través de GTM?
Según he leído es poco recomendable la implementación de la medición de Core Web Vitals con GTM por que dicen que es poco fiable, a decir verdad yo lo hice y no me dio problemas pero suelo usar el método que os enseñe mas arriba.
Otra opción es instalar Core Web Vitals en la base de código y luego introducir los datos a través del GTM a la plataforma con la que hagas tus análisis.
En Github Google te dar diferentes opciones para hacerlo.
https://github.com/GoogleChrome/web-vitals
Ver los Core Web Vitals con una Extension de Chrome
Se pueden ver los Core Web Vitals a través de las herramientas de desarrollo de Chrome o instalando el plugin de Web Vitals Chrome. Una vez instalado, verás un icono cuadrado que parpadeará en rojo o verde dependiendo de tu puntuación Web Vital. Es muy sencillo.
¿Qué puedes hacer con los Core Web Vitals?
Cuando ya metes los eventos de Core Web Vitals , puedes usar los datos para comprender mejore como funciona tu sitio web con los datos de varios usuarios de diferentes lugares y distintos navegadores, en lugar de sacar esos datos únicamente de las herramientas antes mencionadas que sólo usarian las configuraciones del servidor de la herramienta online o tu propio equipo.
Como se ven los datos de Core Web Vitals en Google Analytics
Encontré una plantilla para poder ver todos los Core Web Vitals y la modifique a mi gusto. Os la comparto un poco mas abajo. Con esta plantilla podrás ver la información de una forma que te sea mas útil.
Haz click sobre la imagen es el enlace a la plantilla – Tan solo es una plantilla. No se pueden acceder a tus datos desde ella.
Esta plantilla te permite ver las tres diferentes métricas en múltiples formatos.
Promedio de la métrica de las Core Web Vital por localizacion
Esto le permite tener vigiladas las métricas por ciudades dentro de la región marcada, en este caso Sur de Europa (Seguro que sabréis cambiarlo, es fácil). Me parece super útil con la métrica CLS, ya que se puede mostrar un contenido diferente para cada país.
Por ejemplo, si tu pagina esta enfocada a diferentes países los banner con políticas legales, etc. pueden hacer que empeoren según sea sus requerimientos para la web (por ejemplo las cookies) y con esta métrica se podrá ver esto.
La media diaria de las métricas de Core Web Vitals en GA
El promedio móvil diario te ayuda controlar los picos. Yo recomiendo vigilar el sitio cuando se hace una modificación de un sitio web (modificaciones de hardware de server, de software en server, actualizaciones de cms, de plugins, etc. ) de esa manera podras ver si lo que has tocado afecta al rendimiento de tu sitio.
La media de la página web de la métrica vital
El promedio de los valores vitales de la web permite ver las peores páginas para cada valor, lo que te ayudara a investigar que es lo que ocurre en esas urls.
La plantilla esta bastante bien y es bastante completa pero lo mejor seria mostrar esos datos en Data studio para exprimirlos mas a fondo
Por ejemplo, puedes usar Data Studios para filtrar datos por navegadores y tipos de dispositivos, resoluciones, etc.
Estare atento por si salen nuevas versiones de la plantilla y puedo añadirlas.
