De la Lentitud al Rayo: Mejorando el Rendimiento de React Native

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La optimización del rendimiento es clave para la satisfacción del usuario en cualquier aplicación móvil, especialmente aquellas construidas con React Native. Esta charla profundiza en los problemas comunes de rendimiento en las aplicaciones de React Native y proporciona técnicas prácticas para diagnosticar y resolver estos problemas. Exploraremos herramientas y métodos para el monitoreo del rendimiento, técnicas de renderizado eficientes y la optimización del uso del hilo de JavaScript. Además, la sesión cubrirá temas avanzados como la gestión de memoria, el uso del motor de JavaScript Hermes y estrategias para animaciones y transiciones fluidas.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Sweta Tanwar
Sweta Tanwar
17 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola a todos. Hoy hablaré sobre cómo mejorar el rendimiento de las aplicaciones de React Native. Exploraremos técnicas de optimización, estrategias prácticas, herramientas y ejemplos. El rendimiento es crucial para las aplicaciones móviles. Las aplicaciones lentas llevan a la frustración, el abandono y la pérdida de ingresos. Necesitamos mantener 60 fotogramas por segundo y superar los desafíos de rendimiento. Entendamos la arquitectura de React Native, el modelo heredado y la nueva arquitectura con JSI, fabric renderer y turbo modules. Los problemas de rendimiento en React Native surgen debido a la naturaleza de un solo hilo de JavaScript. El puente de React Native puede verse abrumado por grandes cargas útiles, por lo que usar JSI para la comunicación nativa directa es una solución más eficiente. Las herramientas de perfilado como Flipper, Chrome dev tools, React dev tools, Xcode instruments y Android profiler ayudan a identificar cuellos de botella. Descargar cálculos pesados a web workers o JSI puede mejorar el rendimiento de JavaScript. Habilitar el motor Hermes para un mejor rendimiento. Optimizar el uso de flatlist, retrasar tareas no urgentes y prevenir fugas de memoria para un mejor rendimiento de la aplicación. Usar las props initial numToRender y maxToRenderPerBatch, memoizar el render item y limpiar efectos secundarios para un renderizado optimizado. Precargar y almacenar en caché imágenes, delegar el procesamiento de gestos al hilo nativo y probar continuamente la aplicación en condiciones del mundo real para un renderizado suave y una interfaz de usuario fluida.

1. Introduction to React Native Performance

Short description:

Hola a todos. Hoy hablaré sobre cómo mejorar el rendimiento de las aplicaciones React Native. Exploraremos técnicas de optimización, estrategias prácticas, herramientas y ejemplos. El rendimiento es crucial para las aplicaciones móviles. Las aplicaciones lentas llevan a la frustración, el abandono y la pérdida de ingresos. Necesitamos mantener 60 fotogramas por segundo y superar los desafíos de rendimiento. Entendamos la arquitectura de React Native, el modelo heredado y la nueva arquitectura con JSI, fabric renderer y turbo modules.

Hola a todos. Es fantástico estar aquí hoy para hablar sobre algo que afecta a todos los desarrolladores en algún momento de su trayectoria, que es el rendimiento. Como todos sabemos, los usuarios móviles esperan experiencias fluidas y rápidas. Incluso una pequeña falta puede llevar a la frustración y al abandono.

Mi charla de hoy, de la falta a la iluminación, mejorando el rendimiento de la aplicación React Native, explorará las técnicas de optimización para ayudarte a construir aplicaciones que no solo sean funcionales, sino también increíblemente rápidas. Ya sea que estés solucionando cuellos de botella o planificando para optimizar, esto te ayudará a equiparte con las estrategias prácticas, herramientas y ejemplos que puedes aplicar. Comencemos.

Soy Swetha. Trabajo como ingeniera de software senior en Replik. Me encanta el senderismo, me encanta andar en bicicleta y amo a los animales, y soy de India. Comencemos entendiendo por qué el rendimiento es una prioridad principal para las aplicaciones móviles. Los estudios muestran que el 53% de los usuarios abandonan una aplicación si tarda más de tres segundos en cargarse. El 80% de los usuarios abandonan la aplicación que se retrasa o se bloquea. Y los efectos no se detienen ahí. Cada segundo de retraso reduce la conversión en un 7%. Y cuando la aplicación funciona mal, los usuarios se van, las calificaciones de la aplicación caen en picado y las empresas pierden ingresos. Entonces, como desarrolladores, nuestro objetivo es crear aplicaciones que se sientan instantáneas e intuitivas. Para lograr eso, necesitamos mantener un fluido de 60 fotogramas por segundo, o FPS. Cuando caemos por debajo de 30 FPS, los usuarios comienzan a notar, y eso impacta directamente en el compromiso y la retención. Hoy nos centraremos en formas prácticas de superar estos desafíos de rendimiento.

Pero antes de pasar allí, hagamos un resumen de la arquitectura de React Native. La promesa de React Native de desarrollo multiplataforma se basa en su arquitectura, pero esta flexibilidad viene con algunos desafíos. En el modelo heredado, React Native se basa en un puente para comunicarse entre el hilo de JavaScript y el hilo nativo de forma asincrónica. Esto requiere serialización JSON, lo que agrega sobrecarga y latencia, especialmente para cargas de datos grandes subidas. Aquí hay una representación visual de lo que acabo de hablar, donde este es un puente que se utiliza para comunicarse entre el hilo de JavaScript y los hilos nativos, y todo esto ocurre de forma asincrónica, lo que requiere serialización JSON.

Ahora, la nueva arquitectura. Esto presenta JSI, la interfaz de JavaScript, fabric renderer y turbo modules, que reemplaza el puente. Ahora, JSI permite la comunicación síncrona directa, desbloqueando mejoras significativas en el rendimiento. Estos cambios arquitectónicos forman la base de muchas de las técnicas que discutiremos hoy. Y aquí hay una representación visual de lo que estaba hablando sobre, el JSI, el fabric, los turbo modules, interactuando, haciendo la comunicación entre el React y el sitio nativo.

2. Causes of Performance Issues in React Native

Short description:

Los problemas de rendimiento en las aplicaciones React Native surgen debido a la naturaleza de un solo hilo de JavaScript. Ordenar un array en el hilo principal retrasa las actualizaciones de la interfaz de usuario y causa animaciones entrecortadas. El uso ineficiente de flat list, el uso excesivo del estado de las props y las llamadas a la API que bloquean también contribuyen a los cuellos de botella. El puente de React Native puede verse abrumado por cargas útiles grandes, por lo que usar JSI para la comunicación nativa directa es una solución más eficiente.

¿Por qué surgen problemas de rendimiento en las aplicaciones React Native? Básicamente, ¿por qué ocurren los cuellos de botella? Vamos a repasarlos. Una razón clave es la naturaleza de un solo hilo de JavaScript. El hilo JS maneja todo, desde la lógica de negocio hasta las actualizaciones de renderizado. Como ejemplo, si ves en la imagen, JS siendo un solo hilo, le das una tarea, espera a que se ejecute, luego se toma otra tarea, luego otra tarea. Ahora, imagina ordenar un array así. Este cálculo bloquea el hilo JS, retrasando la actualización de la interfaz de usuario y causando que las animaciones se entrecorten. ¿La solución? Delegar tal tarea fuera del hilo principal. Otros culpables incluyen el uso ineficiente de flat list, el uso excesivo del estado de las props, causando re-renderizados frecuentes y llamadas a la API que bloquean. Otro cuello de botella común es el puente de React Native, que puede verse abrumado por cargas útiles grandes. Ahora, toma este ejemplo. Enviar tal carga útil por el puente es ineficiente debido a la serialización y deserialización de JSON. Una mejor solución es reducir el tamaño de la carga útil, lo cual no parece una solución justa, o usar JSI, que permite la comunicación nativa directa, evitando por completo el puente. Esto mejora la eficiencia de la transferencia de datos y reduce la latencia.

3. Performance Monitoring and Profiling Tools

Short description:

El monitoreo del rendimiento es crucial para optimizar las aplicaciones React Native. Las herramientas de perfilado como Flipper, Chrome dev tools, React dev tools, Xcode instruments y Android profiler ayudan a identificar cuellos de botella. Flipper, una plataforma todo en uno, ofrece plugins para depuración y perfilado. React Dev Tools inspecciona componentes, detecta re-renderizados innecesarios y optimiza el rendimiento. Usa React Dev Memo para prevenir re-renderizados redundantes.

Ahora, vamos con el monitoreo del rendimiento y veamos algunas de las herramientas de perfilado. Antes de optimizar, vamos a perfilar. Una regla de oro en la afinación del rendimiento es medir, no adivinar. Antes de sumergirse en la optimización, es crucial identificar dónde están los cuellos de botella. Adivinar a menudo puede llevar a optimizar áreas que no impactan significativamente el rendimiento. Por eso, el perfilado siempre debe ser el primer paso. Sin perfilado, podrías arriesgarte a optimizar las áreas incorrectas.

Ahora, dado que has perfilado y optimizado las áreas incorrectas, tienes los datos para corregir y asegurarte de que el problema real esté solucionado y tenga un impacto real. Y hay un flujo de trabajo que cualquiera puede seguir. Perfila tu aplicación, analiza los datos para encontrar los cuellos de botella, luego optimiza las áreas correctas y luego verifícalas nuevamente.

Ahora, React Native proporciona una variedad de herramientas de perfilado. Flipper, Chrome dev tools, React dev tools, Xcode instruments y Android profiler. Vamos a repasarlas una por una y ver cómo estas herramientas pueden asegurar y ayudarnos a abordar problemas de rendimiento.

Flipper. Esta es una plataforma todo en uno para depuración y perfilado que se puede usar para Flipper. Esta es una plataforma todo en uno para depuración y perfilado construida para React Native. Se conecta a tu aplicación, ofreciendo un conjunto de plugins adaptados para diferentes escenarios de depuración. Tenemos React Dev Tools, que te ayuda a inspeccionar componentes de React y entender el comportamiento de renderizado. El plugin de red proporciona información sobre las solicitudes y respuestas de API, permitiéndote depurar problemas de rendimiento relacionados con la red. Luego tenemos el plugin de línea de tiempo, que es particularmente útil para perfilar el rendimiento de renderizado, visualizando componentes, actualizaciones en tiempo real, y el plugin de memoria, que te ayuda a monitorear el uso de memoria, ayudando y detectando y resolviendo fugas. Así es como se ve la interfaz de Flipper, donde a la izquierda, puedes ver que React Dev Tools está abierto, el plugin del que estábamos hablando. Luego tenemos React Dev Tools. Esto es imprescindible para inspeccionar el comportamiento de los componentes de React. React Dev Tools es invaluable para identificar re-renderizados innecesarios. Ayuda a inspeccionar la jerarquía de componentes y props. También resalta los componentes que están causando los re-renderizados. Un caso de uso común será depurar los re-renderizados innecesarios.

4. Optimizing Performance and Profiling Tools

Short description:

Esta simple optimización puede mejorar significativamente el rendimiento de renderizado. El Flame Graph de Chrome Dev Tools visualiza los tiempos de ejecución de funciones y resalta cuellos de botella. Xcode Instruments ayuda a analizar el uso de CPU, memoria y GPU. El Android Profiler proporciona vistas en tiempo real del uso de CPU, actividad de red y asignación de memoria. Desplaza cálculos pesados a web workers o JSI para un rendimiento óptimo de JavaScript.

Esta simple optimización puede mejorar significativamente el rendimiento de renderizado. Aquí está la interfaz de usuario de React Dev Tool y cómo se ve.

Luego tenemos Chrome Dev Tools. Ahora, su Flame Graph es un profiler ligero pero poderoso para JavaScript. Visualiza los tiempos de ejecución de funciones y también resalta los cuellos de botella.

Ahora, ¿cómo usarlo? Básicamente, para usarlo, debes abrir Chrome Dev Tools y ir a la pestaña de rendimiento, comenzar a grabar e interactuar con la aplicación y detener la grabación. Analiza el Flame Graph. Así es como se verá el Flame Graph, lo que te ayuda a identificar las funciones lentas o el código bloqueante. Ahora, este enfoque ayuda a identificar problemas como bucles de larga duración o llamadas a API bloqueantes.

Luego tenemos Xcode Instruments, que es una herramienta nativa proporcionada por Xcode, que te ayuda a analizar el uso de CPU, memoria y GPU para la aplicación de iOS. Es invaluable para detectar fugas de memoria y optimizar el rendimiento de renderizado. También ayuda a depurar los bloqueos y las fugas de memoria. Ahora, esta es una interfaz de usuario para los instrumentos donde puedes elegir cualquiera de las opciones proporcionadas para perfilar, como el profiler de CPU o tal vez el registro o las llamadas de red, el profiler de tiempo, o lo que sientas necesario. Y aquí está una ejecución de muestra.

Luego tenemos el Android Profiler, que proporciona una vista en tiempo real del uso de CPU, actividad de red y asignación de memoria. Puedes usar su línea de tiempo de fotogramas para identificar los problemas de renderizado, a menudo llamados Jank. Ahora, aquí hay una ejecución de muestra realizada para perfilar la memoria en la aplicación de Android.

Ahora, pasando a optimizar el rendimiento de JavaScript. El hilo de JavaScript en React Native es el cerebro de tu aplicación. Para optimizar el hilo de JavaScript, aquí hay algunas prácticas que se pueden seguir. Asegúrate de desplazar los cálculos pesados a web workers o JSI. Asegúrate de optimizar las llamadas a API agrupando las solicitudes o añadiendo el debounce donde sea aplicable. Para un rendimiento fluido, idealmente debería permanecer inactivo alrededor del 90% del tiempo para poder manejar rápidamente las actualizaciones de la interfaz de usuario y las interacciones del usuario. Porque los cálculos pesados son un infractor común. Toma este ejemplo, donde calculamos un gran conjunto de datos de manera sincrónica. Esto congela el hilo de JS. Un mejor enfoque es desplazar tales tareas usando web workers. Aquí está. Ahora, con esta configuración, los cálculos ocurren fuera del hilo principal, manteniendo la interfaz de usuario receptiva. Alternativamente, para una integración aún más estrecha, usa JSI para ejecutar funciones nativas directamente.

5. Optimizing Performance: Tools and Techniques

Short description:

Presta atención a las funciones de JavaScript de larga duración al usar DevTools. El perfilado revela áreas para la optimización. Habilita el motor Hermes para mejorar el rendimiento. Optimiza el uso de flatlist. Retrasa tareas no urgentes para interacciones fluidas. Evita fugas de memoria. Logra animaciones suaves como la seda.

Al usar herramientas como Chrome DevTools o React DevTools, presta atención a las funciones de JavaScript de larga duración. El perfilado revela las áreas donde las optimizaciones como el debounce o el agrupamiento de eventos pueden hacer una diferencia tangible. El perfilado es un cambio de juego para depurar problemas de bloqueo de hilos.

Ahora, otra optimización crucial es habilitar el motor Hermes, un motor de JavaScript diseñado específicamente para React Native. Ahora, Hermes mejora el rendimiento precompilando el JavaScript en bytecode, lo que reduce drásticamente el tiempo necesario para analizar JS en tiempo de ejecución. También optimiza la recolección de basura para adaptarse mejor a los patrones de memoria de React Native. En Android, habilitar Hermes a menudo reduce los tiempos de inicio en frío en un 30% o más.

Ahora, veamos cómo podemos mejorar el rendimiento de renderizado. Al renderizar listas grandes, flatlist es un componente de referencia. Pero, un uso inadecuado puede perjudicar el rendimiento.

6. Optimizing Performance: Advanced Strategies

Short description:

Usa las props initial numToRender, maxToRenderPerBatch para el control de renderizado. Memoiza el render item para evitar re-renderizados innecesarios. Retrasa tareas no urgentes para interacciones fluidas. Limpia los efectos secundarios para prevenir fugas de memoria. Usa el native driver para animaciones suaves. Perfila con herramientas para un rendimiento optimizado.

Aquí hay algunas de las estrategias que puedes usar para optimizar el flatlist. Primero, usa las props initial numToRender, maxToRenderPerBatch, etc. al usar el flatlist para controlar cuántas veces o cuántos elementos se renderizan inicialmente y en cada lote. Siempre memoiza el render item para evitar re-renderizados innecesarios. Aquí tienes un ejemplo práctico donde he usado las props initial numToRender y maxToRenderPerBatch para asegurarme de que solo los elementos en el viewport se rendericen, lo que reducirá drásticamente la sobrecarga de renderizado.

Luego, para interacciones fluidas, esto a menudo requiere que retrases la tarea no urgente hasta que las animaciones o gestos se completen. Para esto, React Native proporciona la API de interaction manager. Usando esto, puedes diferir la tarea no urgente hasta después de que la animación se complete. Así que, aquí tienes un ejemplo de cómo funciona. En este caso, la obtención de datos se difiere hasta que la interacción del usuario se estabiliza, asegurando una experiencia sin interrupciones. Esta técnica es especialmente útil cuando tienes tareas en segundo plano compitiendo con animaciones.

Luego, llegando a la gestión de memoria, las fugas de memoria son asesinos silenciosos del rendimiento. Ahora, estas ocurren cuando agregaste un listener en el use effect, pero no lo eliminaste, y ese listener todavía se retiene en ese use effect. O cuando recursos como temporizadores, suscripciones o listeners no se limpian después de que un componente se desmonta. Así que, como regla general, siempre limpia los efectos secundarios. Por ejemplo, este código crea una fuga de memoria, pero esta versión lo soluciona al agregar esa lógica de limpieza. Así que, siempre limpia los efectos secundarios en tu hook use effect para evitar que los componentes retengan memoria innecesariamente.

Ahora, las animaciones son críticas para ofrecer una experiencia de usuario pulida en React Native. Sin embargo, a menudo introducen cuellos de botella de rendimiento si no se implementan efectivamente. Veamos cómo lograr animaciones suaves como la seda. Ahora, cuando se trata de animaciones, un error común es depender del JSThread para ejecutarlas. Esto causa retrasos siempre que el JSThread esté ocupado. Para evitar esto, siempre usa el native driver. Esto mueve la animación al hilo nativo. Al evitar la interferencia del JSThread, aseguras animaciones más suaves incluso durante cargas pesadas. Aquí tienes un ejemplo. Al establecer el useNativeDriver como true, la animación se descarga al hilo nativo, asegurando que se ejecute suavemente independientemente de la actividad del JSThread. Ahora, perfilar con herramientas como la línea de tiempo de Flipper o Android Profiler puede revelar las animaciones entrecortadas. Estas a menudo ocurren porque las animaciones dependen del JSThread. Usar el native driver descarga esta carga de trabajo al hilo de la UI, asegurando un rendimiento suave de 60FPS incluso durante el procesamiento pesado de JS.

7. Preloading, Caching, and Takeaways

Short description:

Precarga y almacena en caché imágenes para un renderizado fluido. Delega el procesamiento de gestos al hilo nativo. Descarga cálculos pesados para una UI fluida. Perfila la app y aprovecha herramientas modernas para la optimización. Prueba continuamente la app en condiciones del mundo real.

Luego, tenemos la precarga y el almacenamiento en caché. Ahora, precargar imágenes o animaciones asegura que estén listas cuando se necesiten. InteractionManager te permite diferir tareas de renderizado en segundo plano hasta que la UI esté inactiva. Luego, podemos usar bibliotecas como React Native FastImage para precargar las imágenes y almacenarlas en caché para su uso posterior. Luego, usando el React Native GestureHandler, esto te permite delegar el procesamiento de gestos al hilo nativo. Esto evita el retraso en los gestos, especialmente para interacciones complejas.

Luego, descargar cálculos pesados asegura que la UI permanezca fluida. Los hilos en segundo plano o los turbo modules son ideales para esto. Ahora, llegando a las conclusiones. Para cerrar, recuerda que la optimización del rendimiento es un proceso iterativo. Así que, siempre comienza perfilando tu aplicación para identificar los verdaderos cuellos de botella. Aprovecha herramientas modernas como Hermes y la nueva arquitectura de React Native para obtener ganancias significativas. Prueba continuamente tu aplicación en condiciones del mundo real para asegurar que tu optimización se mantenga.

Ahora, aquí hay algunos de los recursos que he utilizado y que me han ayudado a optimizar el rendimiento de mi aplicación. Y al final, me gustaría decir que el rendimiento no es una característica, es una expectativa del usuario. Hagamos que nuestras aplicaciones sean rápidas y agradables como el usuario lo demanda. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Maximizar el rendimiento de la aplicación optimizando las fuentes web
Vue.js London 2023Vue.js London 2023
49 min
Maximizar el rendimiento de la aplicación optimizando las fuentes web
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar.
Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño.
Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión