Mide antes de optimizar: el flujo de trabajo de Paul Irish para la velocidad

Por qué optimizar primero normalmente hace perder tiempo

El trabajo de rendimiento se siente aleatorio cuando empiezas por arreglos sin medir. Un día minificas archivos, al siguiente ajustas caché y luego eliminas una librería. A veces ayuda. Otras veces no pasa nada y no sabes por qué.

El mayor riesgo es optimizar lo equivocado. Si la página es lenta porque el hilo principal está bloqueado por JavaScript, pasar horas comprimiendo imágenes apenas moverá la aguja. O puedes acelerar algo que los usuarios no notan mientras la verdadera demora es una llamada API larga, un layout que se vuelve a recalcular continuamente o un único script bloqueante.

También hay una trampa en juzgar “a ojo”. “Se siente más rápido” puede venir de cambios placebo (como un spinner) o de probar en otra red, dispositivo o momento del día. “Es más rápido” significa que la misma acción, en las mismas condiciones, dio mejores números.

Una promesa simple arregla la mayor parte: mide antes de optimizar y luego decide. Si tratas el rendimiento como un problema de medición, dejas de adivinar y empiezas a aprender.

Un bucle práctico se ve así: elige una acción de usuario a mejorar, registra una línea base en condiciones repetibles, haz un cambio que puedas explicar y vuelve a medir; conserva el cambio sólo si los números mejoran.

Paul Irish y el hábito de medir primero

Paul Irish es una de las voces más conocidas en rendimiento web. A través de su trabajo en herramientas de navegador y guías de rendimiento, ayudó a popularizar una idea sencilla: tu primer trabajo no es adivinar qué está lento, es probarlo.

Esa mentalidad cambia la dinámica del equipo. En lugar de discutir por hábitos como “las imágenes siempre son el problema” o “seguro es el framework”, comienzas con evidencia. Cuando puedes señalar una línea de tiempo, una consulta lenta o una tarea larga, la conversación pasa de culpas a soluciones.

“Medir antes de optimizar” también enfría los debates porque crea reglas compartidas: acuerden qué van a medir, qué significa “mejor” y sólo celebren cuando los números se muevan.

Esto funciona en sitios pequeños y apps enormes. Una sola línea base puede detener micro-optimizaciones aleatorias en una página de marketing. En un gran producto, mediciones consistentes evitan que el rendimiento se convierta en una lista interminable de tareas.

Una forma simple de hacerlo real es tratar el rendimiento como un informe de bug: pasos claros para reproducir, la métrica que viste y un cambio atado a un resultado. Si dos personas no están de acuerdo, vuelve a ejecutar la medición y deja que los datos decidan.

Rendimiento como un problema de instrumentación

Trata el rendimiento primero como un problema de instrumentación: añade formas de observar lo que los usuarios realmente experimentan. Si no puedes verlo, acabarás debatiendo opiniones, no evidencia. Ese es el sentido real de medir primero.

La instrumentación no necesita ser sofisticada. Es recoger algunas señales de forma consistente, en los mismos sitios, para poder responder preguntas básicas:

• ¿Qué se siente lento?
• ¿Dónde se va el tiempo?
• ¿Ayudó nuestro cambio?

Normalmente quieres dos tipos de datos.

Los datos de laboratorio se capturan en un entorno controlado: un portátil o dispositivo de prueba concreto, un perfil de red estable y los mismos pasos en cada ejecución. Es ideal para depurar porque puedes reproducir la lentitud a demanda.

Los datos reales de usuario son lo que experimentan las personas en la práctica: distintos dispositivos, ubicaciones y calidad de conexión. Son ideales para priorizar porque muestran lo que realmente afecta a los usuarios, no sólo a una ejecución de prueba.

Incluso sin ser experto, puedes medir hitos de carga de página (como el primer contenido mostrado), tareas largas y bloqueo del hilo principal, solicitudes de red lentas, trabajo de render costoso (layout, style, paint) y tiempo de respuesta del servidor.

Esas señales suelen vivir en unos pocos sitios: herramientas de desarrollador del navegador para perfilar en laboratorio, logs y trazas del servidor para tiempos backend, y dashboards de analytics o RUM para datos reales. Por ejemplo, si el checkout se siente lento, DevTools puede mostrar que el navegador está ocupado renderizando una interfaz enorme del carrito mientras los logs del servidor muestran que la API es rápida. Sin instrumentación, podrías optimizar el backend y nunca solucionar el verdadero problema.

Paso 1: Establece una línea base que puedas repetir

Para medir antes de optimizar necesitas un punto de partida en el que puedas confiar. Una línea base es la misma acción, medida de la misma manera y bajo las mismas condiciones.

Empieza con un recorrido real de usuario, no con “todo el sitio”. Elige algo que puedas describir en una frase, como “abrir la página principal y desplazarse hasta la primera cuadrícula de productos” o “iniciar sesión y llegar al dashboard”. Mantenerlo estrecho hace que los números sean más estables y los siguientes pasos más claros.

Después, elige de 1 a 3 métricas que coincidan con el recorrido. Para una vista de página, una pareja común es LCP (qué tan rápido aparece el contenido principal) y TTFB (qué tan rápido responde el servidor). Para un flujo como el checkout, podrías seguir el tiempo para completar el paso 1 más el tiempo de respuesta de la API de pago. Demasiadas métricas facilita el sesgo selectivo.

Anota la configuración de la prueba para que otra persona pueda reproducirla después. Pequeñas diferencias pueden alterar los resultados:

• Dispositivo y navegador (incluida la versión)
• Red (wifi vs 4G, throttling activado/desactivado)
• Estado de caché (frío vs caliente)
• Ubicación y datos de prueba (región, tipo de cuenta, tamaño del carrito)
• Número de ejecuciones (por ejemplo, 5 ejecuciones y usar la mediana)

Finalmente, define “suficiente” para tu audiencia. Por ejemplo: “LCP por debajo de 2.5s en un teléfono de gama media, en 4G.” Si usas Koder.ai, tomar una snapshot antes de las pruebas ayuda a ligar tu línea base a una versión conocida.

Paso 2: Reproduce la lentitud a propósito

Antes de perfilar nada, haz que el problema ocurra de nuevo a demanda. Si no puedes repetirlo, no puedes confiar en el resultado.

Parte de lo que la gente siente, no de lo que asumes. ¿Es un primer render lento? ¿Un clic que se queda colgado antes de que pase algo? ¿Una larga espera tras enviar un formulario? Elige el momento por el que los usuarios se quejan y céntrate ahí.

Haz una ejecución rápida para confirmar que la lentitud es real y repetible. Mantén todo lo demás igual: misma página, mismo dispositivo, misma red si puedes. Luego anota el disparador y el momento exacto en que se siente lento, por ejemplo “al hacer clic en Pagar, el botón se congela por un segundo” o “el scroll se traba cuando aparece la lista de productos”.

Una forma simple de mantenerlo repetible es un script pequeño: abre la página desde una pestaña nueva, realiza la acción que causa la demora, nota el punto exacto donde se enlentece y repite una vez para confirmar.

Captura una o dos grabaciones de línea base, no docenas. Quieres la suficiente evidencia para decir: “Sí, la lentitud ocurre y ocurre justo aquí.”

Paso 3: Perfila para encontrar el cuello de botella principal

Una vez que puedas reproducir la lentitud, deja de adivinar. Abre un profiler (para la mayoría, el panel Performance del navegador) y graba una ejecución de la interacción lenta. El objetivo no es encontrar todos los problemas, sino aprender dónde se va el tiempo.

Empieza por los bloques de tiempo más grandes. Picos pequeños pueden ser reales, pero rara vez por sí solos explican una demora notable.

Una forma útil de leer una grabación es agrupar el tiempo en unos pocos cubos: red y carga (espera de solicitudes), scripting en el hilo principal (tareas largas de JavaScript), render y paint (layout y estilo), gaps inactivos (esperando otra cosa) y trabajo repetido (el mismo paso costoso ocurriendo una y otra vez).

Un error común es confundir una respuesta lenta del servidor con trabajo lento en el cliente. Si la línea de tiempo muestra largos gaps mientras las solicitudes están en vuelo, el cuello de botella puede ser la red o el backend. Si muestra tareas largas en el hilo principal, tienes un problema de front-end aunque la red sea rápida.

Antes de cambiar nada, escribe una hipótesis corta y comprobable basada en lo que viste. Por ejemplo: “La página se siente lenta porque el hilo principal está bloqueado por el parseo de JSON justo después de que llega la respuesta de la API.” Esa frase prepara el siguiente paso.

Paso 4: Cambia una sola cosa, a propósito

Después de identificar el posible cuello de botella, resiste la tentación de “arreglarlo todo”. Cambia una variable para poder conectar causa y efecto.

Mantén el cambio pequeño y fácil de deshacer. Grandes reescrituras difuminan el resultado: si el rendimiento mejora, no sabrás por qué. Si empeora, revertir puede ser arriesgado.

Buenos cambios de “una sola cosa” son específicos y comprobables. Ejemplos: diferir o eliminar un script de terceros que bloquea el render, comprimir una imagen sobredimensionada en la página lenta, añadir caching a una consulta de base de datos costosa, dividir un componente UI pesado para renderizar menos trabajo inicialmente o reducir trabajo en un bucle caliente que viste en el profiler.

Antes de tocar el código, anota lo que cambiaste, por qué lo elegiste y qué esperas mejorar (por ejemplo, “reducir tiempo en hilo principal” o “reducir tiempo DB a la mitad”).

Si tu equipo usa una plataforma que soporta snapshots y rollback (como Koder.ai), toma una snapshot justo antes del cambio para que “pequeño y reversible” sea real, no aspiracional.

Paso 5: Verifica el impacto y evita conclusiones ruidosas

Has cambiado una cosa. Ahora prueba que ayudó.

Vuelve a ejecutar exactamente la misma configuración de prueba que usaste para la línea base: mismo dispositivo, misma versión del navegador, misma ruta y flujo, y el mismo número de ejecuciones. Compara antes y después usando las mismas métricas. No añadas métricas nuevas a mitad de camino sólo porque se ven mejor.

El ruido es la razón más común por la que los equipos discuten sobre rendimiento. Vigila caché frío vs caliente, extensiones o procesos en segundo plano, condiciones de red diferentes o VPN, variabilidad del servidor (minuto tranquilo vs minuto ocupado) y la diferencia entre “justo después del deploy” y el estado estable.

Si la mediana mejora pero el peor caso empeora, eso es un trade-off real. Decide qué importa para tus usuarios y documenta la decisión: conservar el cambio, revertirlo o escribir una nueva hipótesis y volver a probar.

Trampas comunes que hacen que el trabajo de rendimiento parezca imposible

El trabajo de rendimiento se vuelve confuso cuando mides lo incorrecto o cambias demasiado a la vez. Puedes quemar mucho esfuerzo sin una mejora clara, incluso si tu app está mejorando.

Un error común es tratar una sola puntuación como la meta. Las puntuaciones pueden ser útiles, pero los usuarios no experimentan “un 92”. Experimentan “la página muestra contenido en 2 segundos” o “al tocar Comprar responde de inmediato”. Elige un resultado visible para el usuario y mídelo consistentemente.

Otra trampa es probar sólo en un portátil potente. Muchas lentitudes aparecen en teléfonos de gama media, redes inestables o cuando la CPU está ocupada. Si sólo perfilas en tu mejor dispositivo, puedes pasar por alto el cuello de botella.

La confusión suele venir de patrones como optimizar lo más fácil en lugar de lo que consume más tiempo, agrupar varios ajustes en un solo cambio, cambiar la ruta de prueba cada vez, saltarse una nueva prueba porque “se siente más rápido” o declarar victoria sin volver a ejecutar la línea base.

Si construyes la app con una plataforma guiada por chat como Koder.ai, la misma disciplina aplica: un cambio, luego verifica en el mismo flujo exacto para poder confiar en el resultado.

Una lista de verificación rápida que puedes reutilizar

Si mantienes un hábito, que sea este: mide antes de optimizar. La meta no es datos infinitos, sino un bucle repetible en el que puedas confiar.

Nombra el recorrido de usuario exacto que te importa. “La página principal es lenta” es vago. “Desde la página de producto hasta hacer clic en Comprar y ver la confirmación” te da un guion que puedes repetir.

Usa esta lista:

• Escribe el recorrido como un script corto para que cualquiera pueda repetirlo.
• Congela la configuración (dispositivo, navegador, red, ubicación si es posible).
• Captura un número de línea base y una grabación de referencia.
• Perfila, elige el mayor cuello de botella y cambia sólo una cosa.
• Re-prueba, registra el nuevo número y documenta la decisión.

La versión tranquila del trabajo de rendimiento es simple: un camino, una configuración, un cambio, un resultado verificado.

Ejemplo: arreglar un checkout lento sin adivinar

Una queja común: el checkout se siente lento justo después de que el cliente hace clic en “Pagar”. La gente empieza a adivinar (imágenes, fuentes, el botón). En cambio, trátalo como una prueba que puedes repetir.

Establece una línea base que puedas repetir. Elige un dispositivo y un camino (carrito -> checkout -> Pagar -> confirmación). Activa el throttling de red (por ejemplo, Fast 3G) y mantenlo igual en cada ejecución. Mide un número simple: tiempo desde hacer clic en “Pagar” hasta ver la pantalla de confirmación.

Después perfila ese mismo momento y busca dónde se va el tiempo. Normalmente decides entre tres cubos: red (una petición larga o demasiadas peticiones), servidor (la llamada de pago es lenta mientras el navegador está inactivo) o hilo principal (el navegador está ocupado ejecutando JavaScript y no puede actualizar la UI).

Imagina que el perfil muestra que, después de hacer clic en “Pagar”, el navegador dispara una petición de analytics y una llamada a un script de comprobación de fraude, y la petición de pago queda detrás de ellas. Eso no es un problema de “hacer todo más rápido”. Es un paso que bloquea.

Haz un cambio intencional: por ejemplo, deja que la petición de pago se inicie inmediatamente y envía el analytics sólo después de mostrar la pantalla de confirmación.

Verifica con la misma configuración: mismo throttling, mismos pasos, varias ejecuciones. Si el tiempo a confirmación baja y los errores no aumentan, tienes una mejora real. Revisa además que no rompiste reembolsos, reintentos o protección contra envíos dobles.

Próximos pasos: convierte el flujo en un hábito de equipo

El rendimiento se mantiene ordenado cuando es una rutina, no una misión de rescate. Haz que medir sea la acción por defecto, incluso cuando todo parece estar bien.

Elige un pequeño conjunto de métricas que tu equipo siempre va a seguir. Mantenlas consistentes para que las tendencias sean fáciles de ver:

• Carga de página: Largest Contentful Paint (LCP)
• Interactividad: Interaction to Next Paint (INP)
• Estabilidad: Cumulative Layout Shift (CLS)
• Velocidad de API: p95 de tiempo de respuesta para endpoints clave
• Errores: tasa de error en cliente y servidor

Construye un bucle alrededor de esas métricas. Una comprobación semanal de la línea base suele ser suficiente. Cuando una métrica se desvía, ese es el disparador para reproducir la lentitud, perfilar, hacer un cambio y verificar el impacto.

Mantén un registro simple de rendimiento en el formato que tu equipo use realmente. Anota qué mediste (incluyendo dispositivo, red y build), qué cambiaste y qué hicieron los números después.

Si construyes con Koder.ai, Planning Mode puede ayudarte a escribir el recorrido de usuario y la métrica que te importa antes de cambiar nada. Luego usa snapshots y rollback para mantener los experimentos seguros: snapshot, aplica un cambio, vuelve a probar y revierte si el resultado es ruidoso o peor.

En la planificación o revisión, una pregunta mantiene la cultura saludable: “¿Qué medimos y qué cambió?”