DEADScript: El Papel de JavaScript en la Sostenibilidad Web

Rate this content
Bookmark

En los círculos de rendimiento web, tendemos a observar de cerca los tiempos de pintado, los tiempos de bloqueo y muchos otros tiempos métricos, que todos contribuyen al análisis de la experiencia del usuario. En 2023, hemos comenzado a prestar más atención a las toneladas métricas. DEADScript es una presentación que destaca los recursos que cargamos en el desarrollo moderno, y el papel único de JavaScript en este inquietante dilema ambiental.

21 min
05 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la sostenibilidad digital y el papel de JavaScript en la sostenibilidad web. Destaca el impacto de la intensidad de carbono de la electricidad y el peso de la página en las huellas de carbono. La charla también examina la contribución de JavaScript a la huella de carbono en dispositivos móviles y enfatiza la importancia de reducir las solicitudes innecesarias. También se menciona la introducción de la herramienta de control de carbono, que proporciona datos de rendimiento y estima las huellas de carbono.

Available in English

1. Introducción a Dead Script

Short description:

¡Buenos días, DOM! Tiendo a hablar sobre rendimiento web y métricas en el trabajo. Hoy voy a hablar sobre el medio ambiente y la sostenibilidad, específicamente la sostenibilidad digital en relación con JavaScript. Bienvenidos a mi charla, Dead Script, el papel de JavaScript en la sostenibilidad web. Esta grabación es el 17 de mayo, el aniversario de ECMA International.

¡Buenos días, DOM! Me conocen, me gusta saludar al DOM cada mañana. Pero también voy a decir buenos días, Ámsterdam, o debería llamarlo GCE Europe West 4. Así es como lo llamamos en el trabajo, es una de nuestras zonas. Pensé que era bastante gracioso.

De todos modos, vayamos al grano. Tiendo a hablar mucho sobre el performance web. Es algo que hago en el trabajo. También son los ingenieros con los que hablo en el trabajo. Y, ya saben, cubrimos cosas como, no sé, Core Web Vitals, como esa nueva métrica que se anunció hace unas tres semanas o algo así. Pero definitivamente hablo de métricas, porque estamos rodeados de métricas en el trabajo. Así que hablaré sobre métricas de pintado. Hablaré sobre métricas de velocidad. También hablaré sobre métricas de tiempo. Pero hoy voy a hablar sobre toneladas métricas. ¿Eh? ¿De qué puede tratarse eso? Bueno, voy a hablar sobre el medio ambiente. Voy a hablar sobre sostenibilidad. Y ¿qué piensas cuando escuchas palabras como medio ambiente y sostenibilidad? ¿Qué se te viene a la mente? Bueno, seré muy sincero y honesto. Mi hermano se compró un Tesla, y estoy un poco celoso porque es muy bonito. Así que he estado pensando en este Ioniq 6, que es bastante icónico, de Hyundai. Me encanta la forma. Pero volvamos al tema que nos ocupa, que es la sostenibilidad. Y específicamente, vamos a hablar de la sostenibilidad digital. Y como esta es la conferencia JS Nation, vamos a hablar de la sostenibilidad digital en relación con JavaScript.

Así que les doy la bienvenida a mi charla, que he llamado Dead Script, el papel de JavaScript en la sostenibilidad web. Ahora, un poco de contexto. Esta grabación es el 17 de mayo, que es el aniversario de ECMA International, el organismo responsable de estandarizar JavaScript. Para aquellos que lo sepan, JavaScript alguna vez se llamó LiveScript por un breve momento. Así que pensé que Dead Script, LiveScript, era interesante. De todos modos, sigamos adelante. Mi nombre es Henri.

2. Digital Sustainability and ICT

Short description:

Me puedes encontrar en la mayoría de las redes sociales como Henri Helvetica. Trabajo en Catchpoint y hablo sobre rendimiento, especialmente sobre Webpagetest. La sostenibilidad digital es complicada, con muchos factores a considerar. Se relaciona con cómo se genera la electricidad y alimenta las tecnologías de la información y comunicación (TIC). Las TIC utilizan el 7% de la electricidad mundial y son responsables del 4% de las emisiones de CO2 a nivel mundial. Esto supera a la industria de la aviación e incluso a algunos países. También debemos hablar sobre los centros de datos, las redes y los dispositivos de consumo, que son parte de las TIC. La ubicación es otro factor importante a considerar.

Me puedes encontrar en la mayoría de las redes sociales como Henri Helvetica.

Trabajo en esta increíble empresa llamada Catchpoint.

Y una de las cosas que hago en Catchpoint es hablar sobre el performance, y especialmente sobre esta fantástica herramienta que tenemos, que se llama Webpagetest, el estándar y la referencia en las pruebas de performance web.

Soy de la mejor ciudad del planeta, que se llama Toronto en Canadá.

También me gusta correr distancias cortas.

Así que me gusta usar el hashtag devs who run. Si tú también corres, siéntete libre de usarlo.

Bien, sigamos adelante.

Como mencioné hace un momento, hoy vamos a hablar sobre sostenibilidad.

Lo que no mencioné es que la sostenibilidad digital es bastante complicada.

Hay tantos factores. Es un poco como una ciencia inexacta.

Hay tantas partes móviles que deben ser consideradas, tanto grandes como pequeñas.

A veces no estás seguro de cómo encajarlo todo en esta ecuación cuadrática.

Pero necesitamos hablar de ello porque tiene mucho que ver con cómo se genera la electricidad, y eso influye en la conversación más amplia que vamos a tener hoy.

Pero esa electricidad también es la que alimenta las TIC, que son las tecnologías de la información y comunicación.

¿Qué son esas tecnologías?

Bueno, son realmente todas las tecnologías digitales que te rodean, o que dependen de teléfonos celulares, computadoras, laptops, televisores, internet, Wi-Fi, etc., etc., etc.

Así que las TIC están realmente a nuestro alrededor.

De hecho, las TIC utilizan el 7% de la electricidad a nivel mundial. Bastante impresionante.

De hecho, son responsables del 4% de las emisiones de CO2 a nivel mundial.

Eso es más que la industria de la aviación, e incluso más que algunos países por sí solos.

Bastante impresionante.

Pero al hablar de eso, también debemos hablar sobre cosas como los centros de datos, que son parte de las TIC, las redes y los dispositivos de consumo.

Como mencioné, la laptop en la que estoy grabando esta charla, el teléfono celular que no deja de sonar durante mi presentación, no sé.

La televisión en la que veo Netflix, o ESPN, o deportes, lo que sea.

Eso es todo TIC, y estamos rodeados de eso.

Otra cosa, muy importante a considerar, es la ubicación.

Sabes lo que dicen, ubicación, ubicación, ubicación, muy importante.

Bueno, esto es a lo que me refiero.

3. Electricity Carbon Intensity and Page Weight

Short description:

Ahora, veamos la intensidad de carbono de la electricidad en 2022. Las áreas más oscuras representan electricidad sucia, mientras que las áreas más claras indican fuentes de energía más limpias como la solar y eólica. Continuando, la intensidad de carbono de la electricidad de las naciones del G7 muestra a Japón en la parte superior por las razones equivocadas, mientras que Canadá y Francia son los países más limpios. Existen múltiples formas de producir electricidad, incluyendo la quema de combustibles fósiles para obtener electricidad sucia o el uso de energía eólica y solar para obtener energía más limpia. Estos factores contribuyen a la huella de carbono, que se ve influenciada por los centros de datos y los recursos que envían a nuestros dispositivos. La sostenibilidad digital es compleja y, aunque hay debates sobre cómo calcular las huellas de carbono, la métrica del peso de la página ha sido ampliamente aceptada como una correlación cercana a las emisiones.

Ahora, si observas este mapa, es un mapa mundial de la intensidad de carbono de la electricidad en 2022. ¿Qué es la intensidad de carbono? Bueno, te lo diré ahora mismo. Es una medida de qué tan limpia es nuestra electricidad. Básicamente, si observas este mapa, las áreas más oscuras es donde probablemente están generando electricidad sucia, y las áreas más claras es donde pueden tener cosas como energía solar o energía eólica, que es mucho más limpia. Ahora, eso influye en tu huella de carbono.

Ahora, veamos este otro gráfico aquí, que es la intensidad de carbono de la electricidad de las naciones del G7. Y ves a Japón en la parte superior, pero por las razones equivocadas. Los países más limpios aquí son Canadá y Francia. Sabes, hay cosas realmente interesantes que están surgiendo en Francia, muchos estudios sobre emisiones y demás, que me sorprendieron un poco. No sabía que estaban tan involucrados en eso, pero es bueno saberlo. De todos modos, sigamos adelante.

Como he estado mencionando, existen múltiples formas de producir electricidad. Puedes quemar combustibles fósiles y tener lo que llamaremos electricidad sucia, o como dije, utilizar energía eólica y solar para que las cosas sean mucho más limpias. Y estas cosas influyen en tu huella de carbono. Una vez más, una ciencia inexacta. Entonces, esa electricidad alimenta los centros de datos que utilizamos. Los centros de datos que envían los recursos a través del cable hacia los dispositivos que utilizamos. Y en última instancia, todo eso influye en la huella de carbono, de lo que vamos a hablar hoy. Pero como mencioné antes, la sostenibilidad digital es realmente complicada. Ha habido discusiones muy animadas, a veces argumentos, sobre cómo tener en cuenta algunos de estos otros elementos en los cálculos de la huella de carbono. Pero en última instancia, muchos han acordado una métrica en particular. Nuevamente, no es la mejor, pero es la que se correlaciona más estrechamente, o muy bien, con las huellas de carbono y las emisiones. Y eso es el peso de la página. El peso de la página ha sido una métrica clásica de rendimiento. Ha existido durante bastante tiempo. Es una de las más fáciles de calcular. Es la cantidad de recursos que se envían a través del cable, y determinamos si son tantos kilobytes o tantos megabytes. Esperemos que no sean tantos. Eso se correlaciona muy bien con... El peso de la página se correlaciona muy bien con las emisiones de carbono, y vamos a hablar de eso hoy.

4. JavaScript's Impact on Carbon Footprint

Short description:

Hoy examinaremos datos sobre el impacto de JavaScript en la huella de carbono, específicamente en dispositivos móviles. En el percentil 75, una página de 4MB emite 1.38 gramos de CO2. El JavaScript enviado en este percentil es de alrededor de 857 kilobytes. En el percentil 90, se envía más de un megabyte de JavaScript. Además, el 40% y el 44% del JavaScript en los percentiles 75 y 90, respectivamente, no se utiliza. Estos datos desperdiciados contribuyen al impacto ambiental.

Lo que haremos hoy es analizar algunos data, y específicamente vamos a analizar data con respecto a JavaScript, y veremos cómo y dónde JavaScript influye en la conversación sobre la huella de carbono.

Muy bien, vamos. Ahora, solo un pequeño aviso, todo lo que... Todos los data que compartiré hoy se refieren principalmente a dispositivos móviles, y menciono esto todo el tiempo porque la sociedad prácticamente nos ha dicho que estamos en dispositivos móviles prácticamente todo el tiempo. Entonces, gran parte de los data que compartiré hoy se refieren realmente a dispositivos móviles.

Entonces, vamos. Veamos el peso de la página en el percentil 75. Es aproximadamente 4 megabytes. Bien, un tamaño un poco grande, está en el lado grande, pero realmente está ahí para comenzar a pintar el panorama. Ahora, si observamos las emisiones de carbono en dicho percentil P75, estamos hablando de 1.38 gramos de CO2 en el percentil 75. Ahora podemos comenzar a ver que, ok, una página de 4 megabytes, 1.38. Bien, más o menos entendemos lo que está sucediendo.

Ahora, en el percentil 75, nuevamente, se envía JavaScript a través del cable de 857 kilobytes. Bien, casi un megabyte de JavaScript en el percentil 75. En el percentil 90, estamos enviando más de un megabyte. De hecho, estamos enviando 1,367 kilobytes. Por cierto, estas estadísticas provienen del archivo de HP. Un tesoro fantástico de data que deberías leer, por cierto, pero ahora podemos comenzar a ver la cantidad de JavaScript que estamos enviando a través del cable.

Otra conversación importante es el hecho de que también podemos ver JavaScript no utilizado, que se envía a través del cable. Entonces, en el percentil 75, el 40% del JavaScript enviado a través del cable en realidad no se utiliza. Increíble. Para seguir con eso, en el percentil 90, vemos que el 44% del JavaScript enviado a través del cable no se utiliza. Nuevamente, ¿qué significa eso? Lo estamos enviando a través del cable. Lo estamos analizando, pero está ahí sin nada que hacer. Entonces, estamos viendo datos desperdiciados. De hecho, en el percentil 90, vemos más JavaScript no utilizado que JavaScript que se envía a través del cable en el percentil 50. Bien. Una vez más, estoy pintando este panorama de que hay mucho JavaScript no utilizado que se envía a través del... Se envía a través del cable, además del hecho de que estamos enviando mucho JavaScript a través del cable, en general. Y créeme, hay mucho más.

5. El Impacto de las Solicitudes en la Sostenibilidad

Short description:

La solicitud más ecológica es aquella que nunca se hace. En el percentil 75, hay 37 solicitudes solo para JavaScript. En el percentil 90, hay un 62% más de solicitudes. El gobierno del Reino Unido y la Unión Europea están priorizando la sostenibilidad y colaborando con empresas afines. A partir de 2024, se exigirá a las grandes organizaciones que presenten informes de sostenibilidad.

Entonces, veamos otro tipo de métrica clásica que solemos analizar de vez en cuando, que es el número de solicitudes. ¿Sabes cómo dicen en un clásico modus operandi, que la solicitud más rápida es aquella que nunca se hace? Bien, creo que eso es justo. Entonces, si extrapolamos esto a la sostenibilidad digital, la solicitud más ecológica es aquella que nunca se hace. ¿Qué significa eso? Bueno, si no vas a enviar la solicitud, lo más probable es que no necesites esa solicitud y casi con seguridad estás avanzando hacia un sitio más ecológico con una menor huella de carbono y, eventualmente, menos emisiones.

Pero veamos algunos data sobre las solicitudes. En el percentil 75, vemos 37 solicitudes solo para JavaScript. En el percentil 90, vemos un 62% más de solicitudes solo para JavaScript. Ahora, si retrocedemos un poco y nuevamente pensamos en la cantidad de JavaScript no utilizado que estamos enviando, podemos comenzar a hacer los cálculos y probablemente haya muchas solicitudes inútiles allí. Estas son cosas que quieres probar, quieres analizar y ver dónde puedes hacer algunas mejoras.

Acabamos de analizar algunos datos clásicos sobre el peso de la página. Y todo lo que hicimos realmente fue pintar la idea de que hay muchos recursos de JavaScript que se están enviando. Puede que te preguntes, ¿qué es todo esto, Ong? ¿Por qué estamos hablando del peso de la página en relación con JavaScript en una conversación sobre sostenibilidad? Bueno, te lo diré ahora mismo. Comienza con cosas como esta, la ecologización del gobierno. Bueno, este es un documento publicado por el gobierno del Reino Unido. Y básicamente están diciendo que están dando pasos hacia una mayor sostenibilidad, asegurándose especialmente de ser sostenibles digitalmente también. Aquí hay una cita que me gusta mucho: `El negocio como de costumbre ya no es una opción`. Por lo tanto, es vital que HMG, que creo que es el gobierno de su majestad, sus servicios digitales y TIC sean responsables y resilientes, el gobierno de su majestad. Ahí lo tienes. Perdón, me quedé en blanco. Así que ahí puedes ver que están anunciando abiertamente que se asegurarán de practicar las mejores medidas de sostenibilidad posibles. Ahora, más adelante en ese mismo documento, verás que hablan de asociarse con empresas que tienen en mente la sostenibilidad, que son abiertas con sus planes y eso significa que esencialmente se asociarán con personas afines. Entonces, si no tienes en cuenta la sostenibilidad o la sostenibilidad digital, es posible que el gobierno no sea uno de tus clientes. Estos son los tipos de cosas en las que queremos que pienses. Ahora, algo más de lo que quiero hablar es que la Unión Europea también está siguiendo estos pasos. De hecho, si buscas este documento llamado Directiva de Informes de Sostenibilidad Corporativa, la Unión Europea dice lo siguiente: `Las nuevas normas garantizarán que los inversores y otras partes interesadas tengan acceso a la información que necesitan para evaluar los riesgos de inversión derivados del cambio climático y otros problemas de sostenibilidad`. Una vez más, tienes otra gran organización que básicamente está diciendo lo siguiente: la sostenibilidad será una prioridad para nosotros. Y en su caso, a partir de 2024, los detalles están pendientes, pero parece que las organizaciones grandes, o las que tienen 250 personas o más, estarán obligadas a realizar informes de sostenibilidad para que puedan ver exactamente lo que están haciendo. Estas son cosas de las que deberías hablar, o al menos deberías pensar, y nosotros también hemos estado pensando en ello en Catchpoint.

6. Presentando el Control de Carbono

Short description:

Hemos lanzado algo llamado el control de carbono, que proporciona una estimación de tu huella de carbono junto con datos de rendimiento. Muestra métricas de rendimiento de la página y una estimación experimental de tu huella de carbono. El resumen del control de carbono incluye información sobre hosts ecológicos, dominios de terceros que operan con energía renovable y una estimación de la huella de carbono. Utilizamos la biblioteca CO2GS de la Fundación GreenWeb y el conjunto de datos GreenWeb para verificar los dominios. Puedes visitar webpagesets.org/carbon-control para obtener una estimación de tu huella de carbono y explorar características adicionales. El peso de la página y la huella de carbono están estrechamente relacionados, y creemos que deben considerarse juntos para la sostenibilidad digital. Gracias por escuchar, y no dudes en comunicarte si tienes alguna pregunta o comentario.

De hecho, estábamos discutiendo la idea de proporcionar alguna métrica de sostenibilidad o tal vez una métrica o estimación de la huella de carbono junto con nuestros datos de rendimiento. Y básicamente decidimos hacerlo. Así que me gustaría presentarte algo que hemos lanzado llamado el control de carbono. Y eso es básicamente una estimación de tu huella de carbono que proporcionamos cuando haces una auditoría de rendimiento.

Ahora, se verá algo así, de hecho, ingresarás tu URL, presionarás ir y obtendrás tu resumen clásico de rendimiento como ves ahí. Entonces, lo que ves son las métricas de rendimiento de la página. TTFP, algunas de las métricas de pintura de las que hablé antes. Pero a la derecha, puedes ver que proporcionamos una estimación de tu huella de carbono. Lo llamamos un tipo de experimento, como un canario.

Si observas el resumen real del control de carbono, se verá algo así. Primero te diremos si estás utilizando un host ecológico, es decir, si tu host funciona con energía renovable. También analizaremos los mismos datos para tus dominios de terceros. ¿Están operando con energía renovable? Y te informaremos cuáles son y cuáles no lo son. Y finalmente te mostraremos la estimación de la huella de carbono junto con el peso de la página y lo que hemos calculado como una estimación decente de tu huella allí mismo. Ahora quiero agradecer a la Fundación GreenWeb porque en realidad estamos utilizando la biblioteca CO2GS y también su conjunto de datos GreenWeb para verificar los dominios. Si tienes curiosidad por ver eso, puedes ir a webpagesets.org/carbon-control. Es totalmente gratuito. Ni siquiera tienes que registrarte, aunque te recomendamos que lo hagas porque realmente puedes aprovechar algunas características adicionales. Pero aquí es donde podrás ver y obtener una estimación de tu huella de carbono junto con algunas de estas métricas de rendimiento. Y ¿por qué creemos que deben estar juntas? Bueno, básicamente están estrechamente relacionadas porque si vamos a hablar de información sobre el peso de la página y la huella de carbono y las emisiones, puedes ver que cuanto más peso tenga la página, mayores serán las emisiones, obviamente, bueno, realmente deberían estar bajo el mismo techo. Y eso es básicamente por qué sentimos que A, deben estar juntas. Y B, como dije, hemos estado revisando algunas de estas guías que estaban saliendo en términos de sostenibilidad y empresas que estaban comenzando a no tanto exigir, pero recomendar ser digitalmente sostenibles. Y sentimos que estas métricas pertenecen, como dije, juntas bajo el mismo techo. Dicho esto, en última instancia, también es bueno para el medio ambiente. Así que lo que me gustaría hacer para concluir es agradecerles mucho por escuchar. Si tienen alguna pregunta sobre lo que han escuchado hoy, por favor, háganmelo saber. Envíenme un tweet a Henri Albertca, estaré encantado de responder sus preguntas. De lo contrario, espero tener noticias suyas. Muchas gracias por su tiempo y que tengan un excelente día.

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