Web Vitals

Las Métricas web son una iniciativa de Google que brinda orientación unificada sobre los indicadores de calidad de las páginas web, que son esenciales para ofrecer una excelente experiencia del usuario en la Web. Su objetivo es simplificar la amplia variedad de herramientas disponibles de medición del rendimiento y ayudar a los propietarios de sitios a centrarse en las métricas más importantes, las Métricas web esenciales.

Métricas web esenciales

Las Métricas web esenciales son un subconjunto que se aplican a todas las páginas web, deben medirse todos los propietarios de sitios y se muestran 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 fundamental centrado en el usuario.

Las métricas que conforman 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. Incluye las métricas siguientes:

Recomendaciones del umbral de procesamiento de imagen con contenido más grande Recomendaciones sobre el umbral del retraso de primera entrada Recomendaciones del umbral de Cambio de diseño acumulado
  • Largest Contentful Paint (LCP): Mide el rendimiento de la carga. Para proporcionar una buena experiencia del usuario, el LCP debe ocurrir en un plazo de 2.5 segundos después del momento en que la página comienza a cargarse.
  • Retraso de primera entrada (FID): Mide la interactividad. Para proporcionar una buena experiencia del usuario, las páginas deben tener un FID de 100 milisegundos o menos.
  • Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia del usuario, se debe mantener un CLS de 0.1. o menos.

En cada una de estas métricas, a fin de garantizar que alcances el objetivo recomendado para la mayoría de los usuarios, un buen umbral para medir es el percentil 75 de las cargas de páginas, segmentadas entre dispositivos móviles y computadoras de escritorio.

Las herramientas que evalúan el cumplimiento de las Métricas web esenciales deben considerar que una página cumple con los objetivos recomendados en el percentil 75 para cada una de estas tres métricas.

Ciclo de vida

Las métricas del segmento de Métricas web esenciales atraviesan un ciclo de vida que consta de tres fases: experimental, pendiente y estable.

Las tres fases del ciclo de vida de las métricas web esenciales, visualizadas como una serie de tres comillas simples. De izquierda a derecha, las fases son Experimental, Pendiente y Estable.
Las etapas del ciclo de vida de las Métricas web esenciales.

Cada fase está diseñada para indicar a los desarrolladores cómo deben pensar en cada métrica:

  • Las métricas experimentales son potenciales Métricas web esenciales que aún podrían estar en proceso de cambios significativos según las pruebas y los comentarios de la comunidad.
  • Las métricas pendientes son las Métricas web esenciales futuras que pasaron la etapa de prueba y comentarios, y que tienen un cronograma bien definido para estabilizarse.
  • Las métricas estables son el conjunto actual de Métricas web esenciales que Chrome considera esenciales para brindar excelentes experiencias del usuario.

Las Métricas web esenciales se encuentran en las siguientes etapas del ciclo de vida:

Para obtener más información sobre el desarrollo de INP, consulta Avance de la interacción a Next Paint.

Experimental

Cuando una métrica se desarrolla inicialmente y entra en el ecosistema, se considera una métrica experimental.

El propósito de la fase experimental es evaluar la aptitud de una métrica. Primero, se explora el problema a resolver y, si es posible, se itera sobre las métricas anteriores que podrían no haber abordado. Por ejemplo, INP se desarrolló inicialmente como una métrica experimental para abordar los problemas de rendimiento del entorno de ejecución de la Web de manera más integral que el retraso de primera entrada (FID).

La fase experimental del ciclo de vida de las Métricas web esenciales también está diseñada para brindar flexibilidad en el desarrollo de una métrica, ya que identifica errores y, además, explora cambios en su definición inicial. También es la fase en la que el feedback de la comunidad es más importante.

Pendiente

Cuando el equipo de Chrome determina que una métrica experimental recibió suficientes comentarios y probó su eficacia, se convierte en una métrica pendiente. Las métricas pendientes se retienen 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 más desarrolladores comienzan a usar la métrica.

Estable

Cuando se finaliza una métrica candidata para las métricas web esenciales, se convierte en una métrica estable. Aquí es cuando la métrica puede convertirse en una Métrica web esencial.

Las métricas estables son compatibles de forma activa y pueden estar sujetas a correcciones de errores y cambios de definición. Las métricas estables de Métricas web esenciales no cambiarán más de una vez al año. Cualquier cambio en una Métrica web esencial se comunicará de forma clara en la documentación oficial de la métrica y en su registro de cambios. También se incluyen las métricas web esenciales en cualquier evaluación.

Punto clave: Las métricas estables no son necesariamente permanentes. Una métrica estable se puede retirar y reemplazar por otra métrica que aborde el área problemática de manera más eficaz.

Mide y genera informes sobre las Métricas web esenciales

Google considera 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 detallan las herramientas que admiten las Métricas web esenciales.

Herramientas de campo para medir las Métricas web esenciales

En el Informe sobre la experiencia del usuario en Chrome, se recopilan datos de medición anónimos y reales del usuario para cada Métrica web esencial. Esos datos les permiten a los propietarios de sitios evaluar rápidamente su rendimiento sin necesidad de configurar manualmente estadísticas para sus páginas, y potencian herramientas como PageSpeed Insights y el informe de Métricas web esenciales de Search Console.

Los datos que proporciona el Informe sobre la experiencia del usuario en Chrome ofrecen una forma rápida de evaluar el rendimiento del sitio, pero no proporcionan la telemetría detallada por vista de página que suele ser necesaria para diagnosticar, supervisar y reaccionar rápidamente a las regresiones con precisión. Por lo tanto, recomendamos que los sitios configuren su propia supervisión de usuario real.

Mide las Métricas web esenciales en JavaScript

Cada una de las Métricas web esenciales se puede medir en JavaScript mediante APIs web estándar.

La forma más fácil de medir todas las Métricas web esenciales es usar la biblioteca de JavaScript web-vitals, un wrapper de API pequeño y listo para la producción que mide cada métrica de una manera que coincide de manera precisa con la forma en que las herramientas de Google las informan.

Con la biblioteca web-vitals, medir cada métrica es tan simple como llamar a una sola función (consulta la documentación para ver los detalles completos del uso y la API):

import {onCLS, onFID, 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);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

Después de configurar tu sitio para usar la biblioteca web-vitals a fin de medir y enviar los datos de las Métricas web esenciales a un extremo de estadísticas, el siguiente paso es agregar esos datos y generar informes sobre ellos para ver si tus páginas cumplen con los umbrales recomendados para 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 Métricas web esenciales, incluso aquellos que no lo hacen deberían incluir funciones básicas de métricas personalizadas que te permitan medir las Métricas web esenciales en su herramienta.

Un ejemplo de esto es el Informe de Métricas web, que permite a los propietarios de los sitios medir sus Métricas web esenciales con Google Analytics. Si deseas obtener orientación para medir las Métricas web esenciales con otras herramientas de estadísticas, consulta Prácticas recomendadas para medir las Métricas web esenciales en el campo.

También puedes generar informes sobre cada una de las Métricas web esenciales sin escribir ningún código con la extensión de Chrome de Métricas web. Esta extensión usa la biblioteca web-vitals para medir cada una de estas métricas y mostrarlas a los usuarios mientras navegan por la Web.

Esta extensión puede ser útil para comprender el rendimiento de tus propios sitios, los de la competencia y la Web en general.

  LCP FID CLS
web-vitals
Extensión de Métricas web

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 la implementación:

Si deseas 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 Métricas web esenciales

Si bien todas las Métricas web esenciales son, ante todo, métricas de campo, muchas de ellas también se pueden medir en el lab.

La medición del lab es la mejor manera de probar el rendimiento de las funciones durante el desarrollo. También es la mejor manera de detectar regresiones de rendimiento antes de que ocurran.

Las siguientes herramientas se pueden usar para medir las Métricas web esenciales en un entorno de lab:

  LCP FID CLS
Herramientas para desarrolladores de Chrome (usa TBT en su lugar)
Lighthouse (usa TBT en su lugar)

Las herramientas como Lighthouse que cargan páginas en un entorno simulado sin un usuario no pueden medir el FID porque no tienen entradas del usuario. Sin embargo, la métrica del tiempo de bloqueo total (TBT) se puede medir en función de un lab y es un excelente proxy para el FID. Las optimizaciones de rendimiento que mejoran la TBT en el lab deberían mejorar el FID en el campo. Para obtener más información, consulta Recomendaciones para mejorar tus puntuaciones.

Aunque la medición de labs es una parte esencial para ofrecer experiencias excelentes, no reemplaza la medición de campo. El rendimiento de un sitio puede variar considerablemente según las capacidades del dispositivo del usuario, su estado de red, los otros procesos que se puedan ejecutar en el dispositivo y la forma en la que interactúen con la página. De hecho, la puntuación de cada una de las Métricas web esenciales puede verse afectada por la interacción del usuario. Solo la medición de campo puede capturar el panorama completo con precisión.

Recomendaciones para mejorar tus puntuaciones

En las siguientes guías, se ofrecen recomendaciones específicas para optimizar las páginas en función de cada una de las Métricas web esenciales:

Otras métricas web

Aunque las Métricas web esenciales son métricas fundamentales para comprender y ofrecer una excelente experiencia del usuario, también existen otras métricas vitales.

Estas otras Métricas web suelen servir como métricas proxy o complementarias para las Métricas web esenciales para ayudar a capturar una parte más amplia de la experiencia o ayudar en el diagnóstico de un problema específico.

Por ejemplo, el tiempo hasta el primer byte (TTFB) y el primer procesamiento de imagen con contenido (FCP) son aspectos vitales de la experiencia de carga y ambos son útiles para diagnosticar problemas con LCP (tiempos de respuesta del servidor o recursos de bloqueo de renderización lentos, respectivamente).

De manera similar, una métrica como el Tiempo de bloqueo total (TBT) es una métrica de lab vital para detectar y diagnosticar posibles problemas de interactividad que pueden afectar el FID y el INP. Sin embargo, no forma parte del conjunto de Métricas web esenciales porque no se puede medir en un campo ni refleja un resultado centrado en el usuario.

Cambios en las Métricas web

Las Métricas web y las Métricas web esenciales representan los mejores indicadores disponibles que los desarrolladores tienen hoy en día para medir la calidad de la experiencia en la Web. Sin embargo, estos indicadores no son perfectos y se espera que se agreguen mejoras o se agreguen mejoras en el futuro.

Las Métricas web esenciales son relevantes para todas las páginas web y se incluyen en las herramientas relevantes de Google. Debido a que los cambios en estas métricas tienen un impacto amplio, los desarrolladores deben esperar que las definiciones y los umbrales de las Métricas web esenciales sean estables, así como un aviso previo y un programa predecible de actualizaciones.

Las otras Métricas web suelen ser específicas del contexto o de la herramienta, y pueden ser más experimentales que las Métricas web esenciales. Por lo tanto, sus definiciones y umbrales podrían cambiar con mayor frecuencia.

Para todas las Métricas web, los cambios se documentan en este registro de cambios público.