PerformanceObserver para la salud de una aplicación web

PerformanceObserver permite recibir entradas de rendimiento cuando el navegador las entrega. Sirve para una pregunta propia y concreta, como saber si una ruta muestra su contenido principal dentro del objetivo del servicio. No es un diagnóstico completo, una prueba del dispositivo ni permiso para conservar todos los tiempos. Aquí se describen los límites del observador, la selección de entradas, la agregación y el coste.

Papel de PerformanceObserver

Crea un observador con una función de retorno y solicita solo los tipos que responden a una decisión. observe({ type: 'navigation', buffered: true }) puede incluir una entrada de navegación ya creada; paint puede incluir pintura si el navegador la admite. Detecta cada tipo y trata una lista vacía como evidencia válida, sin inventar valores.

const allowed = new Set(['navigation', 'paint', 'largest-contentful-paint']);
const samples = [];
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (allowed.has(entry.entryType))
      samples.push({ type: entry.entryType, startTime: entry.startTime, duration: entry.duration });
  }
});
try {
  observer.observe({ type: 'paint', buffered: true });
} catch {
  /* la página sigue disponible */
}
observer.disconnect();

La especificación W3C Performance Timeline define el modelo común y la referencia MDN de PerformanceObserver documenta sus opciones. Ninguna fuente garantiza todos los tipos en todos los navegadores ni que una entrada revele la causa de una demora.

Seleccionar entradas útiles

Parte de un resultado visible para la persona. Las entradas de navegación describen hitos del documento; las de pintura indican un resultado visual; las de recursos pueden señalar una clase de dependencia propia. Las tareas largas muestran posible presión del hilo principal, pero no identifican por sí solas su causa. Usa un tipo por decisión y registra el contexto comparable.

Situación	Registro	Acción
Tipo compatible con entradas	tipo permitido, agregado y versión	comparar con el objetivo aprobado
Tipo sin entradas	`entry-empty` y contexto	continuar sin duración sintética
Tipo no compatible	`entry-unsupported`	usar la alternativa y mantener la tarea
Se alcanza el límite	`sample-cap-reached`	detener captura y agregar muestras
Fin o cancelación	`observer-disconnected`	ignorar callbacks tardíos y limpiar

Una entrada del navegador no es una verdad del servidor. BotBrowser puede ejecutar recorridos autorizados y comparar resultados visibles, pero no garantiza los mismos tipos, planificación o salud de producción en todos los entornos.

Agregar y minimizar datos

Conserva solo tipo, duración acotada o intervalo, id de fixture, versión y resultado. Evita URL, consultas, texto, cuentas y un historial por usuario. Redacta nombres, prefiere percentiles o conteos y caduca un id de diagnóstico después de la ventana aprobada. Copia campos seleccionados a un registro propio y limita muestras y tiempo de observación.

El estado de caché, visibilidad, páginas restauradas, planificación y versiones puede cambiar las observaciones. Etiqueta esos contextos. La falta de datos no justifica crear un identificador alternativo ni combinar entradas con otras señales para inferir una persona o dispositivo.

Probar el coste del observador

Compara el mismo fixture con el observador activado y desactivado. Revisa finalización visible, cantidad de callbacks, memoria retenida y agregado. Repite con cola llena, cancelación, navegación y tipo no compatible. El resultado esperado es una página útil y limpieza acotada. Separa corrección de velocidad, usa percentiles y no publiques umbrales universales.

Para una revisión de lanzamiento congela la lista de tipos, entradas, navegador, agregación, retención y rollback. Conserva evidencia negativa, vuelve a ejecutar el fixture mínimo tras cambios y amplía la observación solo con resultados comparables.

Una aplicación observa entradas seleccionadas, agrega una señal acotada y desconecta con límites de privacidad.

Para ampliar el contexto, consulta la guía de optimización de rendimiento y la guía de privacidad de tiempos.

Define la ruta y la acción antes de recoger una entrada. Mantén estable el fixture, registra la versión del navegador y trata una entrada ausente como una alternativa admitida. Limita las muestras antes del callback, desconecta al terminar, ignora callbacks de ejecuciones antiguas y compara por separado navegaciones frías y cálidas. Conserva agregados, redacta URLs, caduca el id de diagnóstico y prueba cancelación, navegación, foco, entrada traducida y tipos no compatibles.

La observación permanece acotada y orientada a una acción visible.

Fuentes públicas

#PerformanceObserver#Rendimiento Web#Salud De Aplicación#Privacidad

Lleva BotBrowser de la investigación a producción

Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.

Ver planes Explorar funciones

PerformanceObserver para la salud de una aplicación web

Quieres la documentación estructurada de Plataforma?

Papel de PerformanceObserver

Seleccionar entradas útiles

Agregar y minimizar datos

Probar el coste del observador

Fuentes públicas

Artículos Relacionados

Network Information API para contenido adaptable: guía de respaldo

Medir el rendimiento del navegador con User Timing API

Voces de síntesis de voz y reproducción accesible en el navegador

Lleva BotBrowser de la investigación a producción