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 eres propietario de una empresa, especialista en marketing o desarrollador, Web vitals puede ayudarte a cuantificar la experiencia de tu sitio y a identificar oportunidades para mejorar.
Descripción general
Las Métricas web son una iniciativa de Google que ofrece 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 que es difícil seguirles el ritmo a la abundancia de herramientas y métricas.
No es necesario que los propietarios de los sitios sean expertos en rendimiento para comprender la calidad de la experiencia que ofrecen 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 un subconjunto de las Métricas web 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 conforman las Métricas web esenciales evolucionarán con el tiempo. El conjunto actual para 2020 se enfoca 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 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.
- 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, las páginas deben mantener un CLS de 0.1. o menos.
En cada una de las métricas anteriores, 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 se aprueba si cumple con los objetivos recomendados en el percentil 75 para las tres métricas anteriores.
Ciclo de vida
Las métricas del segmento de Métricas web esenciales pasan por un ciclo de vida que consta de tres fases: experimental, pendiente y estable.
En la siguiente tabla, se muestra la ubicación actual de todas las Métricas web esenciales en su ciclo de vida:
Cada fase está diseñada para indicar a los desarrolladores cómo deberían considerar cada métrica:
- Las métricas experimentales son potenciales Métricas web esenciales que aún pueden estar sufriendo 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.
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, posiblemente, se itera 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 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 y hasta 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 comprobó su eficacia, se convierte en una métrica pendiente. En esta fase, las métricas pendientes se mantienen durante un mínimo de seis meses para darle tiempo al ecosistema para adaptarse. El único obstáculo que falta para que una métrica avance más allá de la fase pendiente es esperar a que finalice el período de transición. 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. Para las métricas que están en el segmento de Métricas web esenciales, significa que se convierte en una métrica web esencial.
Las métricas estables se admiten 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 por año. Cualquier cambio que se realice en una métrica web principal 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 y generar informes de 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 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 de usuarios reales y anonimizados para cada métrica web principal. 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 PageSpeed Insights y el Informe de Métricas web esenciales de Search Console.
| LCP | FID | 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, a menudo, es necesaria para diagnosticar con precisión las regresiones, supervisarlas y reaccionar rápidamente ante 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 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 listo para la producción en torno a las APIs web subyacentes que mide cada métrica de manera que coincida de manera precisa con la forma en que todas las herramientas de Google mencionadas anteriormente lo 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);
Una vez que hayas configurado tu sitio para usar la biblioteca web-vitals a fin de medir y enviar tus 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 las Métricas web esenciales, incluso aquellos que no lo hacen deben incluir funciones básicas de las 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 sitios medir sus Métricas web esenciales con Google Analytics. Si deseas obtener orientación sobre cómo medir las Métricas web esenciales con otras herramientas de estadísticas, consulta Prácticas recomendadas para medir las Métricas web 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 | ✔ | ✔ | ✔ |
Como alternativa, los desarrolladores que prefieren medir estas métricas directamente a través de las APIs web subyacentes pueden consultar estas guías de métricas para obtener detalles de implementación:
- Cómo medir el LCP en JavaScript
- Cómo medir el FID en JavaScript
- Cómo medir la métrica CLS en JavaScript
Herramientas de lab para medir las Métricas web esenciales
Si bien todas las Métricas web esenciales son, antes que nada, 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 se lancen para los usuarios. También es la mejor manera de detectar las 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 | ✔ | ✘ (usar TBT en su lugar) | ✔ |
| Lighthouse | ✔ | ✘ (usar TBT en su lugar) | ✔ |
Si bien la medición del lab es una parte esencial para ofrecer experiencias excelentes, no reemplaza la medición de campo.
El rendimiento de un sitio puede variar drásticamente según las capacidades del dispositivo del usuario, las condiciones de la red, los otros procesos que se puedan ejecutar en el dispositivo y la forma en la que interactúe con la página. De hecho, la interacción del usuario puede afectar la puntuación de 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
Una vez que hayas medido las Métricas web esenciales y que hayas identificado las áreas de mejora, el siguiente paso es la optimización. Las siguientes guías 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 métricas fundamentales para comprender y ofrecer una excelente experiencia del usuario, también hay otras métricas vitales.
Estas otras Métricas web suelen servir como proxy o métricas complementarias para las Métricas web esenciales a fin de ayudar a capturar una parte más grande de la experiencia o para ayudar 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 de LCP (tiempos de respuesta lentos del servidor o recursos de bloqueo de la renderización, respectivamente).
Del mismo modo, las métricas como el Tiempo de bloqueo total (TBT) y el Tiempo de interacción (TTI) son métricas de lab fundamentales para detectar y diagnosticar posibles problemas de interactividad que afectarán el FID. Sin embargo, no forman parte del conjunto de Métricas web esenciales porque no se pueden medir en el campo ni reflejan un resultado centrado en el usuario.
Evolución de las Métricas web
Las Métricas web y las Métricas web esenciales representan los mejores indicadores disponibles que los desarrolladores tienen actualmente para medir la calidad de la experiencia en la Web. Sin embargo, estos indicadores no son perfectos y se esperan mejoras o adiciones futuras.
Las Métricas web esenciales son relevantes para todas las páginas web y se destacan 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 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 REGISTRO DE CAMBIOS público.