Cómo Medir el Rendimiento de JavaScript

Los problemas de rendimiento de JavaScript son fáciles de percibir pero difíciles de identificar con precisión. Tu aplicación se siente lenta, las interacciones se retrasan y los usuarios lo notan, pero sin las herramientas de medición adecuadas, estarás adivinando. Este artículo cubre técnicas prácticas de medición del rendimiento de JavaScript utilizando APIs modernas del navegador y DevTools, para que puedas encontrar los cuellos de botella reales y solucionar lo correcto.

Pruebas de Laboratorio vs. Datos de Usuarios Reales

Antes de recurrir a una herramienta, comprende los dos tipos de medición del rendimiento de JavaScript:

• Pruebas sintéticas (laboratorio) ejecutan tu código en un entorno controlado. Herramientas como Lighthouse y Chrome DevTools te brindan resultados repetibles y depurables. Ideales para desarrollo y pipelines de CI.
• Datos de campo (RUM) capturan lo que experimentan los usuarios reales. Herramientas como Chrome User Experience Report (CrUX) o plataformas RUM te muestran el rendimiento real en diferentes dispositivos y redes.

Usa herramientas de laboratorio para diagnosticar problemas. Usa datos de campo para confirmar que son importantes.

Perfilado de JavaScript en Chrome DevTools

Chrome DevTools es el punto de partida más práctico para métricas de rendimiento de JavaScript. Abre el panel Performance, presiona grabar, interactúa con tu página y luego detén la grabación.

Qué buscar:

• Long Tasks — cualquier tarea que bloquee el hilo principal durante más de 50ms aparece en rojo. Estas suelen retrasar las interacciones del usuario. Las herramientas modernas también pueden mostrar Long Animation Frames, que proporcionan información más detallada sobre fotogramas lentos que afectan la capacidad de respuesta.
• Vistas Call Tree / Bottom-Up — identifica qué funciones consumen más tiempo de ejecución.
• Flame chart — visualiza la pila de llamadas a lo largo del tiempo para detectar trabajo síncrono costoso.

Firefox DevTools ofrece un perfilador similar. Ambas herramientas son gratuitas, no requieren configuración y funcionan en cualquier sitio.

Medición del Tiempo de Ejecución de JavaScript con la Performance API

Para medición del rendimiento de JavaScript precisa y programática, utiliza la Performance API integrada del navegador.

Usando performance.now()

performance.now() devuelve una marca de tiempo de alta resolución en milisegundos, relativa al origen temporal de la página, lo que la hace más confiable que Date.now() para temporizar código.

const start = performance.now()
runExpensiveOperation()
const duration = performance.now() - start
console.log(`Took ${duration}ms`)

Usando performance.mark() y performance.measure()

Para temporización estructurada en múltiples puntos, usa marcas y mediciones. Esto se integra directamente con DevTools y PerformanceObserver.

performance.mark('fetch-start')
const data = await fetchData()
performance.mark('fetch-end')

const measure = performance.measure('fetch-duration', 'fetch-start', 'fetch-end')
console.log(measure.duration) // milisegundos

Las mediciones aparecen en el panel Performance de Chrome DevTools bajo la pista Timings, facilitando su correlación con otra actividad en el hilo principal.

Automatización de Mediciones con PerformanceObserver

PerformanceObserver te permite reaccionar a las entradas de rendimiento a medida que ocurren, útil para monitoreo en producción.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration)
  }
})

observer.observe({ type: 'measure', buffered: true })

También puedes observar entradas longtask para detectar bloqueos del hilo principal en sesiones de usuarios reales.

Core Web Vitals e INP: Las Métricas que Importan

Los Core Web Vitals de Google son las métricas estándar de rendimiento de JavaScript para la experiencia del usuario. La más relevante para JavaScript es Interaction to Next Paint (INP), que mide la latencia de todas las interacciones (clics, toques, entrada de teclado) durante el tiempo de vida de una página.

Un INP superior a 200ms es una señal de advertencia. Por encima de 500ms es deficiente. La ejecución pesada de JavaScript durante los manejadores de eventos es la causa más común.

Usa la biblioteca web-vitals para medir INP en campo:

import { onINP } from 'web-vitals'
onINP(({ value }) => console.log('INP:', value))

Para SPAs, ten en cuenta que las navegaciones suaves (cambios de ruta sin recargas completas de página) solo son capturadas parcialmente por las métricas de navegación estándar. El soporte del navegador para medición de navegación suave aún está evolucionando, por lo que instrumentar transiciones de ruta manualmente usando performance.mark() puede ayudar a llenar vacíos.

Elegir la Herramienta Correcta

Conclusión

La medición efectiva del rendimiento de JavaScript comienza con la herramienta correcta para la pregunta correcta. Usa DevTools para perfilar y explorar, la Performance API para instrumentar rutas de código específicas, y Core Web Vitals, especialmente INP, para comprender lo que los usuarios realmente experimentan. Mide primero, luego optimiza.

Preguntas Frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.