Real User Monitoring (RUM)

Real User Monitoring (RUM) mide las Core Web Vitals en los navegadores de las personas que visitan tu sitio. Añades un pequeño script a tus páginas y LoadFocus muestra LCP, INP, CLS, FCP y TTFB en el percentil 75, por página y por dispositivo. También muestra qué los ralentiza: los elementos, imágenes y scripts detrás de las cifras, y cómo cambian según el país, el navegador, la conexión y el tipo de navegación.

Las ejecuciones de laboratorio te dicen lo rápida que puede ser una página desde una ubicación con un perfil de dispositivo. RUM te dice lo rápida que es para tus visitantes. También funciona donde los datos de campo del Chrome UX Report no muestran nada, porque no depende de que Google tenga suficiente tráfico de Chrome de tu sitio.

Añadir un sitio

1. Haz clic en RUM en la barra lateral de la app de page speed o abre speed.loadfocus.com/rum. La página lista tus sitios.
2. Haz clic en Añadir un sitio, escribe el Nombre del sitio y los Nombres de host en los que funciona, y haz clic en Crear sitio.
3. Abre el sitio y copia el snippet de Instalación. Pégalo en el <head> de cada página.

Separa los nombres de host con comas, hasta 10 por sitio. Solo se cuentan las visitas de esos nombres de host, y *.example.com cubre example.com y todos sus subdominios. La comprobación de nombres de host evita que tus cifras se ensucien por casualidad, pero la clave del sitio en el snippet es pública, así que trata las cifras como datos de visitantes, no como un control de seguridad.

Si tu sitio envía una Referrer-Policy: no-referrer estricta, el navegador no envía ningún origen con el beacon y esas visitas no se cuentan. Para un sitio así, marca Aceptar páginas vistas de páginas que no envían origen en los ajustes del sitio. El nombre de host se toma entonces del snippet, que cualquier página podría falsear, así que déjalo desactivado salvo que tu sitio lo necesite.

El snippet

<script async src="https://speed.loadfocus.com/rum.js" data-site="YOUR_SITE_KEY"></script>

El snippet de la página del sitio ya lleva tu clave. El script se carga después de tu página y envía un pequeño beacon cuando el visitante sale de la página u oculta la pestaña.

Tres ajustes opcionales:

• Muestreo. data-sample="0.25" mide una cuarta parte de las visitas. Las visitas que quedan fuera de la muestra no se miden en absoluto. La opción Medir encima del snippet, en la página del sitio, lo ajusta por ti.

• Nombres de página. Por defecto cada página se nombra por su ruta. Para agrupar páginas tú mismo, define window.LOADFOCUS_RUM_PAGE en la página, por ejemplo window.LOADFOCUS_RUM_PAGE = "/product/:id";.

• Versión fijada. En la página del sitio, Fijar esta versión (Subresource Integrity) te da un snippet que carga una copia congelada del script con su hash de integridad:

  <script async src="https://speed.loadfocus.com/rum.v1.js" integrity="sha384-..." crossorigin="anonymous" data-site="YOUR_SITE_KEY"></script>

  Nada que despliegue LoadFocus puede cambiar ese script, y el navegador lo rechaza si alguna vez no coincide con el hash. Copia el snippet de la página del sitio para tener el hash real. Para una versión posterior, instala el snippet nuevo. El snippet simple de rum.js carga siempre la versión actual.

Si tu sitio envía una Content-Security-Policy, permite https://speed.loadfocus.com en script-src (el script) y en connect-src (el beacon).

Qué se mide

LCP, INP y CLS son las Core Web Vitals. Los valores siguen las mismas reglas que la librería web-vitals de Google: el LCP se detiene en la primera interacción, el CLS es la mayor ráfaga de desplazamientos de diseño, el INP descarta un valor atípico por cada 50 interacciones y lo que se pinta en una pestaña abierta en segundo plano no cuenta. Cada visita se clasifica como móvil o escritorio.

Se envía un beacon por cada página vista. Una página restaurada desde la caché de avance y retroceso del navegador cuenta como una página vista nueva, igual que la reporta la librería web-vitals de Google.

No se cuentan las páginas vistas de bots, rastreadores, navegadores headless, herramientas de laboratorio como Lighthouse (incluidos los monitores de LoadFocus) ni scripts. La página del sitio muestra cuántas se dejaron fuera en las últimas 24 horas.

Privacidad

El script no usa cookies y no guarda nada en el navegador. Cada beacon lleva la ruta de la página, el tipo de dispositivo y los números, además de lo que los explica:

• Selectores CSS cortos de los elementos detrás del LCP, el INP y el CLS: la etiqueta, el id y hasta dos nombres de clase, nunca texto ni otros atributos.
• La dirección de la imagen LCP y del script más lento, sin la query string.
• El tipo de conexión y cómo se abrió la página (visita normal, recarga, atrás o adelante).

Además:

• La query string y el hash de la página nunca se envían.
• Los ids, números, tokens y direcciones de email en las rutas se agrupan como :id, de modo que /orders/48213 y /orders/48214 cuentan los dos como /orders/:id.
• La dirección IP del visitante se usa en memoria para saber el país y, como un hash que cambia cada día, para los límites de frecuencia. Nunca se guarda.

Las rutas y los ids de elementos vienen de tus propias páginas. Si una ruta puede llevar un nombre, por ejemplo /u/jane.doe, da a esas páginas un nombre común con window.LOADFOCUS_RUM_PAGE. No hay nada que añadir a un banner de cookies.

Leer el panel

Cada sitio tiene su propia página. Elige el Periodo (7 días, 28 días o 90 días) y verás:

• Una tarjeta por métrica con su p75, coloreada como bueno, necesita mejorar o deficiente, la proporción de visitas en cada franja y la proporción que es buena.
• Un gráfico diario del p75 de la métrica en la que hagas clic, con los umbrales de bueno y deficiente como líneas discontinuas y las visitas como barras tenues.
• Páginas: tus páginas más visitadas con sus visitas y el p75 de LCP, INP y CLS. Las páginas que superan las primeras 300 rutas distintas de un día se cuentan como (otras páginas). Pasa el ratón sobre el LCP de una página para ver sus cuatro fases.
• Dispositivos: la proporción de visitas y el p75 de LCP, INP y CLS para Móvil y Escritorio.

Las cifras aparecen pocos minutos después de las primeras visitas.

Cada sitio de la página RUM muestra Recibiendo datos o Esperando la primera página vista. Un p75 basado en menos de 30 visitas aparece en gris como Muy pocas para valorar, con su número, porque todavía puede variar mucho. Los días del gráfico son días UTC.

Qué ralentiza tus páginas

Debajo de las páginas y los dispositivos, cada sitio muestra qué hay detrás de sus cifras. Lo recoge el mismo snippet, así que no hay nada que configurar.

Qué ralentiza el LCP

Una barra divide el LCP en cuatro fases, cada una en el percentil 75:

• Tiempo hasta el primer byte: hasta que llega el primer byte de la página.
• Retraso de carga: desde ahí hasta que el navegador empieza a descargar la imagen LCP.
• Duración de carga: la descarga de la imagen.
• Retraso de renderizado: desde el final de la descarga hasta que se pinta la imagen o el texto.

Un LCP de texto no tiene retraso ni duración de carga. Cada fase es su propio percentil, así que las cuatro no suman el LCP de arriba. Debajo de la barra, Elemento lista los elementos que fueron el LCP como un selector CSS corto, con su tipo (Imagen o Texto), visitas y LCP, e Imagen lista las imágenes LCP por dirección.

Qué ralentiza el INP

Una barra divide la interacción más lenta de cada visita en Retraso de entrada (espera al hilo principal), Procesamiento (ejecución de los controladores de eventos) y Presentación (pintado del siguiente fotograma). Interacciones más lentas lista los elementos en los que la gente hizo clic, tocó o escribió, con el evento. Scripts que se ejecutaron durante la interacción más lenta lista el script que más tiempo se ejecutó durante ella, por dirección, con lo que lo inició (Iniciado por, por ejemplo event-listener). Solo Chrome y Edge informan de los scripts.

Qué se desplaza

Qué se desplaza lista el elemento que más se movió en la mayor ráfaga de desplazamientos de diseño de cada visita, con su CLS.

Cada una de estas tablas guarda hasta 100 elementos, imágenes o scripts distintos al día por sitio. El resto se cuenta como (otros elementos), (otras imágenes) u (otros scripts).

Desgloses

Desgloses muestra las visitas y el p75 de LCP, INP, CLS y TTFB por:

• País: a partir de la dirección IP del visitante, consultada al llegar la visita y no guardada. Hasta 60 países al día por sitio, el resto en Otros países. Los países proceden de datos GeoLite2 creados por MaxMind.
• Navegador: Chrome, Edge, Safari, Firefox, Samsung Internet, Opera u Otros navegadores.
• Conexión: el tipo de conexión efectivo que informa el navegador (4g, 3g, 2g, slow-2g). Solo Chrome, Edge y otros navegadores Chromium lo informan, así que las visitas con Safari y Firefox aparecen como No informado.
• Navegación: Visita normal, Recarga, Atrás o adelante, Caché atrás/adelante (una página restaurada al instante) y Prerrenderizada.

Alertas

En Alertas, en la página de un sitio, elige una métrica, escribe un umbral después de p75 por encima de, marca los canales de alerta en Avisar a y haz clic en Añadir alerta. Puedes añadir hasta 5 alertas por sitio. Cada una se comprueba cada hora con los datos de hoy y de ayer (UTC), cuando hay al menos 30 visitas medidas. Recibes un mensaje cuando el p75 supera el umbral y otro cuando vuelve a estar por debajo. Las alertas van a los canales de alerta de tu equipo.

Marcadores de despliegue

Para ver tus lanzamientos en el gráfico diario, envía un marcador con la clave del sitio (el valor de data-site del snippet) como configId:

curl -X POST "https://speed.loadfocus.com/api/test/applighthouse/annotations" \
  -H "loadfocus-auth: YOUR_API_KEY" -H "content-type: application/json" \
  -d '{"label":"Deployed v1.4.2","configId":"YOUR_SITE_KEY"}'

Los marcadores enviados sin configId aparecen en todos los sitios y monitores. Más detalles en Bloqueo de builds en CI y marcadores de despliegue.

Límites

Las visitas se cuentan por equipo. La página muestra cuántas has usado este mes. Cuando se alcanza el límite, las nuevas visitas no se cuentan hasta el mes siguiente.

Para cambiar el nombre o los nombres de host de un sitio, usa Editar sitio. Eliminar sitio borra el sitio y todos sus datos.

Relacionado

• Datos de campo de usuarios reales (CrUX)
• Métricas Core Web Vitals
• Largest Contentful Paint