Ofrecer la mejor experiencia web a nuestros usuarios, dando importancia a la calidad, es la clave para a largo plazo, el éxito en cualquier sitio web.
Las Métricas Web Principales o Core Web Vitals (CWV como lo seguiremos llamando) es iniciativa de Google para guiar respecto a las señales de calidad esenciales para brindar a los visitantes de nuestra web, la mejor y excelente experiencia de usuario.
Ya no es necesario ser experto para medir, analizar e informar sobre el rendimiento de los sitios web. Cualquier propietario puede entender estos conceptos que benefician a sus usuarios cumpliendo con el objetivo de la herramienta que es centrarse en los datos y métricas más importantes.
CWV debe ser medido y aparecerá en todas las herramientas de Google, cada uno de los CWV representa una faceta distinta de la experiencia del usuario; sus métricas evolucionan continuamente y para el 2020 se centró en tres aspectos de la experiencia del usuario:
- Carga – LCP.
- Interactividad – FID.
- Estabilidad visual – CLS.
CLS – LCP – FID
A continuación, vamos a relacionar de cada una de estas tres herramientas:
CLS – Cumulative Layout Shif
En español traduce “Cambio de diseño acumulativo” y mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de entre 0,1 y 0,25 segundos.
La distancia medida y la fracción de la ventana gráfica que se desplaza debido a la manipulación del DOM o la falta de atributos de dimensión para los principales elementos multimedia. Cuando no podemos definir las dimensiones de nuestras imágenes de héroe, por ejemplo, el texto de nuestras páginas primero parece que solo se desplaza, lo que provoca un “cambio” de diseño de contenido disruptivo para nuestros usuarios.
Qué influye:
- Cambio de diseño
- Área de impacto
- Distancia
- Imágenes sin ancho o alto
- Carga de fuentes personalizadas
- Contenido cargado dinámicamente
Qué hacer:
- Área de impacto, fracción de distancia
- Área que ocupa los elementos impactados
- ¿Cuánto se desplaza el contenido?
- Usar ancho y alto
- Precargar fuentes (FOIT/FOUT)
- Evitar cargar contenido encima de otro que ya existe
Rango mínimo y máximo
- Entre 0.1 y 0.25 milisegundos.
LCP – Largest Contentful Paint
En español traduce “Pintura con contenido más grande” y mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, LCP debe ocurrir dentro de menos de 2.5 y máximo 4.0 segundos desde que la página comienza a cargarse.
El intervalo de tiempo entre el inicio de la carga de una página y el momento en que se representa por completo la imagen o el bloque de texto más grande en la ventana gráfica de un usuario. Es posible que vea que la puntuación cambia a medida que se carga la página y cuando el contenido es visible, pero el nodo más grande aún está en la lista de trabajos pendientes y aún no se muestra. Esto se hace más notorio en las velocidades de conexión aceleradas.
Qué influye:
- Velocidad del servidor.
- Bloqueos de renderizado por CSS y JavaScript.
- Carga de recursos.
Qué hacer:
- Optimizar el servidor.
- Usar CDN.
- Cachear recursos.
- Precargar recursos ajenos.
- Optimizar carga crítica.
- Minificar archivos como JS, CSS, inline CSS crítico, deferer JS.
- Precargar recursos (rel=”preconnect”).
Rango mínimo y máximo
- Entre 2.5 y 4.0 segundos.
FID – First Input Delay
En español traduce “Retardo de la primera entrada” y mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 y un máximo de 300 milisegundos.
La cantidad de tiempo que tarda una página en estar lista para la interactividad del usuario, lo que significa que a medida que las páginas se ensamblan, cuánto tiempo tarda la página en responder a los clics, desplazamientos o entradas del teclado procesando sus correspondientes controladores de eventos. La interacción del usuario puede retrasarse significativamente debido a las principales tareas de secuencia de comandos de bloqueo de subprocesos.
Qué influye:
- Ejecución de scripts
- Cargar datos
- Scripts de terceros
- Reducir el tiempo de ejecución
Qué hacer:
- Optimizar el código, fragmentar según carga
- Priorizar la carga
- Atributos en una etiqueta script (async o defer)
Rango mínimo y máximo
- Entre 100 y 300 milisegundos.
Google ha dicho que el informe CWV que encontramos en la cuenta correspondiente al sitio web en el Google Search Console, muestra básicamente estas tres métricas: LCP, FID y CLS. Si una URL no tiene una cantidad mínima de datos de informes para cualquiera de estas métricas, se omite del informe. Una vez que una URL tiene una cantidad mínima de datos para cualquier métrica, el estado de la página es el estado de la métrica de menor rendimiento.
Para asegurarse que se está alcanzando el objetivo en las tres métricas de evaluación de CWV, se recomienda un 75% de carga y aprobación de una página, segmentado en dispositivos móviles y de escritorio.
¿Cuánto influyen las métricas del core web vitals?
Aunque las principales métricas con CLS, LCP y FID, Google tiene en cuenta seis en total y estos son los porcentajes de influencia de cada una:
- 25% LCP – Larguest Contentful Paint.
- 25% TBT – Total BLocking Time.
- 15% FCP – First Content Paint.
- 15% TTI – Time To Interactive.
- 15% SI – Speed Index.
- 5% CLS – Cumulative Layout Shift.
Hora de las herramientas
Ahora compartimos algunas herramientas que nos servirán para medir y posteriormente mejorar el rendimiento en nuestros sitios web:
PageSpeed Insights
Esta debería ser la primera parada para medir CWV. Se obtienen en un informe, datos de laboratorio y datos de campo (cuando están disponibles). También entrega otras métricas relacionadas en gran medida con la mejora de las páginas fallidas, y en particular los hallazgos que afectan la velocidad de una página y la descarga de sus activos. Mejora la velocidad de tus páginas web en todos los dispositivos (móviles y escritorio) aun cuando es casi imposible llegar al 100% de optimización, nos ayuda bastante acerca de qué mejorar.
Enlace a PageSpeed Insights
Extensión Chrome Web Vitals para Chrome
Con esta extensión de Chrome, puede acceder a los datos CWV (CLS, LCP y FID) en la carga de la página y puede interactuar con ella para solucionar problemas en caso de que tenga problemas de retraso en la primera entrada o cambio en el diseño del contenido. También está disponible página a página mientras navega por diferentes sitios web.
Enlace a la extensión Web Vitals
WebPageTest
Con esta herramienta independiente de prueba de velocidad, puede configurar su enfoque con una variedad de condiciones (múltiples ubicaciones en el mundo, utilización de navegadores reales, verdaderas velocidades de conexión de consumidor, pruebas simples y avanzadas, captura de video, bloqueo de contenido y mucho más). Entrega resultados con información de diagnóstico, gráficos en cascada de carga de recursos, comprobaciones de optimización de velocidad de página y sugerencias de mejoras. Creada por ingenieros de Google que forman parte del equipo de Chromium, la información es tan fidedigna como cualquier otra que obtenga de Google y hace que las API RESTful estén disponibles.
Enlace a WebPageTest
Consola de búsqueda de Google.
Google Search Console permite verificar la propiedad de su sitio web para ser usada en Google, debe hacerlo para obtener ayuda y poder profundizar en áreas problemáticas con páginas que presenten fallas. Puede profundizar para localizar grupos de páginas con problemas similares. En última instancia, lo vincula a PageSpeed Insights.
Enlace a Google Search Console
API de JavaScript de Web Vitals
Con el uso de JavaScript podrá acceder a las métricas directamente desde el navegador y transmitirlas a un repositorio de su elección. Alternativamente, puede introducir la prueba en su proceso de desarrollo y asegurarse de que los cambios que realice no afecten negativamente sus puntajes después de pasar a producción. Puede introducir alguna de las bibliotecas de JavaScript Web Vitals en su flujo de trabajo.
Enlace a las API de Web Vitals
Herramientas de desarrollo de Chrome
El propio Google Chrome proporciona el último conjunto de herramientas para descubrir o rastrear problemas utilizando la información altamente detallada disponible en los informes y las grabaciones de carga de páginas en la pestaña “Rendimiento”. La amplia gama de estas herramientas, interruptores y opciones sin fin, son ideales para el trabajo de optimización más exigente.
Enlace a Chrome DevTools
Lighthouse
Es una extensión del navegador Google Chrome para analizar el actual rendimiento. También viene con varios puntos de acceso que pueden ser útiles en su flujo de trabajo de desarrollo, incluye varias pruebas adicionales que pueden ayudar a garantizar su adherencia a los estándares web modernos. Lighthouse puede ayudarlo a depurar situaciones en las que está solucionando problemas de Web Vitals.
Enlace a la extensión
Enlace a la documentación
Prueba de optimización para móviles
Es una de las mejores formas de prepararse probando cómo Google considera sus páginas web, de forma que sean aptas para dispositivos móviles y puede lograrlo mediante el uso de esta herramienta de prueba.
Enlace al test amigable para móviles
Finalizando…
Cuando la actualización de la experiencia de la página sea lanzada el próximo mes de mayo de 2021, Google solo usará señales de experiencia, incluidos Core Web Vitals, para clasificar los resultados de búsqueda móvil, no desde el escritorio.
El énfasis en la experiencia de la página ha estado claramente en los dispositivos móviles, pero ahora Google está haciendo explícito que “en este momento” está dirigido solo a las experiencias móviles de los usuarios cuando se trata de clasificación.
Queda por ver cuánto impacto en la clasificación tendrá la actualización en los resultados móviles, pero la relevancia y la calidad del contenido seguirán superando los factores de experiencia.
