El rendimiento es la experiencia del usuario: Optimizando el frontend para los usuarios

Rate this content
Bookmark

En la mayoría de los sistemas informáticos, la definición de rendimiento es lo suficientemente clara: hacer más trabajo en menos tiempo con menos recursos. Para una aplicación web frontend, esto rara vez es el caso. Las aplicaciones frontend no solo deben ser eficientes en recursos, sino que también deben "sentirse" eficientes para el usuario. Esto hace que el rendimiento en el frontend sea principalmente un problema de experiencia del usuario.


Únete a mí mientras nos sumergimos en las métricas de rendimiento importantes de una aplicación frontend moderna, cómo medirlas y cómo optimizarlas tanto para la máquina como para el usuario.

8 min
20 Jun, 2022

Video Summary and Transcription

La charla de hoy trata sobre el rendimiento del software y la optimización del frontend para el usuario. Se enfatiza la importancia del rendimiento pasivo, que es una medida subjetiva de cómo los usuarios perciben el rendimiento de la aplicación. Las técnicas para mejorar el rendimiento incluyen el uso de una caché compartida, HTTP2, la precarga de solicitudes y CDN. La optimización del rendimiento del frontend implica evitar el bloqueo del hilo principal, cargar los recursos necesarios primero, utilizar barras de progreso e implementar patrones optimistas. También se destaca la importancia de tener en cuenta las expectativas cambiantes de los usuarios a lo largo de su interacción con la aplicación.

Available in English

1. Introducción al rendimiento del software

Short description:

Hoy estamos hablando de su experiencia optimizando el frontend para el usuario. El rendimiento del software es una medida de qué tan bien se está ejecutando su aplicación, realizando su tarea y utilizando los recursos del sistema. En el frontend, el rendimiento del software incluye cómo se sienten los usuarios acerca de la aplicación. El rendimiento pasivo es una medida subjetiva de qué tan bien el usuario piensa que la aplicación está funcionando. Se puede medir indirectamente a través de las tasas de rebote, que indican si los usuarios abandonan después de unos segundos. Para mejorar el rendimiento pasivo, puede reducir el tiempo entre la entrada del usuario y la carga del sitio web mediante el uso de una caché compartida.

su experiencia optimizando el frontend para el usuario.

Mi nombre es Chinayan Onwebu. Soy un ingeniero de software senior en HubSpot. ¿Qué es el rendimiento del software? Todos sabemos qué es el rendimiento del software, o al menos tenemos una idea. Básicamente, es una medida de qué tan bien se está ejecutando su aplicación, qué tan bien está realizando su tarea y qué tan bien está utilizando los recursos del sistema que están disponibles para ella. En el frontend, sin embargo, el rendimiento del software es todo esto, más cómo se sienten los usuarios acerca de la aplicación. Entonces, si el usuario no se siente bien acerca de la aplicación, no importa qué tan rápido sea su aplicación en realidad, su aplicación no está funcionando bien. Porque el frontend se ejecuta para el usuario, medimos el rendimiento del frontend en relación con el usuario. Por eso lo llamamos rendimiento pasivo. Esto es una medida subjetiva de qué tan bien se está ejecutando su aplicación. Qué tan bien el usuario piensa que su aplicación está funcionando. El rendimiento pasivo es muy difícil de medir. No se puede medir directamente. No hay forma de saber cómo se sienten los usuarios acerca de su aplicación. Hay formas de medirlo indirectamente. Primero, puede utilizar las tasas de rebote. Si obtiene muchas rebotes, significa que muchos usuarios abandonan después de los primeros segundos en su sitio web. Por lo general, es una señal de que su aplicación no está funcionando muy bien. Los usuarios piensan que su aplicación es lenta. Tal vez las páginas no se están cargando. Por supuesto, también podría ser algún otro problema. Tal vez no sea el contenido que esperan. Pero por lo general, es una señal de un mal rendimiento. Los usuarios piensan que su aplicación tiene un mal rendimiento. Las investigaciones han demostrado que los usuarios abandonarán un sitio web entre tres y cinco segundos después de esperar a que el sitio web Si su aplicación no muestra contenido en los primeros cinco segundos, hay una alta probabilidad de que pierda muchos usuarios. ¿Cómo mejoramos realmente el rendimiento pasivo de nuestra aplicación? Siempre puede mejorar el rendimiento pasivo mejorando el rendimiento real. En primer lugar, desea reducir el tiempo entre cuando el usuario ingresa a su sitio web, presiona enter y cuando su sitio web realmente se carga. Queremos utilizar una caché compartida,

2. Mejorando el rendimiento del software

Short description:

Si un usuario visita una página que ya está en caché, un segundo usuario recuperará la caché. El uso de HTTP2 puede mejorar enormemente el rendimiento, especialmente para sitios web con muchos recursos. La precarga de solicitudes importantes y el uso de una CDN como Cloudflare también pueden mejorar el rendimiento. El renderizado en el lado del servidor permite a los usuarios ver el contenido de inmediato, mejorando el rendimiento pasivo. Evite bloquear al usuario utilizando trucos como evitar tareas intensivas de CPU en el frontend y cargar recursos gradualmente.

por ejemplo. Una caché compartida es una caché que se comparte entre usuarios. Entonces, si un usuario visita una página y esta página ya está en caché, un segundo usuario que visita la misma página también recuperará una caché de esta página. También puedes usar HTTP2. HTTP2 mejorará enormemente tu rendimiento. Esto es especialmente cierto si tu sitio web carga muchos recursos. Esto incluye sitios web que tienen muchas imágenes, por ejemplo, o sitios web que cargan muchos scripts, mucho CSS. HTTP2 hará que la carga de recursos en paralelo sea mucho, mucho más rápida que HTTP1. También puedes precargar solicitudes importantes. Hay varias formas de hacer esto. Precargar solicitudes importantes hará que tu sitio web o tu aplicación se sientan más ágiles para el usuario. El uso de una CDN resolverá una serie de problemas en tu aplicación sin que tengas que hacer nada. Usar Cloudflare, por ejemplo, te dará una caché compartida sin que tengas que hacer nada. También te dará HTTP2 sin que tengas que hacer nada. Por último, puedes usar el renderizado en el lado del servidor. El renderizado en el lado del servidor se asegura de que cuando se carga la página, el usuario vea el contenido de inmediato. Entonces, el usuario no tiene que esperar a que se cargue todo el JavaScript antes de poder ver el contenido de tu sitio web. Usando el renderizado en el lado del servidor, los usuarios ya pueden ver el contenido y luego puedes inyectar el script, hidratar la página más tarde para la interacción del usuario. Luego puedes mejorar directamente el rendimiento pasivo haciendo algunos trucos. Estos trucos no cambian nada en tu sitio web. No cambian cómo funciona tu sitio web en realidad, pero cambian cómo perciben los usuarios la aplicación de forma pasiva.

3. Optimizando el rendimiento del frontend

Short description:

Cuando se realizan tareas intensivas de CPU en el frontend, evite bloquear el hilo principal. Cargue solo los recursos necesarios al principio para evitar bloqueos en el renderizado. Use barras de progreso en lugar de spinners para brindar a los usuarios una sensación de progreso. Implemente patrones optimistas para marcar las tareas como completadas antes de que finalicen. Evite bloquear a los usuarios permitiéndoles seguir utilizando la aplicación mientras esperan que se completen las tareas. Considere las expectativas cambiantes de los usuarios a lo largo de su interacción con la aplicación.

y uno de ellos es evitar bloquear al usuario. Entonces, si está realizando algunas tareas intensivas de CPU en el frontend, digamos que está renderizando imágenes, debe evitar bloquear el hilo principal. Siempre use un hilo de trabajo para cualquier tarea que tome más de unos pocos milisegundos. El estándar recomendado es de 16 milisegundos. Si va a tomar más de 16 milisegundos, debe moverlo a un hilo separado. No debe bloquear el renderizado. Bloquear el renderizado es muy, muy fácil de hacer y muy difícil de evitar. Pero una regla simple para evitar bloquear el renderizado es cargar solo los recursos que necesita al principio y luego cargar el resto más tarde. Entonces, en Webpack por ejemplo, puede dividir su script en fragmentos y luego cargar solo los fragmentos importantes primero y luego cargar los otros fragmentos más tarde o según sea necesario. De esta manera, no bloqueará el renderizado de la página. Solo solicitará lo que es necesario al principio. También puede evitar el uso de spinners y en su lugar utilizar esqueletos. Los spinners hacen que los usuarios piensen que su sitio web es lento. Es psicológico. No saben lo que están esperando. Solo saben que están esperando algo. Cuando sea posible, intente usar una barra de progreso en lugar de solo un spinner. El progreso le dice al usuario el progreso real de lo que están esperando para que no se queden en la oscuridad. Use patrones optimistas. Hay muchos recursos en línea que explican lo que esto significa. Cuando usas patrones optimistas, marcas una tarea como completada antes de que realmente se complete. Y solo cuando falla, le dices al usuario que esto ha fallado. Gmail es un muy buen ejemplo de esto. Cuando envías un mensaje, Gmail te dice que el mensaje se ha enviado antes de que el correo se haya enviado. Te hace sentir como si Gmail fuera instantáneo, pero no lo es. No bloquees al usuario. Este es un error muy común. ¿Qué significa bloquear al usuario? Si, por ejemplo, un usuario envía un formulario en tu aplicación y luego muestras un spinner de espera a pantalla completa, diciéndole al usuario que espere hasta que el formulario se envíe antes de que puedan continuar. Esto rompe la experiencia del usuario y hace que el usuario sienta que tu aplicación es más lenta de lo que realmente es. En lugar de hacer esto, puedes mostrar una notificación o puedes permitir al usuario usar otras partes de la aplicación mientras espera que se envíe este formulario. Finalmente, debes tener en cuenta que las expectativas del usuario cambian a menudo mientras están en tu aplicación. La expectativa de un usuario que acaba de llegar a tu aplicación es muy diferente de la expectativa de un usuario que está en la página de pago. Los nuevos usuarios tienen menos paciencia que los usuarios que ya están comprometidos con lo que tienes para ofrecer, así que tenlo en cuenta y esto te ayudará. Muchas gracias por asistir y espero verte nuevamente la próxima vez.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured 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 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
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 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.