Perfume.js es una biblioteca especializada en el monitoreo de rendimiento web, diseñada para capturar métricas centradas en el usuario, incluyendo Core Web Vitals. Con un peso comprimido de aproximadamente 5.1KB, proporciona una recopilación precisa de datos para optimizar la experiencia del usuario.

Características fundamentales y diseño ligero

El enfoque de Perfume.js prioriza la eficiencia, manteniendo un tamaño mínimo sin sacrificar funcionalidad. El código fuente, como se observa en src/constants.ts, utiliza estructuras optimizadas para reducir el volumen de la biblioteca.

Admite métricas clave como:

• First Contentful Paint (FCP): Tiempo hasta la primera renderización de contenido visible.
• Largest Contentful Paint (LCP): Tiempo de carga del elemento más grande en el viewport.
• First Input Delay (FID): Retraso entre la interacción del usuario y la respuesta del navegador.
• Cumulative Layout Shift (CLS): Medida de estabilidad visual.
• Total Blocking Time (TBT): Duración total en que el hilo principal está bloqueado.

Integración simplificada

Instalación e inicialización

Para instalar mediante npm:

npm i perfume.js --save-dev

Importación y configuración básica:

import { setupPerformanceTracking } from 'perfume.js';

setupPerformanceTracking({
  onDataCollected: (info) => {
    // Procesar datos de rendimiento
    console.info(info.metricLabel, info.values);
  }
});

Ajustes de configuración

Perfume.js ofrece opciones flexibles para adaptarse a las necesidades del proyecto:

setupPerformanceTracking({
  trackResourceTiming: true,
  maxRecordingTime: 12000,
  excludeLowEndDevices: true,
  enableElementTiming: true
});

Marcas personalizadas para análisis detallado

Monitorear bloques de código específicos con marcas de rendimiento:

import { startMarker, endMarker } from 'perfume.js';

// Iniciar marca en punto crítico
startMarker('operacion-carga');
// Ejecutar lógica compleja
cargarDatos();
// Finalizar y medir la duración
endMarker('operacion-carga');

Estrategias de optimización

Reducción del tamaño de la biblioteca

1. Importación selectiva: Aprovechar Tree Shaking para incluir solo módulos necesarios.
2. Configuración mínima: Desactivar características no esenciales para disminuir la sobrecarga en tiempo de ejecución.
3. Carga diferida: Cargar la biblioteca después de interacciones clave del usuario.

Mejora de la precisión en el monitoreo

1. Filtrado de anomalías: Utilizar los mecanismos internos de Perfume.js para descartar datos erróneos.
2. Contexto del dispositivo: Enriquecer datos con información del dispositivo para un análisis más exacto.
3. Compatibilidad entre navegadores: Garantizar consistencia mediante pruebas exhaustivas.

Casos de aplicación

En sitios de comercio electrónico, Perfume.js permite:

• Supervisar LCP en páginas de productos.
• Analizar la latencia en flujos de carrito de compras.
• Optimizar CLS en secciones de pago.

Para aplicaciones de página única (SPA), las marcas personalizadas facilitan el seguimiento de navegaciones:

// Monitorear rendimiento en cambios de ruta
startMarker('transicion-ruta');
cambiarARutaNueva();
endMarker('transicion-ruta');

Informes y alertas

Integrar Perfume.js con sistemas de monitoreo existentes:

1. Transmisión en tiempo real: Enviar métricas a plataformas analíticas.
2. Alertas por umbral: Notificar cuando los indicadores cruciales superen límites establecidos.
3. Análisis de tendencias: Observar evoluciones del rendimiento a lo largo del tiempo.

Exploración del código fuente

Para comprender la implementación interna, examinar archivos clave como:

• src/observe.ts: Implementación de observadores de rendimiento.
• src/reportPerf.ts: Lógica de reporte de métricas.
• src/utils.ts: Funciones auxiliares y utilidades.

Direcciones futuras

Perfume.js evoluciona con los estándares de rendimiento web, con planes para:

• Soporte completo para la métrica INP (Interaction to Next Paint).
• Actualizaciones continuas de Core Web Vitals.
• Expansión del análisis de rendimiento a más tipos de dispositivos.