Publicado el 4 de mayo de 2020
Optimizar la calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio web. Tanto si es propietario de una empresa, especialista en marketing o desarrollador, Web Vitals pueden ayudarlo a cuantificar la experiencia de su sitio y a identificar oportunidades de mejora.
Descripción general
Web Vitals es una iniciativa de Google para proporcionar orientación unificada sobre los indicadores de calidad que son esenciales para ofrecer una excelente experiencia del usuario en la Web.
A lo largo de los años, Google proporcionó varias herramientas para medir el rendimiento y generar informes al respecto. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que otros consideran que la abundancia de herramientas y métricas dificulta mantenerse al día.
Los propietarios de sitios no deberían tener que ser expertos en rendimiento para comprender la calidad de la experiencia que ofrecen a sus usuarios. La iniciativa de las Métricas web tiene como objetivo simplificar el panorama y ayudar a los sitios a enfocarse en las métricas más importantes, las Métricas web esenciales.
Métricas web esenciales
Las Core Web Vitals son el subconjunto de Web Vitals que se aplican a todas las páginas web. Todos los propietarios de sitios deben medirlas y aparecerán en todas las herramientas de Google. Cada una de las Métricas web esenciales representa una faceta distinta de la experiencia del usuario, se puede medir en el campo y refleja la experiencia del mundo real de un resultado crítico centrado en el usuario.
Las métricas que componen las Métricas web esenciales evolucionarán con el tiempo. El conjunto actual se centra en tres aspectos de la experiencia del usuario: carga, interactividad y estabilidad visual, y, además, incluye las siguientes métricas (y sus respectivos umbrales):
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para brindar una buena experiencia del usuario, el LCP debe ocurrir dentro de los 2.5 segundos posteriores a que la página comienza a cargarse.
- Interaction to Next Paint (INP): Mide la interactividad. Para proporcionar una buena experiencia del usuario, las páginas deben tener una INP de 200 milisegundos o menos.
- Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia del usuario, las páginas deben mantener un CLS de 0.1 o menos.
Para asegurarte de que alcanzas el objetivo recomendado para estas métricas en la mayoría de tus usuarios, un buen umbral de medición es el percentil 75 de las cargas de página, segmentadas entre dispositivos móviles y computadoras.
Las herramientas que evalúan el cumplimiento de las Métricas web esenciales deben considerar que una página aprueba si cumple con los objetivos recomendados en el percentil 75 para las tres métricas de las Métricas web esenciales.
Lifecycle
Las métricas de Core Web Vitals pasan por un ciclo de vida que consta de tres fases: experimental, pendiente y estable.
Cada fase está diseñada para indicar a los desarrolladores cómo deben pensar en cada métrica:
- Las métricas experimentales son posibles Core Web Vitals que aún pueden estar sujetas a cambios significativos según las pruebas y los comentarios de la comunidad.
- Las métricas pendientes son futuras Core Web Vitals que superaron la etapa de pruebas y comentarios, y tienen un cronograma bien definido para convertirse en estables.
- Las métricas estables son el conjunto actual de Core Web Vitals que Chrome considera fundamentales para brindar experiencias del usuario excelentes.
Las Core Web Vitals se encuentran en las siguientes etapas del ciclo de vida:
Experimental
Cuando una métrica se desarrolla inicialmente y entra en el ecosistema, se considera una métrica experimental.
El objetivo de la fase experimental es evaluar la adecuación de una métrica. Para ello, primero se explora el problema que se debe resolver y, posiblemente, se itera sobre lo que las métricas anteriores no lograron abordar. Por ejemplo, la Interaction to Next Paint (INP) se desarrolló inicialmente como una métrica experimental para abordar los problemas de rendimiento del tiempo de ejecución presentes en la Web de forma más integral que el First Input Delay (FID).
La fase experimental del ciclo de vida de Core Web Vitals también tiene como objetivo brindar flexibilidad en el desarrollo de una métrica, ya que permite identificar errores y hasta explorar cambios en su definición inicial. También es la fase en la que los comentarios de la comunidad son más importantes.
Pendiente
Cuando el equipo de Chrome determina que una métrica experimental recibió suficientes comentarios y demostró su eficacia, se convierte en una métrica pendiente. Por ejemplo, en 2023, el INP pasó de experimental a pendiente con la intención de retirar el FID.
Las métricas pendientes se mantienen en esta fase durante un mínimo de seis meses para que el ecosistema tenga tiempo de adaptarse. Los comentarios de la comunidad siguen siendo un aspecto importante de esta fase, ya que cada vez más desarrolladores comienzan a usar la métrica.
Estable
Cuando se finaliza una métrica candidata de Core Web Vitals, se convierte en una métrica estable. Es entonces cuando la métrica puede convertirse en una métrica web esencial.
Las métricas estables reciben asistencia activa y pueden estar sujetas a correcciones de errores y cambios en la definición. Las métricas de Core Web Vitals estables no cambiarán más de una vez al año. Cualquier cambio en una métrica de Core Web Vitals se comunicará claramente en la documentación oficial de la métrica, así como en su registro de cambios. Las Core Web Vitals también se incluyen en las evaluaciones.
Herramientas para medir y generar informes sobre Core Web Vitals
Google cree que las Métricas web esenciales son fundamentales para todas las experiencias web. Como resultado, se compromete a mostrar estas métricas en todas sus herramientas populares. En las siguientes secciones, se detalla qué herramientas admiten las Métricas web esenciales.
Herramientas de campo para medir las Métricas web esenciales
El Informe sobre la experiencia del usuario en Chrome recopila datos de medición anónimos de usuarios reales para cada métrica de Core Web Vitals. Estos datos permiten a los propietarios de sitios evaluar rápidamente su rendimiento sin necesidad de instrumentar manualmente las estadísticas en sus páginas y potencian herramientas como las Herramientas para desarrolladores de Chrome, PageSpeed Insights y el informe de Core Web Vitals de Search Console.
| LCP | INP | CLS | |
| Chrome User Experience Report | |||
| Herramientas para desarrolladores de Chrome | |||
| PageSpeed Insights | |||
| Search Console (informe de Core Web Vitals) |
Los datos que proporciona el Informe sobre la experiencia del usuario en Chrome ofrecen una forma rápida de evaluar el rendimiento de los sitios, pero no proporcionan la telemetría detallada por vista de página que a menudo es necesaria para diagnosticar, supervisar y reaccionar rápidamente ante las regresiones con precisión. Por lo tanto, recomendamos que los sitios configuren su propia supervisión de usuarios reales.
Cómo medir las Métricas web esenciales en JavaScript
Cada una de las Core Web Vitals se puede medir en JavaScript con las APIs web estándares.
La forma más sencilla de medir todas las Core Web Vitals es usar la biblioteca de JavaScript web-vitals, un wrapper pequeño y listo para producción alrededor de las APIs web subyacentes que mide cada métrica de una manera que coincide con precisión con la forma en que se registran en todas las herramientas de Google mencionadas anteriormente.
Con la biblioteca web-vitals, se puede medir cada métrica llamando a una sola función. Consulta la documentación para obtener detalles completos sobre el uso y la API.
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Una vez que hayas configurado tu sitio para usar la biblioteca web-vitals para medir y enviar tus datos de Core Web Vitals a un extremo de Analytics, el siguiente paso es agregar esos datos y generar informes sobre ellos para ver si tus páginas cumplen con los umbrales recomendados en al menos el 75% de las visitas a la página.
Si bien algunos proveedores de estadísticas tienen compatibilidad integrada con las métricas de Core Web Vitals, incluso aquellos que no la tienen deberían incluir funciones básicas de métricas personalizadas que te permitan medir las Core Web Vitals en su herramienta.
Los desarrolladores que prefieran medir estas métricas directamente con las APIs web subyacentes pueden usar estas guías de métricas para obtener detalles de implementación:
Para obtener orientación adicional sobre cómo medir estas métricas con servicios de estadísticas populares o tus propias herramientas de estadísticas internas, consulta Prácticas recomendadas para medir las Métricas web en el campo.
Herramientas de lab para medir las Core Web Vitals
Si bien todas las Core Web Vitals son, ante todo, métricas de campo, muchas de ellas también se pueden medir en el lab.
La medición en el lab es la mejor manera de probar el rendimiento de las funciones durante el desarrollo, antes de que se lancen para los usuarios. También es la mejor manera de detectar las regresiones de rendimiento antes de que ocurran.
Se pueden usar las siguientes herramientas para medir las Métricas web esenciales en un entorno de laboratorio:
| LCP | INP | CLS | |
|---|---|---|---|
| Herramientas para desarrolladores de Chrome | |||
| Lighthouse | (usa TBT en su lugar) |
Si bien la medición en el laboratorio es una parte esencial para brindar experiencias excelentes, no sustituye a la medición en el campo.
El rendimiento de un sitio puede variar considerablemente según las capacidades del dispositivo del usuario, las condiciones de su red, los otros procesos que se puedan estar ejecutando en el dispositivo y la forma en que interactúa con la página. De hecho, la interacción del usuario puede afectar la puntuación de cada una de las métricas de Core Web Vitals. Solo la medición de campo puede capturar con precisión el panorama completo.
Recomendaciones para mejorar tus puntuaciones
En las siguientes guías, se ofrecen recomendaciones específicas para optimizar tus páginas en función de cada una de las Core Web Vitals:
Existen muchas formas de mejorar las Métricas web esenciales, y cada enfoque tiene diferentes niveles de impacto, relevancia y facilidad de uso para cada situación. Consulta Las formas más eficaces de mejorar las Core Web Vitals para obtener una lista breve de las principales recomendaciones del equipo de Chrome.
Otras métricas Web Vitals
Si bien las Métricas web esenciales son las métricas críticas para comprender y ofrecer una excelente experiencia del usuario, existen otras métricas complementarias.
Estas otras métricas pueden servir como proxy o como métricas complementarias para las tres Core Web Vitals, y ayudar a captar una mayor parte de la experiencia o a diagnosticar un problema específico.
Por ejemplo, las métricas Tiempo hasta el primer byte (TTFB) y Primer procesamiento de imagen con contenido (FCP) son aspectos vitales de la experiencia de carga y son útiles para diagnosticar problemas con el LCP (tiempos de respuesta del servidor lentos o recursos que bloquean el procesamiento, respectivamente).
Del mismo modo, una métrica como el Tiempo de bloqueo total (TBT) es una métrica de laboratorio fundamental para detectar y diagnosticar posibles problemas de interactividad que pueden afectar el INP. Sin embargo, no forman parte del conjunto de Core Web Vitals porque no se pueden medir en el campo ni reflejan un resultado centrado en el usuario.
Cambios en Web Vitals
Las Web Vitals y las Core Web Vitals representan los mejores indicadores disponibles que tienen los desarrolladores hoy en día para medir la calidad de la experiencia en la Web, pero estos indicadores no son perfectos y se deben esperar mejoras o adiciones en el futuro.
Las Métricas web esenciales son relevantes para todas las páginas web y se destacan en las herramientas pertinentes de Google. Los cambios en estas métricas tendrán un impacto de gran alcance. Por lo tanto, los desarrolladores deben esperar que las definiciones y los umbrales de las Core Web Vitals sean estables, y que las actualizaciones se anuncien con aviso previo y tengan una cadencia anual predecible.
Las otras métricas web suelen ser específicas de un contexto o una herramienta, y pueden ser más experimentales que las Core Web Vitals. Por lo tanto, sus definiciones y umbrales pueden cambiar con mayor frecuencia.
En el CHANGELOG público, se documentarán claramente todos los cambios relacionados con Web Vitals.