El Futuro de las Herramientas de Rendimiento

Rate this content
Bookmark

Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Adi Osmani es un gerente de ingeniería que trabaja en el equipo de Chrome en Google, especializado en herramientas de rendimiento y DevTools.

Las Core Web Vitals son métricas de rendimiento centradas en el usuario que incluyen Largest Contentful Paints, First Input Delay y Cumulative Layout Shift, cubriendo aspectos de carga, interactividad y estabilidad visual de la página.

DevTools permite grabar interacciones de usuario para medir el rendimiento a lo largo de un viaje completo, como añadir productos al carrito y proceder al pago, facilitando la optimización de la experiencia del usuario.

El inspector de animaciones en DevTools es una herramienta que permite modificar y ajustar las animaciones en las páginas web, como el tiempo, los retrasos y las duraciones, mejorando la experiencia visual del usuario.

Chrome Canary ha introducido mejoras como la importación y exportación de flujos de usuario en JSON y soporte de panel de Lighthouse para flujos, permitiendo una interacción más rica y mediciones durante las interacciones del usuario.

Interacción hasta la Próxima Pintura es una métrica de rendimiento que mide la respuesta visual de una página tras la interacción del usuario, ayudando a evaluar y mejorar la capacidad de respuesta de la página.

Los flujos de usuario grabados con DevTools pueden ser exportados y utilizados en herramientas como web page test y Cypress para pruebas más profundas y entender el rendimiento a lo largo de interacciones complejas de usuario.

Addy Osmani
Addy Osmani
21 min
16 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy discute el futuro de las herramientas de rendimiento, centrándose en enfoques centrados en el usuario, accionables y contextuales. La introducción destaca la experiencia de Adi Osmani en herramientas de rendimiento y su pasión por las características de DevTools. La charla explora la integración de los flujos de usuario en DevTools y Lighthouse, permitiendo la medición y optimización del rendimiento. También muestra la función de importación/exportación para flujos de usuario y el potencial de colaboración con Lighthouse. La charla profundiza aún más en el uso de flujos con otras herramientas como web page test y Cypress, ofreciendo capacidades de prueba en varios navegadores. El aspecto accionable enfatiza la importancia de métricas como Interacción hasta la Siguiente Pintura y Tiempo Total de Bloqueo, así como las mejoras en Lighthouse y las herramientas de depuración de rendimiento. Por último, la charla enfatiza la naturaleza iterativa de la mejora del rendimiento y el futuro centrado en el usuario, accionable y contextual de las herramientas de rendimiento.
Available in English: The Future of Performance Tooling

1. Introducción

Short description:

Hola a todos, mi nombre es Adi Osmani. Soy un gerente de ingeniería que trabaja en el equipo de Chrome en Google. Hoy vamos a hablar sobre el futuro de las herramientas de rendimiento. Es posible que me conozcas de internet por publicar sobre las características de DevTools y hablar sobre el rendimiento.

Hola a todos, mi nombre es Adi Osmani. Soy un gerente de ingeniería que trabaja en el equipo de Chrome en Google. Y hoy vamos a hablar sobre el futuro de las performance tooling. Es posible que me conozcas de internet por publicar sobre las características de DevTools y hablar sobre performance, pero he pasado por la pandemia de la misma manera que todos los demás. Ha sido una larga pandemia. Ha habido muchas personas recientemente anunciando que tienen nuevos trabajos. Yo también estoy emocionado de anunciar mi nueva posición. Es la posición fetal. He estado en ella durante algún tiempo. Probablemente voy a permanecer en ella justo después de esto. Los últimos dos años fueron una buena prueba de resistencia.

2. El Futuro de las Herramientas de Rendimiento

Short description:

Hoy, vamos a hablar sobre el futuro de las herramientas de rendimiento. El deleite puede significar hacer la experiencia más agradable a través de la adición de cosas como animaciones. DevTools tiene un inspector de animaciones incorporado. Es una de mis características favoritas. Hay esfuerzos para llevar dichas APIs a la plataforma. El futuro de las herramientas de rendimiento es centrado en el usuario, accionable y contextual. Core Web Vitals son tres métricas que cubren la carga, la interactividad y la estabilidad visual. Podemos hacer más para acercar cómo pensamos sobre el rendimiento a la experiencia del usuario.

Ahora, como mencioné, tiendo a hablar mucho sobre cosas como JavaScript y los paquetes de JavaScript, pero hoy quería dar un paso atrás y centrarme en la experiencia del usuario. Ahora, los usuarios a menudo experimentan las páginas web como un viaje, y hay algunos momentos clave para ello. ¿Está sucediendo? ¿Es útil? ¿Es usable? ¿Es agradable? El deleite puede significar hacer la experiencia más agradable a través de la adición de cosas como animaciones.

Ahora, como mencioné, me encanta compartir consejos de DevTools, y una cosa que algunas personas, ya sabes, muchas personas no saben es que DevTools en realidad tiene un inspector de animaciones incorporado. Aquí está en acción. Puedes usarlo para modificar el tiempo de las animaciones, retrasos, duraciones, y mucho más. Aquí está trabajando contra una aplicación de transiciones de página de Sarah Drasner. Me encanta el inspector de animaciones. Es una de mis características favoritas. Ahora, a veces la gente pregunta, bueno, ¿hay esfuerzos para llevar tales APIs a la plataforma? Jake Archibald dio una gran charla sobre una nueva API de Transiciones de Página. Y aquí hay una demostración genial de ella construida por la comunidad. Así que tenemos una transición de elemento compartido aquí donde al hacer clic en una URL, nos lleva a esta página. Volvemos atrás, y verás que tanto la barra de URL está cambiando, así como nos da estas hermosas animaciones. Ahora, queda mucho trabajo por hacer para soportar cosas como las Transiciones de Página en el inspector de animaciones, pero ya podemos ver cosas como ser capaces de reproducir estas animaciones y ver todos los diferentes tipos de movimiento que estamos añadiendo a nuestras páginas. Cosas realmente poderosas, y me encanta.

Así que a nuestra pregunta principal, ¿cómo es el futuro de las herramientas de rendimiento? Ahora, creo que son tres cosas. Creo que es centrado en el usuario, accionable y contextual. Empecemos con centrado en el usuario. Ahora, en los últimos años, Chrome ha hablado de la importancia de centrarse en las métricas de rendimiento centradas en el usuario, como las Core Web Vitals. Ahora, las Core Web Vitals son tres métricas. Son Largest Contentful Paints, First Input Delay, y Cumulative Layout Shift. Esto cubre la carga, la interactividad y la estabilidad visual. Ahora, estas son geniales. Recomendamos revisarlas utilizando datos reales en el campo, o en el laboratorio. Pero hay mucho más que podemos hacer para acercar cómo pensamos sobre el rendimiento a la experiencia del usuario. Ahora, probablemente hay un conjunto de viajes de usuario centrales que te importan en tu sitio estos días. Esto no es algo que las herramientas de rendimiento de laboratorio, o las herramientas que usamos en nuestros portátiles, hayan reconocido completamente todavía. En cambio, nos hemos centrado en cosas como el rendimiento de la carga inicial de la página. Esto sigue siendo muy importante, por cierto. Pero es una historia que hemos contado en algunos lugares, como en Lighthouse y en DevTools.

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.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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.

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 🤐)
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
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
WorkshopFree
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
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
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 🤐)