Performance Observer API: Observa Métricas de Rendimiento en Tiempo Real
Aprende a observar métricas de rendimiento como LCP, CLS, FID y más sin afectar el rendimiento, ideal para monitoreo y optimización.
TL;DR - Resumen rápido
- Performance Observer observa métricas de rendimiento en tiempo real
- Soporta Web Vitals (LCP, CLS, FID, INP)
- entryTypes define qué métricas observar
- disconnect() es CRÍTICO para evitar memory leaks
- Ideal para monitoreo de producción y herramientas de debugging
Introducción a Performance Observer
Medir el rendimiento de aplicaciones web ha evolucionado significativamente. Anteriormente, los desarrolladores usaban performance.now() yperformance.mark() para medir tiempos específicos, pero estas herramientas solo proporcionaban mediciones puntuales, no observación continua de métricas de rendimiento.
Performance Observer API resuelve este problema permitiendo observar métricas de rendimiento en tiempo real de forma eficiente. A diferencia de las mediciones manuales, Performance Observer notifica automáticamente cuando ocurren eventos de rendimiento específicos, como pinturas, mediciones de recursos y Web Vitals.
¿Por qué no usar performance.mark() solo?
performance.mark() y performance.measure() requieren que sepas exactamente qué medir y cuándo. Performance Observer observa automáticamente métricas importantes como Web Vitals sin que tengas que instrumentar cada medición manualmente.
¿Qué es Performance Observer?
Performance Observer es una API del navegador que permite observar eventos de rendimiento de forma asíncrona y eficiente. Cuando ocurre un evento de rendimiento que coincide con los tipos configurados, el observer notifica a través de un callback con un array de PerformanceEntry, cada uno describiendo un evento específico.
La API está diseñada para tener impacto mínimo en el rendimiento. Las notificaciones se agrupan y se entregan en lotes, similar a otros observers. Esto significa que si múltiples eventos de rendimiento ocurren en rápida sucesión, recibirás un solo callback con todas las entradas.
- Observa métricas de rendimiento en tiempo real
- Soporta Web Vitals (LCP, CLS, FID, INP)
- Detecta mediciones de recursos, pinturas y navegación
- Agrupa múltiples eventos en un solo callback
- No afecta significativamente el rendimiento de la aplicación
Crear un Performance Observer
Para crear un Performance Observer, necesitas proporcionar una función callback que se ejecutará cuando ocurran eventos de rendimiento. También debes especificar qué tipos de entradas observar usando el array entryTypes.
El callback recibe un array de PerformanceEntry, cada uno con información sobre un evento de rendimiento específico. La propiedad entryTypeindica qué tipo de evento ocurrió (mark, measure, paint, resource, etc.), y dependiendo del tipo, puede incluir propiedades adicionales específicas.
Mejor práctica: Verificar soporte antes de usar
No todos los navegadores soportan todos los tipos de entradas. Antes de crear un Performance Observer, verifica si el navegador soporta los entryTypes que necesitas usando PerformanceObserver.supportedEntryTypes.
Tipos de Entradas de Rendimiento
Performance Observer puede observar múltiples tipos de eventos de rendimiento. Comprender estos tipos es fundamental para implementar monitoreo específico según qué métricas necesitas medir.
mark y measure son para mediciones manuales de código. paint detecta pinturas del navegador (first-paint, first-contentful-paint). resource observa carga de recursos (scripts, estilos, imágenes). layout-shiftdetecta cambios inesperados en el layout (CLS).
Web Vitals: LCP, CLS, FID, INP
Los Web Vitals son métricas clave de experiencia de usuario:LCP (Largest Contentful Paint) mide cuándo el contenido principal es visible. CLS (Cumulative Layout Shift) mide estabilidad visual. FID (First Input Delay) mide interactividad. INP (Interaction to Next Paint) mide respuesta a interacciones.
Casos de Uso Prácticos
Performance Observer tiene múltiples aplicaciones en desarrollo web moderno. Estos patrones demuestran cómo la API puede resolver problemas reales de monitoreo y optimización de rendimiento.
- Monitorear Web Vitals en producción
- Detectar recursos lentos o fallidos
- Medir tiempos de pintura del navegador
- Observar cambios de layout inesperados (CLS)
- Implementar RUM (Real User Monitoring)
Este ejemplo muestra cómo monitorear Web Vitals usando Performance Observer. Cuando ocurre un evento de Web Vital, el observer captura la métrica y puede enviarla a un servicio de analítica. Este patrón es fundamental para monitorear la experiencia de usuario en producción.
Este patrón detecta recursos que tardan más de un tiempo específico en cargar. Cuando un recurso excede el umbral configurado, el observer notifica y puedes registrar el problema para análisis posterior. Esto es útil para identificar cuellos de botella en el rendimiento de carga.
RUM: Real User Monitoring
Performance Observer es ideal para implementar RUM, donde monitoreas el rendimiento real de los usuarios en producción. A diferencia de las pruebas sintéticas, RUM captura cómo experimenta tu aplicación real usuarios con diferentes dispositivos, conexiones y condiciones.
Errores Comunes
Al trabajar con Performance Observer, hay varios errores comunes que pueden causar problemas de monitoreo, métricas incorrectas o comportamiento inesperado. Conocer estos patrones problemáticos te ayudará a evitarlos.
No desconectar el observer cuando ya no es necesario es uno de los errores más comunes. Esto causa memory leaks porque el observer sigue ejecutando callbacks incluso después de que el usuario navegó a otra página.
Crear un Performance Observer sin especificar entryTypes o con un array vacío no tiene efecto. El observer necesita saber qué tipos de eventos observar. Siempre especifica al menos un entryType válido.
Usar entryTypes que no están soportados en el navegador puede causar errores inesperados. Algunos navegadores no soportan todos los tipos de entradas. La solución es verificar el soporte antes de crear el observer.
Advertencia: Impacto en rendimiento
Performance Observer está diseñado para tener impacto mínimo en el rendimiento, pero observar demasiados tipos de entradas o procesar callbacks complejos puede afectar el rendimiento. Observa solo las métricas que realmente necesitas y mantén los callbacks eficientes.
Resumen: Performance Observer API
Conceptos principales:
- •Performance Observer observa métricas de rendimiento en tiempo real
- •entryTypes define qué tipos de eventos observar
- •Web Vitals incluyen LCP, CLS, FID y INP
- •Las notificaciones se agrupan en un solo callback
- •Soporta mediciones de recursos, pinturas y navegación
Mejores prácticas:
- •Siempre desconecta el observer cuando ya no se necesite
- •Verifica el soporte de entryTypes antes de usar
- •Usa Web Vitals para monitorear experiencia de usuario
- •Mantén los callbacks eficientes y sin bloqueos
- •Implementa RUM para monitoreo en producción