Optimizar la calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio de la Web. Independientemente de si es propietario de una empresa, especialista en marketing o desarrollador, las Métricas web pueden ayudarlo a cuantificar la experiencia de su sitio y a identificar oportunidades de mejora.
Descripción general
Las Métricas web son una iniciativa de Google que brinda 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 una serie de herramientas para medir el rendimiento y generar informes sobre él. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que otros consideran difícil seguirles el ritmo de la abundancia de herramientas y métricas.
Los propietarios de los 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
Son el subconjunto de Métricas web esenciales que se aplican a todas las páginas web. Todos los propietarios de sitios deben medirlas y se mostrará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 en el 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 de 2020 se enfoca 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 la 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.
- Interacción a la siguiente pintura (INP): Mide la interactividad. Para brindar 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 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 se apruebe una página si cumple con los objetivos recomendados en el percentil 75 para las tres métricas web esenciales.
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.
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:
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 explorando el problema a resolver y, posiblemente, iterar sobre las métricas que no se pudieron abordar con anterioridad. 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 forma 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 e incluso 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 probó su eficacia, se convierte en una métrica pendiente. Por ejemplo, en 2023, INP pasó de estado experimental a pendiente con la intención de retirar el FID finalmente.
En esta fase, las métricas pendientes se retienen 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 de candidato 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 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á claramente 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 y generar informes de las Métricas web esenciales
Google considera que las Métricas web esenciales son fundamentales para todas las experiencias web. Por lo tanto, tiene el compromiso de 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 de los usuarios para cada Métrica web esencial. Estos datos les permiten a los propietarios de sitios evaluar rápidamente su rendimiento sin necesidad de instrumentar manualmente estadísticas en sus páginas, y potencian 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 proporcionan la telemetría detallada por vista de página que suele ser necesaria para diagnosticar, supervisar y reaccionar rápidamente ante las regresiones con precisión. Como resultado, 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 sencilla de medir todas las Métricas web esenciales es usar la biblioteca de JavaScript web-vitals, un wrapper pequeño listo para la producción en torno a las APIs web subyacentes que mide cada métrica de manera que coincida con la manera en que las informan todas las herramientas de Google que se mencionaron anteriormente.
Con la biblioteca de web-vitals, puedes medir cada métrica llamando a una sola función (consulta la documentación para ver los detalles completos del 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 de web-vitals a fin de 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 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 el artículo 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 mediante 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 | 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 estas guías de métricas para obtener detalles de 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 análisis 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, antes de que estén disponibles para 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 | (usa TBT en su lugar) | ||
| Lighthouse | (usa TBT en su lugar) |
Si bien la medición de laboratorio es una parte esencial para ofrecer experiencias excelentes, no reemplaza la medición de campo.
El rendimiento de un sitio puede variar sustancialmente según las capacidades del dispositivo del usuario, su condición de red, los otros procesos que se puedan ejecutar en el dispositivo y la forma en la que estos 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
Las siguientes guías ofrecen recomendaciones específicas sobre cómo optimizar tus páginas en función de cada una de las Métricas web esenciales:
Otras métricas web
Si bien las Métricas web esenciales son métricas fundamentales para comprender y ofrecer una excelente experiencia del usuario, existen otras métricas que lo respaldan.
Estas otras métricas pueden servir como proxy (o como métricas complementarias para las tres Métricas web esenciales) para captar una parte más amplia de la experiencia o ayudar en el diagnóstico de 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 fundamentales de la experiencia de carga y son útiles para diagnosticar problemas con LCP (tiempos de respuesta del servidor o recursos de bloqueo de renderización lentos, respectivamente).
Del mismo modo, una métrica como el Tiempo de bloqueo total (TBT) es una métrica de lab que resulta esencial para detectar y diagnosticar posibles problemas de interactividad que pueden afectar el INP. Sin embargo, no forma parte del conjunto de Métricas web esenciales porque no se pueden medir en campos 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 tienen los desarrolladores actualmente para medir la calidad de la experiencia en la Web. Sin embargo, no son perfectos, y es de esperarse 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 de Google relevantes. Los cambios en estas métricas tendrán un impacto de amplio 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 de forma clara en este REGISTRO DE CAMBIOS público.