Fecha de publicación: 4 de mayo de 2020
Optimizar la calidad de la experiencia del usuario es fundamental para el éxito a largo plazo de cualquier sitio de la Web. Tanto si es propietario de una empresa, especialista en marketing o desarrollador, las Métricas web le permiten cuantificar la experiencia de su sitio, así como identificar oportunidades de mejora.
Descripción general
Las métricas web son una iniciativa de Google para brindar 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 ha proporcionado varias herramientas para medir y generar informes sobre el rendimiento. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que otros encuentran que la abundancia de herramientas y métricas es un desafío seguir el ritmo.
Los propietarios de sitios no deben ser expertos en rendimiento para comprender la calidad de la experiencia que ofrecen a sus usuarios. El objetivo de la iniciativa Web Vitals es 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 Métricas web esenciales son el subconjunto de Métricas web que se aplican a todas las páginas web, deben medirse todos los propietarios de sitios y se mostrarán en todas las herramientas de Google. Cada una de las Métricas web esenciales representa una faceta distintiva 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 conforman las Métricas web esenciales evolucionarán con el tiempo. El conjunto actual se enfoca en tres aspectos de la experiencia del usuario: carga, interactividad y estabilidad visual, y incluye las siguientes métricas (y sus respectivos umbrales):
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para proporcionar una buena experiencia del usuario, el LCP debe ocurrir en un plazo de 2.5 segundos a partir del momento en 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 un 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 alcanzar el objetivo recomendado para estas métricas para la mayoría de tus usuarios, un buen umbral para medir es el percentil 75 de cargas de páginas, segmentadas en dispositivos móviles y computadoras de escritorio.
Las herramientas que evalúan el cumplimiento de las Métricas web esenciales deben considerar el pase de una página si esta cumple con los objetivos recomendados en el percentil 75 para las tres métricas web esenciales.
Lifecycle
Las métricas del segmento de Métricas web esenciales pasan por un ciclo de vida que consta de tres fases: experimentales, pendientes y estables.
Cada fase está diseñada para indicar a los desarrolladores cómo deberían considerar cada métrica:
- Las métricas experimentales son Métricas web esenciales potenciales que podrían estar experimentando 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 pruebas y comentarios, y 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 una excelente experiencia del usuario.
Las Métricas web esenciales se encuentran en las siguientes etapas del ciclo de vida:
Experimental
Cuando una métrica se desarrolla inicialmente y entra al ecosistema, se considera una métrica experimental.
El propósito de la fase experimental es evaluar la idoneidad 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 pudieron abordar. Por ejemplo, la interacción a la siguiente pintura (INP) se desarrolló inicialmente como una métrica experimental para abordar los problemas de rendimiento del entorno de ejecución presentes en la Web de forma más integral que el retraso de primera entrada (FID).
El objetivo de la fase experimental del ciclo de vida de las Métricas web esenciales también es 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 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 ser experimental a pendiente con la intención de retirar el FID en algún momento.
Las métricas pendientes se mantienen en esta fase durante un mínimo de seis meses para darle tiempo al ecosistema para 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 de Core Web Vital, se convierte en una métrica estable. Es en este momento 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 de Métricas web esenciales 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 el registro de cambios de la métrica. Las Métricas web esenciales también se incluyen en cualquier evaluación.
Herramientas para medir y generar 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 compatibles con 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 anónimos y reales de medición del usuario para cada Métrica web esencial. Estos datos permiten que los propietarios de sitios evalúen rápidamente su rendimiento, sin necesidad de que instrumenten manualmente las estadísticas de sus páginas. Además, se usan en herramientas como Herramientas para desarrolladores de Chrome, PageSpeed Insights y el informe de Métricas web esenciales de Search Console.
| LCP | INP | CLS | |
| Informe de experiencia del usuario de Chrome | |||
| 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 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 usuarios reales.
Mide las Métricas web esenciales en JavaScript
Cada una de las métricas web esenciales se puede medir en JavaScript con 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 pequeño y listo para la 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 informan todas las herramientas de Google que se mencionaron 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 y medir y enviar tus datos de Métricas web esenciales 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 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 web esenciales, incluso aquellos que no la tienen deben incluir funciones de métricas personalizadas básicas que te permitan medir las métricas web esenciales 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 conocer los detalles de la implementación:
Para obtener orientación adicional sobre cómo medir estas métricas con los servicios de estadísticas populares o con 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 laboratorio.
La medición de lab es la mejor manera de probar el rendimiento de las funciones durante el desarrollo, antes de que se lancen a los usuarios. 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 | INP | CLS | |
|---|---|---|---|
| Herramientas para desarrolladores de Chrome | |||
| Lighthouse | (usa TBT en su lugar) |
Si bien la medición de labs es esencial para brindar experiencias excelentes, no reemplaza la medición de campos.
El rendimiento de un sitio puede variar considerablemente según las capacidades del dispositivo del usuario, las condiciones de la red, los otros procesos que se pueden 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 las Métricas web esenciales. Solo las mediciones de campo pueden 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 para cada una de las métricas web esenciales:
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. Para obtener una breve lista de las principales recomendaciones del equipo de Chrome, consulta Las formas más eficaces de mejorar las Métricas web esenciales.
Otras métricas web
Si bien las métricas web esenciales son las métricas fundamentales para comprender y ofrecer una excelente experiencia del usuario, existen otras métricas de respaldo.
Estas otras métricas pueden servir como proxy (o como métricas complementarias para las tres Métricas web esenciales) para ayudar a capturar una parte más grande 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 lab vital para detectar y diagnosticar posibles problemas de interactividad que pueden afectar la INP. Sin embargo, no forma parte del conjunto de Métricas web esenciales porque no se pueden medir en el campo ni reflejan 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 en la actualidad para medir la calidad de la experiencia en la Web, pero estos indicadores no son perfectos y se esperan mejoras o incorporaciones 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. Los cambios en estas métricas tendrán un impacto amplio. Por lo tanto, los desarrolladores deben esperar que las definiciones y los umbrales de las Métricas web esenciales sean estables, y que las actualizaciones tengan un aviso previo y una cadencia anual predecible.
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 pueden cambiar con mayor frecuencia.
Para todas las Métricas web, los cambios se documentarán claramente en este CHANGELOG público.