Por qué tu trabajo de rendimiento no es visible

Rate this content
Bookmark

Entre los core-web vitals y las herramientas de perfilado siempre hay un gran obstáculo, la aprobación de la empresa. Hay muchas formas en las que tu trabajo de rendimiento puede no ser visto o priorizado. Así que hablemos de ellas.

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

FAQ

La charla se centra en por qué el trabajo de performance a menudo no se ve y cómo se puede mejorar la visibilidad y priorización de este trabajo dentro de las listas de tareas pendientes en el desarrollo de productos.

Vinicius es un profesional que trabaja para Volvo Cars y vive en Suecia, originalmente de Brasil.

Se mencionan las herramientas de laboratorio, como Lighthouse, y las herramientas de monitoreo de usuarios reales, ambas importantes para evaluar el performance de las aplicaciones desde diferentes perspectivas.

Priorizar el trabajo de performance implica demostrar su valor y cómo este trabajo beneficia tanto a los ingenieros como a los usuarios, además de gestionar adecuadamente el tiempo y los recursos frente a otras tareas pendientes.

Se sugiere establecer un proceso de gobernanza claro, justificar los costos adicionales, manejar adecuadamente el flujo de trabajo y la fricción, y obtener mejoras medibles a través de datos bien enmarcados y análisis meticuloso.

Los datos de performance deben ser recopilados, analizados y presentados de manera que demuestren cómo las mejoras en el performance pueden influir positivamente en las métricas clave del producto y la experiencia del usuario.

La segmentación de datos es crucial para entender cómo diferentes aspectos del performance afectan a diversos segmentos de usuarios y cómo dirigir esfuerzos de optimización para impactar positivamente en los mercados clave.

Obtener apoyo ejecutivo requiere demostrar cómo las mejoras de performance pueden traducirse en beneficios tangibles para el negocio, como mejores tasas de conversión, y presentar datos y métricas claras que respalden estas mejoras.

Vinicius Dallacqua
Vinicius Dallacqua
25 min
13 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla analiza la importancia del trabajo de rendimiento y cómo impulsar la gobernanza del rendimiento. Se enfatiza la necesidad de enmarcar los datos, establecer presupuestos significativos y comprender las perspectivas tanto de ingeniería como de producto. La charla también destaca la importancia de entregar valor, establecer una sólida gobernanza del rendimiento y obtener la aprobación de la dirección. Además, se enfatiza la importancia de medir el rendimiento, optimizar a través de datos y recopilar datos de rendimiento utilizando herramientas como Speedcurve y Bugbear Sentry. El orador también menciona su programa de capacitación y expresa gratitud hacia el público.

1. Performance Work and Governance

Short description:

Mi charla trata sobre por qué el trabajo de rendimiento no se ve. Hablaremos sobre gobernanza y cómo impulsar la gobernanza del rendimiento. Nos importa el rendimiento porque las aplicaciones pueden usarse en condiciones impredecibles. Las herramientas de laboratorio y el monitoreo de usuarios reales proporcionan datos importantes. Priorizar el trabajo de rendimiento es un desafío cuando se trata de listas de tareas pendientes y limitaciones de tiempo. Demostrar valor y establecer un proceso de gobernanza requieren datos.

Mi charla trata sobre por qué el trabajo de performance no se ve, así que esto es un poco de establecer expectativas. No será una charla técnica muy profunda, así que hablaremos sobre gobernanza, y hablaremos sobre cómo impulsar la gobernanza del performance.

Me llamo Vinicius, y sí, soy originalmente de Brasil y aún vivo en Suecia. Trabajo para Volvo Cars. Una cosa que tenemos en esta sala ahora, y me gustaría pensar que a todos nos importa el performance. Así que, con suerte, a todos nos importa el performance. Esto es algo que es muy, muy fácil de entender por qué nosotros, como ingenieros, nos preocupamos por el performance. Nuestras aplicaciones pueden usarse en muchos conjuntos de condiciones diferentes que no son muy predecibles, y el performance como tema tampoco es muy predecible. Nuestros usuarios pueden poner nuestra aplicación en condiciones que son muy difíciles para que nuestras aplicaciones funcionen.

En cuanto al performance que estamos tratando de medir, espero que todos conozcamos las herramientas de laboratorio, y si conocemos las herramientas de laboratorio, es muy probable que conozcamos Lighthouse. Cuando se trata de herramientas y monitoreo y métricas, tenemos el laboratorio, y también tenemos las herramientas de monitoreo de usuarios reales. Por lo tanto, es importante tener las dos facetas del ecosistema de herramientas, para que tenga sus datos de laboratorio y tenga esas primeras regresiones que se detectan, y tenga sus métricas de usuarios reales donde tendrá una representación real de cómo se ejecuta su aplicación en el mundo real.

Pero no sé cuántos de ustedes trabajan en equipos de producto, y todos conocemos la lista de tareas pendientes. La lista de tareas pendientes es esa entidad, esa presencia que siempre está acechando nuestro progreso, y en su mayoría es donde todas las buenas intenciones van a morir. La pregunta para la mayoría de nosotros que estamos tratando de poner algo de trabajo de performance ahí afuera en el mundo es ¿cómo haces que tu trabajo se priorice fuera de la lista de tareas pendientes? Si eres como yo, te has sorprendido, esto es, por cierto, una de nuestras oficinas en Suecia, pero todas son mías, y esto está dentro del salón principal de nuestra bonita oficina de Gotemburgo en Suecia. Si eres como yo, te has sorprendido, al igual que Jake, sentado y preguntándote cómo puedes asegurarte de sacar ese buen trabajo ahí afuera. ¿Cómo haces que el trabajo de performance mejore tus métricas y gritarle al mundo que mejoraste el performance del usuario? Al igual que todos los demás, también se convierte en un producto. La mayoría de las veces, las cosas a tu alrededor están en llamas. Y te preguntas cómo lograr hacer este trabajo. ¿Entonces, cómo lo hacemos? ¿Cómo haces que nuestra lista de tareas pendientes esté en llamas? Como un pequeño complemento, intenté sacar esta escena de nuestros modelos favoritos para generar una imagen, y esto es lo que se me ocurrió. Así que es bastante fiel a la vida, si me preguntas. Incluso los ojos de pez y cosas así. Pero, ya sabes, como equipo de producto, siempre estamos ocupados lanzando características. Al menos esa es la mentira que nos decimos, ¿verdad? Pero siempre nos vemos obligados a pensar en qué es lo siguiente que podemos lanzar y qué tan rápido podemos hacerlo. Si trabajas para una empresa abierta, tienes a tus interesados por encima de ti, o estás tratando de abrir tu empresa, y tienes a tus interesados por encima de ti. Siempre hay este tipo de restricción de tiempo al tratar de enfocarse en lanzar características. Y siempre estás luchando contra el reloj, por lo que es muy difícil priorizar el trabajo de performance porque siempre estás persiguiendo la siguiente cosa que debes lanzar. Entonces, la verdadera pregunta al tratar de impulsar el performance es ¿cómo demuestras valor? Entonces, demostrar valor en este tipo de entorno es cómo logras demostrar que los otros costos de trabajar en performance realmente beneficiarán tanto a tus ingenieros como a tus usuarios, ¿verdad? ¿Y cómo configuras este proceso de gobernanza? ¿Cómo justificas los costos adicionales? ¿Cómo manejas el flujo versus la fricción, tanto para tus ingenieros como para sacar el trabajo a tiempo? ¿Cómo obtienes mejores resultados del trabajo que estás realizando? Porque si estás trabajando en performance, algo que no está estrictamente relacionado con las características, ¿cómo puedes asegurarte de que lo que envíes se convierta en una mejor versión de tu producto? No solo desde la perspectiva de ingeniería. Y la respuesta siempre es data. Y aunque no este tipo, la respuesta siempre es data. Entonces, los datos de los que estamos tratando de hablar, nuevamente, volviendo al laboratorio y a los datos de ejecución.

2. Framing Data and Performance Monitoring

Short description:

Es necesario enmarcar tus datos, establecer presupuestos significativos y metas realistas para las herramientas de laboratorio. Comprende tanto la perspectiva de ingeniería como la del producto para entregar un producto impactante. Agrupa las métricas de rendimiento y las métricas del producto para obtener mejores conocimientos. Obtener mejores atribuciones es crucial para un buen monitoreo del rendimiento.

Entonces, estás tratando de obtener perspectiva de tus herramientas automatizadas, tu CICD, pero también de tus usuarios. Pero cuando se trata de un entorno de producto, lo más importante es cómo enmarcas esos datos. ¿Cómo te aseguras de que... Porque todos podemos configurar alguna instrumentación alrededor de nuestro producto y recopilar muchos datos y ponerlos en un panel de control, pero ¿cómo te aseguras de que ese panel de control sea valioso, verdad? ¿Se utiliza? ¿Y cómo puedes aprovechar al máximo los datos que utilizas?

Entonces, hagamos un pequeño viaje rápido al laboratorio de herramientas. Echemos un vistazo a Lighthouse. Y dentro de tus herramientas de laboratorio, debes asegurarte de configurar tus datos en términos de buenas barreras de protección. ¿Cómo te aseguras de que tus datos tengan buenas barreras de protección? Para las herramientas de laboratorio, debes asegurarte de tener presupuestos significativos y metas realistas, y también metas alcanzables. Así que tus metas alcanzables son... Así que te aseguras de enviar mejoras progresivas. Así que tienes iteraciones rápidas de tu producto. Y a partir de esas iteraciones más rápidas, enviarás valor más rápido. Por lo tanto, enmarcar tus datos en un buen conjunto de restricciones, en presupuestos realistas que puedas alcanzar. Una vez que hayas configurado tus herramientas de laboratorio, una vez que hayas terminado esa parte, entonces llega el momento de mirar tus datos de usuarios reales.

Pero para los usuarios reales, debes asegurarte de comprender no solo desde la perspectiva de ingeniería, sino también desde la perspectiva del producto. Porque tu aplicación utiliza diferentes configuraciones de diferentes formas, y debes comprender que estás tratando de resolver cosas desde dos perspectivas. Tienes tu equipo de ingeniería y tu equipo de producto. Y puedes adivinar cuál es cuál por su foto, por cierto. Pero debes asegurarte de representar ambos lados de la historia. La ingeniería y tu producto. Con el fin de entregar la versión más impactante de tu producto. Entonces, ¿cómo obtienes más de tus datos redondos? Para darle forma a tus datos redondos, debes asegurarte de agrupar tus métricas de rendimiento y tus métricas del producto juntas. Porque si solo miras desde una perspectiva, dejarás de lado la otra. Y todos somos ingenieros y siempre nos importa la parte de ingeniería de las métricas. Pero debemos asegurarnos de que lo que intentamos enviar esté moviendo la aguja también en el lado del producto. Porque si estás tratando de obtener la aprobación para trabajar en el rendimiento, debes asegurarte de que ese sea el objetivo, el objetivo que estás tratando de lograr. Y obtener mejores atribuciones es una de las mejores cosas que puedes hacer si estás tratando de establecer un buen monitoreo del rendimiento. Así que tener las métricas por sí solas es solo una parte de la historia. Debes comprender a partir de esas métricas, de ese monitoreo, qué tipo de problemas están surgiendo. Porque si solo tienes números para las métricas y no tienes buenas atribuciones, ni siquiera sabes por dónde empezar. Solo tienes números.

QnA

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

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.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.