Optimizar la calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio en la Web. Gracias a nuestro continuo compromiso y colaboración con millones de desarrolladores web y propietarios de sitios, hemos desarrollado muchas métricas y herramientas útiles en todos los servicios de Google para ayudar a propietarios de empresas, profesionales de marketing y desarrolladores a identificar oportunidades que les permitan mejorar la experiencia de los usuarios. Sin embargo, para muchos, la gran cantidad de métricas y herramientas crea un desafío de priorización, claridad y consistencia.
Hoy nos complace anunciar un nuevo programa:
Web Vitals, una iniciativa de Google que proporciona una guía unificada de indicadores de calidad que son esenciales para ofrecer una gran experiencia al usuario en la Web.
Core Web Vitals
Medir la calidad de la experiencia del usuario tiene muchas facetas, la mayoría de las cuales son específicas del sitio y del contexto. No obstante, hay un conjunto común de indicadores, "Core Web Vitals", que es fundamental para todas las experiencias de la Web. Esas
necesidades principales de experiencia del usuario incluyen la experiencia de carga, la interactividad y la estabilidad visual del contenido de la página, y combinadas son la base de los Core Web Vitals 2020.
Retraso de primera entrada mide la capacidad de respuesta y cuantifica la experiencia que los usuarios tienen al tratar de interactuar con la página por primera vez.
Cambio de diseño acumulado mide la estabilidad visual y cuantifica la cantidad de cambios de diseño inesperados del contenido de la página visible.
Todas estas métricas registran resultados importantes orientados en los usuarios, se
miden por campo y tienen herramientas y equivalentes métricos de diagnóstico de laboratorio que las respaldan. Por ejemplo, si bien Procesamiento de imagen con contenido más grande es la métrica de carga de la línea superior, también depende en gran medida de
Primer procesamiento de imagen con contenido (FCP) y
Tiempo hasta el primer byte (TTFB), que siguen siendo fundamentales durante los procesos de supervisión y optimización.
Cómo se miden las métricas de Core Web Vitals
Nuestro objetivo es hacer que Core Web Vitals sea simple y fácil de acceder y medir para todos los propietarios y desarrolladores de sitios, tanto en las plataformas de Google como en sus propios paneles y herramientas.
El
Informe de UX de Chrome permite a los propietarios evaluar rápidamente el rendimiento de su sitio para cada Web Vital, tal como lo experimentan los usuarios reales de Chrome. El conjunto de datos de BigQuery ya aparece en los histogramas accesibles al público para todos los Core Web Vitals, y estamos trabajando en una nueva API de REST que hará que acceder a la URL y a los datos de nivel de origen sea simple y fácil. Pronto brindaremos más información al respecto.
Les recomendamos a todos los propietarios de sitios que recopilen sus propias
estadísticas de medición de usuarios reales para cada Core Web Vital. Para ello, varios navegadores, incluido Google Chrome, han implementado y admitido todas las especificaciones del borrador actual de Core Web Vitals:
Procesamiento de imagen con contenido más grande,
Inestabilidad de diseño y
Tiempos del evento. Asimismo, hoy estamos lanzando una biblioteca de JavaScript de
web-vitals de código abierto que proporciona un wrapper pequeño y listo para la producción, que se puede usar con cualquier proveedor de estadísticas que admita métricas personalizadas, o bien a modo de referencia de cómo registrar con precisión cada uno de los Core Web Vitals para los usuarios de tu sitio.
// Ejemplo de uso de web-vitales para medir CLS, FID y LCP, y generar informes al respecto.
import {getCLS, getFID, getLCP} from 'web-vitals';
function reportToAnalytics(data) {
const body = JSON.stringify(data);
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS((metric) => reportToAnalytics({cls: metric.value}));
getFID((metric) => reportToAnalytics({fid: metric.value}));
getLCP((metric) => reportToAnalytics({lcp: metric.value}));
|
En nuestro proceso de prueba y desarrollo, hemos descubierto lo valioso que es tener fácil acceso al estado de cada Core Web Vital, tanto en la etapa de desarrollo como mientras navegamos por la Web. Para ayudar a los desarrolladores a detectar las oportunidades de optimización, también publicamos un vista previa de la nueva
extensión de
Core Web Vitals Esta extensión muestra un indicador visual en Chrome sobre el estado de cada métrica mientras navegas por la Web y, en el futuro, también te permitirá ver los datos agregados del usuario real (proporcionados por el Informe de UX de Chrome) acerca del estado de cada métrica respecto de la URL y el origen actuales.
Cómo evolucionarán las métricas de Core Web Vitals
El conjunto actual de Core Web Vitals 2020 no es un conjunto completo de métricas que registra la experiencia ideal del usuario en la Web. Esperamos actualizar Core Web Vitals anualmente y proporcionar actualizaciones frecuentes sobre las posibles métricas nuevas, la motivación y el estado de implementación.
Mirando hacia 2021, estamos invirtiendo en el desarrollo de una mejor comprensión y capacidad para medir la velocidad de la página y otras características fundamentales de la experiencia del usuario. Entre esos cambios, se incluyen ampliar la capacidad de medir la latencia de entrada en todas las interacciones, no solo en la primera; nuevas métricas para medir y cuantificar la fluidez; métricas primitivas y de apoyo que permitirán ofrecer experiencias para mantener la instantaneidad y la privacidad en la Web; y muchas otras más.
Ilya Grigorik, ingeniero de rendimiento web
