Cepillado Diario para la Velocidad del Sitio Web: Abrace el Ritual del Presupuesto de Rendimiento

Rate this content
Bookmark

En esta charla utilizaré la metáfora dental para introducir los presupuestos de rendimiento, al igual que cepillarse los dientes todos los días para mantenerlos limpios y saludables, deberías hacer lo mismo con tu sitio web estableciendo un presupuesto de rendimiento y comprobándolo en cada pull request en tus pipelines, el público objetivo es de nivel medio a avanzado, comenzaré con el ejemplo de la caries dental y la limpieza de los mismos, luego cepillándolos todos los días como aconseja el dentista, luego explicaré la caries como el problema de rendimiento y el presupuesto de rendimiento es como la pasta de dientes y a partir de aquí con las diferentes técnicas que los desarrolladores pueden hacer para prevenir cualquier pérdida en las ganancias de rendimiento que han logrado.

13 min
12 Dec, 2023

AI Generated Video Summary

Esta charla proporciona una introducción al rendimiento web y enfatiza la importancia de establecer metas y presupuestos de rendimiento. Explica los pasos para crear y aplicar un presupuesto de rendimiento y sugiere varias herramientas para el presupuesto de rendimiento. La charla también destaca la necesidad de hacer concreto y significativo el presupuesto de rendimiento, conectarlo con los objetivos empresariales e integrarlo en el pipeline de desarrollo. Concluye enfatizando la importancia de mantener el rendimiento y conectar con el orador para obtener más información.

1. Introducción al rendimiento web

Short description:

Hola a todos. Mi nombre es Ned Haddawood, un ingeniero de software senior que trabaja para Miro y un experto de Google en rendimiento web. Hoy, voy a llevarlos en un viaje para impresionar con los rituales del presupuesto de rendimiento web. Imagina el sitio web como un cuerpo humano, con el rendimiento siendo los dientes. Cuanto más alimentas tu sitio web con nuevas características, más necesitas cuidar el rendimiento. Al igual que los dientes malos, los problemas de rendimiento pueden no ser inmediatamente notables, pero pueden impactar enormemente tu experiencia. Así que comencemos.

Hola a todos. Mi nombre es Ned Haddawood. Soy un ingeniero de software senior que trabaja para Miro y un experto de Google en rendimiento web. Hoy, voy a llevarlos en un viaje para impresionar con los rituales del presupuesto de rendimiento web. Pero antes de eso, imaginemos juntos si el sitio web es como el cuerpo humano. El cuerpo humano crece al comer comida. Cuanto más comes, más necesitas cepillarte los dientes, más necesitas usar hilo dental a diario, ¿verdad? Si imaginas el sitio web como un cuerpo humano, yo imagino el rendimiento como tus dientes. Así que cuanto más alimentas tu sitio web con nuevas características, más necesitas cuidar el rendimiento. La similitud entre ambos es que si tienes un problema en los dientes, vas a visitar a un dentista para que te lo solucione. Si tienes un problema de rendimiento, podrías visitar o contratar a un experto en rendimiento para solucionarlo. Ambos problemas no pueden ser solucionados porque con una pequeña inspección, descubrirás que no te has preocupado demasiado por ellos.

Algunas personas podrían argumentar y decir, Bueno, no estamos haciendo eso y resulta que todo está bien. Al igual que estos dos caballeros. Pero aquí hay dos hechos. En primer lugar, los dientes malos también funcionan. Puedes comer con dientes malos, pero créeme, no vas a disfrutar de la comida. El otro hecho es que no sabes durante cuánto tiempo no vas a sufrir de un problema con tus dientes o tu rendimiento. Puede pasar mucho tiempo hasta que descubras que hay muchos problemas surgiendo. Así que cuanto antes actúes, mejor. Así que vamos a continuar.

2. Medición del Rendimiento y Establecimiento de Objetivos

Short description:

Si tienes un problema, lo primero que debes hacer es medirlo para entender su magnitud. Hay dos tipos de medición de rendimiento: pruebas sintéticas y medición de usuarios reales. Las pruebas sintéticas son consistentes y gratuitas, pero no súper precisas. La medición de usuarios reales proporciona datos precisos pero puede que no siempre sea gratuita. Al utilizar ambos métodos, podemos medir varias métricas y establecer objetivos de rendimiento basados en umbrales de investigación y recomendaciones. Es importante diferenciar entre los objetivos de rendimiento y los presupuestos de rendimiento. Si te encuentras con problemas de rendimiento, es crucial abordarlos y demostrar su impacto en el negocio en línea. Sugerir una masterclass de rendimiento y centrarse en mejorar el rendimiento puede dar resultados positivos.

Si tienes un problema. Lo primero que debes hacer es medir este problema para ver cuán grande o pequeño es este problema para que puedas actuar en consecuencia.

Entonces, para medir el performance, tenemos dos tipos de medición del performance. El primero es la testing sintética, también conocida como testing de laboratorio utilizando algo como Lighthouse. Tiene algunos beneficios y algunas desventajas. Lo bueno es que es muy consistente, es gratuito y es útil. Es fácil de hacer, pero no es súper preciso. Este es un problema. ¿Por qué no es súper preciso? Porque depende mucho de la máquina en la que se está ejecutando.

El otro tipo es la testing RAM, medición de usuarios reales, o también conocida como testing de campo. Esto es más interesante para nosotros hoy. Y esto viene con usuarios reales, plug in, opt in, y estamos obteniendo un montón de información sobre ellos que nos ayudará a tomar decisiones más y mejores. Es como geolocalización, navegador y tiempo, conexión a Internet, y así sucesivamente. Es muy preciso y podemos confiar en él, pero no siempre es gratuito. Una opción gratuita podría ser el Informe de User Experience de Chrome. Pero otras opciones de pago, como Calibre, Speedcurve, y así sucesivamente, también valen la pena. Como verás en un momento.

Entonces, utilizando ambos, puedes medir muchas métricas que son muy útiles para nosotros para medir el performance y para decidir si nuestro sitio web es suficientemente eficiente o no. También vienen con algunos umbrales de investigación y recomendaciones. Por ejemplo, frente a nosotros, tres recomendaciones basadas en los core web vitals. Para el LCP por ejemplo, necesitamos hacerlo en menos de 4 segundos al menos para que funcione bien. Y 2.5 segundos es una recomendación para una buena experiencia para el usuario. Esto es muy útil para establecer tu objetivo de performance. Y hay una diferencia entre el objetivo de performance y el presupuesto de performance como veremos en un momento.

Entonces, tienes un problema, fuiste al gerente y dijiste, Oye, tenemos un serio problema en nuestro performance. Tenemos problemas de performance. Simplemente dijo, está bien, podemos posponerlo después del próximo trimestre futuro, ¿verdad? Mostró el número. Esto no está afectando al negocio, ¿verdad? Pero sí, por supuesto, está afectando a tu negocio en línea. Y sugieres hacer una masterclass de performance para todo el equipo centrado en el performance para mejorarlo. Hiciste un buen trabajo, tú y tu equipo, y convertiste todo en verde.

3. La Importancia de un Presupuesto de Rendimiento

Short description:

Tu gerente estaba contento con el buen rendimiento y decidió añadir más características. Sin embargo, después de unas pocas iteraciones, las puntuaciones de rendimiento se vieron afectadas, impactando negativamente en el negocio. El equipo discutió soluciones, incluyendo una iteración de rendimiento e ignorar las necesidades de los usuarios. Finalmente, se dieron cuenta de la importancia de un presupuesto de rendimiento para prevenir regresiones y mantener una buena experiencia de usuario y objetivos de negocio.

Tu gerente estaba realmente contento. ¿Has visto a este tipo feliz antes? Este es tu gerente. Y dijo, bueno, vamos a compensar este tiempo que pasamos sin añadir nuevas características o añadiendo características de lista. Vamos a añadir más características ahora, ya que tenemos un buen performance.

Después de unas pocas iteraciones con nuevas características con menos o ninguna mantenimiento, nuestras puntuaciones se han visto afectadas. Así que el performance ahora es ámbar. No es rojo, pero es ámbar. No es verde como antes. El gerente, mira y dice, bien, estará bien, igual que el tipo al principio de esta presentación. Y sigue añadiendo algunas nuevas características sin mantenimiento para performance. Y esta vez, estamos afectados. Estamos muy afectados en el negocio.

Y descubrió que hay un problema. Está sentado y reuniéndose con el equipo, preguntando, ¿qué podemos hacer para esta regresión en performance con la adición de nuevas características? Y dice, está bien, hagamos una iteración de performance. Dijo, bueno, lo intentamos antes. Estamos alcanzando nuestros objetivos, pero no ayuda en la regresión, como puedes ver. Otro tipo dijo, bueno, ignoremos a los usuarios. Estamos construyendo nuevas características. Nos gustará. Y dijo, no, necesitamos preocuparnos por los usuarios. Esas son las personas que nos están pagando. El tercero dijo, un consejo muy sabio. Dijo, no nuevas características sin un presupuesto de performance. Lo más probable es que el gerente no escuchara la última parte, pero ya estaba enfadado con no nuevas características sin un presupuesto de performance. Pero fue un consejo muy sabio, muy importante. Aquí está lo que es un presupuesto de performance que será una solución muy útil para lo que tenemos. El presupuesto de performance es simplemente una forma de limitar las posibilidades de arruinar el performance. Lo mismo que tenemos de tu aplicación proporcionando algunas reglas y revisando diariamente. Su objetivo principal es prevenir las regresiones tanto en UX como en los objetivos de negocio. Esta es la solución perfecta para esta situación, ¿verdad? Así que empecemos con los rituales.

4. Creación y Aplicación de un Presupuesto de Rendimiento

Short description:

Tenemos algunos pasos para crear y aplicar un presupuesto de rendimiento. Primero, mide el rendimiento y establece metas para las métricas que te importan. Planifica y soluciona problemas hasta que estés satisfecho. Establece la meta alcanzada como el presupuesto de rendimiento y sigue iterando. Si estás comenzando un nuevo proyecto, utiliza una calculadora en línea para establecer el presupuesto. Aplica el presupuesto utilizando herramientas como Bundlesize.

Tenemos algunos pasos para los rituales. Lo primero de todo es crear un presupuesto, es aplicar el presupuesto. Hazlo permanecer. Y lidiar con nuevas características. Este mal que está afectando nuestros objetivos de performance.

Entonces, en primer lugar, cómo crear un presupuesto. Hay pasos si ya tienes algunos problemas de performance en tu sitio web mientras empezamos a pensar en un presupuesto. En primer lugar, mide la performance utilizando las herramientas de las que hablé al principio. Y establece metas para cada una de las métricas que te importan. A continuación, planifica y soluciona la mayoría de los problemas hasta que estés bastante satisfecho con el resultado. No tiene que ser perfecto. Después, puedes establecer esta meta que alcanzaste como un presupuesto de performance. Y sigue iterando. Cada vez que estás haciendo un nuevo progreso y sientes que este presupuesto puede ser mejorado, puedes mejorarlo. Mide, soluciona y mejora el presupuesto.

Si estás añadiendo un nuevo proyecto o en una etapa temprana del proyecto, es muy recomendable empezar con un presupuesto. Puedes usar esta hermosa calculadora en línea. Sólo dale el tiempo de carga objetivo y la conexión del usuario objetivo. Al igual que 4G o 3G o lo que sea. Y te da recomendaciones sobre los activos que tienes. El presupuesto viene en forma de archivo JSON, similar a este. Esto viene con la especificación del camino objetivo, especificando el tipo de presupuesto, tamaño o recuentos. Y especificando el tipo de recurso, script, terceros y así sucesivamente. Si estás midiendo tamaños, viene con número. Este número está en kilobytes. Si estás midiendo recuentos, viene con solo un número de este recurso. Entonces, tenemos un presupuesto. ¿Cómo aplicarlo? Hay toneladas de herramientas por ahí. Algunas de ellas son gratuitas y otras son de pago. Empecé con una herramienta gratuita llamada Bundlesize.

5. Herramientas para el Presupuesto de Rendimiento

Short description:

Puedes usar un paquete, archivo budget.json o package.json para agregar reglas para verificar si estás en presupuesto o no. Webpack y Lighthouse CI son herramientas gratuitas que proporcionan sugerencias similares y soporte de presupuesto. SpeedCurve y Caliper son herramientas de pago que ofrecen hermosos tableros y métricas detalladas. Consulta en línea para encontrar la herramienta que mejor se adapte a las necesidades de tu negocio.

Puedes usar un paquete, archivo budget.json o package.json para agregar estas reglas. Basado en eso, puede integrarse en tus GitHub Actions o algo así y verificar cada vez que estás construyendo si estás en presupuesto o no.

Otra herramienta gratuita, en Webpack, si ya tienes Webpack en tu proyecto actual, puedes configurarlo para performance y te da sugerencias similares para el tamaño del paquete y te dice mientras estás construyendo si estás excediendo el presupuesto o no con este hermoso mensaje de error.

Otra herramienta gratuita, si estás usando Lighthouse CI o no, pruébalo. Ahora viene con soporte para presupuestos con algo como una billetera ligera. Lo que es genial de eso es que usas un archivo separado, un archivo budget.json y puedes ejecutarlo contra cualquier URL agregada a tu CI y puedes ejecutarlo también contra el sitio web de tus competidores y ver cómo se comportan con el mismo presupuesto que estás estableciendo para ti mismo.

Una gran herramienta llamada SpeedCurve. Viene con este hermoso tablero que te dice qué está en presupuesto, qué está por debajo del presupuesto y qué está excediendo el presupuesto. Esto es muy útil y muy práctico, pero desafortunadamente es una herramienta de pago pero vale totalmente la pena con esta hermosa forma y con todas las advertencias y todas las notificaciones. También viene con una versión de prueba. Lo que es genial, viene con esta tendencia para cada una de estas métricas. Te dice cuándo agregaste algo que está excediendo tu presupuesto y así sucesivamente. Esto es muy útil y muy práctico. Otra herramienta de pago llamada Caliper. Puedes usarla más. Está haciendo lo mismo que SpeedCurve y viene con estos web hoax y también te da toda la información que necesitas sobre el usuario. Cuál es el perfil, cuál es el dispositivo utilizado, y cuál es la conexión a Internet en este momento. Y mucho más, puedes consultar en línea solo para nombrar algunos. Pero puedes consultar en línea y descubrir cuál se adapta mejor a tu negocio.

6. Haciendo que el Presupuesto de Rendimiento Perdure

Short description:

Para hacer que tu presupuesto de rendimiento perdure, necesitas hacerlo concreto y significativo. Conéctalo a los objetivos de negocio e intégralo en tu pipeline de desarrollo. Debe ser visible para los stakeholders y aplicable. Basado en datos y optimiza las características existentes para hacer espacio para las nuevas.

Ahora es el momento de hablar brevemente sobre cómo hacer que perdure. No permitir que los desarrolladores lo eviten. En primer lugar, necesitas hacer tu presupuesto concreto. Puedes decir que necesitamos lo más rápido posible. Puedes decir que quiero que LCP esté por debajo de tres segundos en móvil o conexión 4G. Eso es muy específico, muy concreto. O decir que quiero que la puntuación de performance sea superior al 95% para escritorio.

Necesitas hacerlo significativo. Así que no dirías que me gustaría simplemente mejorar la performance porque es una tendencia o algo así. No. Tienes que conectarlo a los objetivos de negocio, a las necesidades del negocio. Que sirva para algunas métricas de negocio como la tasa de rebote o la tasa de conversión y así sucesivamente.

Necesitas integrarlo. Así que no puedes simplemente ejecutarlo cada vez manualmente o en un script específico localmente. Necesitas integrarlo en un pipeline de ucicd. Así se ejecuta automáticamente y te da informes. Necesita ser visible para los stakeholders y los desarrolladores para actuar en consecuencia. Los stakeholders podrían necesitar algunas pausas para su velocidad y decirles que algunas características podrían afectar la performance. Es muy importante establecer esta cultura en el equipo.

También necesitas hacerlo aplicable. Así que cada vez que lo excedemos lo modificamos. Esa es una mala cultura. La buena cultura es que esta es una línea dura. Todos se unirán a ella y esto es algo para cambiarlo. Tiene que estar basado en data. Tenemos que tener algunos data específicos sobre el usuario que ha cambiado y en base a eso estamos cambiando lo que tenemos. Tenemos una nueva característica, ¿qué hacemos? En primer lugar, optimiza la característica existente. La mayoría de las características que están causando problemas en performance son características que se han añadido en una etapa temprana o en MVP. Simplemente adelante y optimízalo para dejar espacio para nuevas características. Elimina la característica existente.

7. Manteniendo el Rendimiento y Conectando

Short description:

Para mantener el rendimiento, elimina las características inválidas o al menos quítalas del camino crítico. Reconsidera la adición de nuevas características, considerando la visibilidad para los stakeholders y los desarrolladores. Prueba las nuevas características en EBTesting para medir su impacto y proteger las victorias de rendimiento. Recuerda que el rendimiento es un viaje diario, al igual que la higiene dental. Conéctate conmigo en Twitter y visita mi blog metahut.dev para más contenido.

Si lo eliminas, si ya no es válido o al menos quítalo del camino crítico. No añadas nuevas características. Sí, algunas características pueden ser muy molestas para el performance o al menos no las añadas al camino crítico. Solo repiénsalo cada vez basándote en esta visibilidad frente a los stakeholders y desarrolladores que será más fácil.

Finalmente, solo ejecuta cualquier nueva característica que pueda afectar el performance en EBTesting y descubre la medición y las métricas cómo se están comportando con la nueva característica. Con eso, los rituales deberían hacerse y deberías sentir la fuerza a tu alrededor. Estás protegido y cualquier victoria de performance que estés logrando estará protegida contra ser rota.

Solo recuerda que el performance es un viaje en curso al igual que la higiene dental, tiene que ser diario. Y promete cepillarte con performance junto con tus dientes a diario porque ambos mantendrán una sonrisa brillante en tu cara justo como esta. Muchas gracias por ver y si te gusta esta presentación se compartirá más tarde en mi Twitter, en este handle y para más información y más contenido como este lo encontrarás en mi blog metahut.dev Conectémonos. Gracias por ver.

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
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
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.
JSNation 2023JSNation 2023
26 min
When Optimizations Backfire
Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower.
In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.

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
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.