La forma en que observas el rendimiento de tu aplicación web a lo largo del tiempo puede marcar la diferencia en la experiencia de tus usuarios. Afortunadamente, puedes mantenerte constantemente informado sobre la salud de cada cambio en tu experiencia de usuario utilizando el Monitoreo de Usuarios Reales, e identificar de inmediato cualquier problema que esté frenando a tus usuarios actuales. Con él, puedes optimizar el tiempo que tarda en cargarse tu aplicación en dispositivos móviles, los tiempos de ida y vuelta para la obtención de activos, la latencia promedio entre las acciones del usuario y las actualizaciones de componentes, y más (agregando un pequeño bloque de código en el lugar correcto). En este masterclass aprenderás cómo aprovechar el Monitoreo de Usuarios Reales para rastrear y resolver los problemas que impiden una mayor adopción y retención de tu aplicación. Discutiremos cómo pensar en el rendimiento desde la perspectiva del usuario, evaluar qué métricas son importantes de monitorear continuamente y definir una buena estrategia para aliviar las latencias y problemas que más afectan a tus usuarios.
React Summit 2023
170 min
React Performance Debugging Masterclass
Top ContentFeatured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)