Optimizar la calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio en la Web. Independientemente de si eres propietario de una empresa, especialista en marketing o desarrollador, las Métricas web pueden ayudarte a cuantificar la experiencia en tu sitio y a identificar oportunidades para mejorar.
Descripción general
Las Métricas web son una iniciativa de Google para proporcionar una guía 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 sobre él. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que a otros les resulta difícil mantenerse al día con la abundancia de herramientas y métricas.
Los propietarios de sitios no deberían ser expertos en rendimiento para comprender la calidad de la experiencia que brindan a sus usuarios. El objetivo de la iniciativa de Métricas web 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 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 para 2020 se centra en tres aspectos de la experiencia del usuario (carga, interactividad y estabilidad visual) e 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 excelentes experiencias 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 ingresa al 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 por resolver y, luego, se puede iterar sobre las métricas anteriores que no se pudieron abordar. Por ejemplo, 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 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 también explora cambios en su definición inicial. También es la fase en la que más importante el feedback de la comunidad.
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, INP pasó del estado experimental a pendiente con la intención de retirar el FID finalmente.
En esta fase, las métricas pendientes se mantienen 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. Aquí es cuando la métrica se puede convertir 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 en la 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 web esencial se comunicará de forma clara en la documentación oficial de la métrica, así como en su registro de cambios. Las Métricas web esenciales también se incluyen en todas las evaluaciones.
Herramientas para medir las Métricas web esenciales y generar informes sobre ellas
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 PageSpeed Insights y el Informe de Métricas web esenciales de Search Console.
| LCP | INP | CLS | |
| Informe sobre la experiencia del usuario en Chrome | |||
| PageSpeed Insights | |||
| Search Console (informe de Métricas web esenciales) |
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 brinda la telemetría detallada y por vista de página que suele ser necesaria para diagnosticar con precisión y supervisar las regresiones, así como para reaccionar rápidamente a ellas. 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 las APIs web estándar.
La forma más sencilla 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 manera en que todas las herramientas de Google que se mencionaron anteriormente las informan.
Con la biblioteca web-vitals, puedes realizar la medición de cada métrica llamando a una sola función (consulta la documentación para conocer todos los detalles 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 que use la biblioteca web-vitals para medir y enviar tus datos de 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 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.
Un ejemplo de esto es el Informe de Métricas web, que permite a los propietarios de 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 para 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 sitios de la competencia y la Web en general.
| LCP | INP | 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, en su lugar, estas guías de métricas para los detalles de 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 lab.
La medición de labs es la mejor manera de probar el rendimiento de las funciones durante el desarrollo, antes de que se lancen para los usuarios. Además, es la mejor manera de detectar regresiones de rendimiento antes de que sucedan.
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 | (usa TBT en su lugar) | ||
| Faro | (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 en función de las capacidades del dispositivo del usuario, las condiciones de la red, los otros procesos que se estén ejecutando en el dispositivo y la forma en que interactúe con la página. De hecho, la interacción del usuario puede afectar cada una de las métricas web esenciales. 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 sobre cómo optimizar tus páginas para cada una de las Métricas web esenciales:
Otras Métricas web
Si bien las Métricas web esenciales son fundamentales para comprender y brindar una excelente experiencia del usuario, existen otras métricas de asistencia.
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 LCP (tiempos de respuesta del servidor lentos o recursos de bloqueo de renderización, respectivamente).
De manera similar, una métrica como Total Blocking Time (TBT) es una métrica del lab vital para detectar y diagnosticar posibles problemas de interactividad que pueden afectar al 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 esenciales representan los mejores indicadores disponibles que tienen los desarrolladores en la actualidad para medir la calidad de la experiencia en la Web. Sin embargo, estos indicadores no son perfectos y se espera que se realicen mejoras o adiciones en el futuro.
Las Métricas web esenciales son relevantes para todas las páginas web y se muestran en las herramientas de Google relevantes. Los cambios en estas métricas tendrán un impacto de gran alcance. Como tales, 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 con claridad en este CHANGELOG público.