DEADScript: El Papel de JavaScript en la Sostenibilidad Web

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

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

FAQ

GCE Europe West 4 es una de las zonas de trabajo mencionadas en el texto, posiblemente relacionada con la ubicación de un centro de datos o una región de servidor.

El enfoque principal de la charla es la sostenibilidad digital, específicamente relacionada con el uso de JavaScript y su impacto en la huella de carbono en el desarrollo web.

El peso de la página es la métrica que se correlaciona bien con las emisiones de carbono, ya que indica la cantidad de recursos que se envían a través del cable y su impacto correspondiente.

En el percentil 75, el 40% del JavaScript enviado a través del cable no se utiliza, y este porcentaje aumenta al 44% en el percentil 90.

La intensidad de carbono de la electricidad es una medida de qué tan limpia es la electricidad que se genera, indicando las áreas donde la producción es más o menos contaminante.

Las Tecnologías de la Información y Comunicación (TIC) utilizan el 7% de la electricidad a nivel mundial y son responsables del 4% de las emisiones de CO2 globales.

El control de carbono es una herramienta lanzada por la empresa Catchpoint que proporciona una estimación de la huella de carbono de una página web durante una auditoría de rendimiento.

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

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
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.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Maximizar el rendimiento de la aplicación optimizando las fuentes web
Vue.js London 2023Vue.js London 2023
49 min
Maximizar el rendimiento de la aplicación optimizando las fuentes web
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar.
Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño.
Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión