CrUX Vis: cómo Google muestra lo que realmente sienten sus usuarios

Datos de laboratorio y de campo

Lighthouse y WebPageTest miden la velocidad del sitio en condiciones controladas: un dispositivo, una red, una ejecución. Esto es útil durante el desarrollo, pero los visitantes reales abren el sitio desde teléfonos lentos, a través de una red móvil, con decenas de pestañas en segundo plano. Por eso un sitio puede recibir una alta puntuación en Lighthouse y, aun así, parecer lento para los usuarios.

Los datos de campo sobre visitas reales los recopila el Chrome User Experience Report (CrUX) — un informe de Google basado en estadísticas anonimizadas de usuarios de Chrome que aceptaron enviarlas. CrUX Vis — una herramienta gratuita para ver esos datos en forma de gráficos.

Qué es CrUX Vis

Según la documentación de Chrome, CrUX Vis es un panel que muestra datos históricos semanales desde el CrUX History API. Lo principal:

No todos los sitios y páginas tienen datos: se necesita tráfico suficiente. Para una URL concreta a menudo no hay datos, incluso si los hay para el sitio en general.

Qué métricas muestra

Las principales son los Core Web Vitals:

INP se convirtió en la métrica principal de interactividad el 12 de marzo de 2024 y sustituyó a FID. Si en informes o artículos antiguos aparece FID, es una métrica obsoleta.

Además, CrUX Vis muestra métricas auxiliares de carga — FCP, TTFB, RTT — así como métricas de publicidad. La evaluación se hace por el percentil 75: una métrica se considera buena si al menos el 75 % de las visitas entran en la norma.

Cómo leer los gráficos

1. Introduce la dirección del sitio o la página y selecciona el tipo de dispositivo. Empieza por teléfonos: en la mayoría de sitios las métricas son peores allí.
2. Mira no un solo valor, sino la tendencia de hasta 40 semanas. Un empeoramiento brusco suele coincidir con un despliegue: un nuevo script de analítica, un widget, una imagen pesada en la primera pantalla.
3. Compara la proporción de visitas «buenas», «que requieren mejora» y «malas». El valor medio puede parecer aceptable mientras que una cuarta parte de los visitantes tiene una mala experiencia.
4. Ten en cuenta el retardo: los datos se recopilan en periodos de 28 días, por lo que el efecto de una corrección aparece en CrUX solo tras varias semanas.

Qué hacer con métricas malas

• LCP. Reducir el tiempo de respuesta del servidor (TTFB), optimizar y etiquetar correctamente la imagen principal (formato moderno, tamaño apropiado, sin carga diferida para la primera pantalla), eliminar CSS y scripts que bloqueen el renderizado.
• INP. Dividir tareas largas de JavaScript, eliminar manejadores de eventos pesados, posponer scripts de terceros (chats, widgets, analítica), no hacer trabajo innecesario en cada pulsación.
• CLS. Especificar dimensiones para imágenes y elementos embebidos, reservar espacio para anuncios y banners, no insertar contenido encima de lo ya renderizado.

Otras fuentes de los mismos datos

Para automatizar —por ejemplo, para comparar las métricas con semanas anteriores tras cada despliegue— se usa CrUX History API: proporciona los mismos datos que muestra CrUX Vis en formato JSON.

Ejemplo de consulta (se necesita una clave API de Google Cloud):

curl -s "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"origin": "https://example.com", "formFactor": "PHONE", "metrics": ["largest_contentful_paint", "interaction_to_next_paint", "cumulative_layout_shift"]}'

Limitaciones

• Solo Chrome. Los visitantes de Safari y Firefox no están incluidos en los datos.
• Se necesita tráfico. Un sitio nuevo o pequeño puede no tener datos en absoluto.
• No hay datos en tiempo real. Para reaccionar al instante ante empeoramientos se necesita una recopilación propia de métricas en el sitio (RUM), por ejemplo la librería web-vitals.

Conclusión

CrUX Vis es la forma más rápida de ver cómo funciona un sitio para los visitantes reales y cómo ha cambiado en los últimos meses. Las pruebas de laboratorio ayudan a encontrar la causa, y los datos de campo de CrUX muestran si los usuarios notaron el resultado.

Enlaces útiles: documentación de CrUX Vis, Core Web Vitals.