Optimización de imágenes en web y nativo

Rate this content
Bookmark

Se puede decir que muchos sitios web y aplicaciones en la actualidad dependen en gran medida de las imágenes: imágenes de productos, avatares, compartición en redes sociales. Con los avances tecnológicos continuos, la variedad de tamaños de dispositivos que necesitas soportar sigue creciendo. ¿Cómo podemos hacer que la misma página se vea genial y tenga un rendimiento óptimo tanto en un MacBook Pro de 16'' con pantalla retina como en un pequeño teléfono Android de 5 años? Veremos algunos de los enfoques modernos para abordar este problema en web y nativo, así como lo que sucede si no lo haces.

21 min
02 Jun, 2023

Video Summary and Transcription

Esta charla se centra en la optimización de imágenes para dispositivos móviles y web. Se enfatiza la importancia de las dimensiones de las imágenes en la optimización y se comparte una historia sobre los bloqueos encontrados en una aplicación móvil debido al contenido pesado de imágenes. La charla discute la representación y el tamaño de las imágenes, utilizando dimensiones y densidad de píxeles, optimizando imágenes para diferentes dispositivos y tamaños de pantalla, y la importancia de la optimización del tamaño y formato de las imágenes. Se recomiendan herramientas como Cloudinary para la optimización de imágenes.

Available in English

1. Introducción a la Optimización de Imágenes

Short description:

Hola, mi nombre es Kati Cremmann. Soy la desarrolladora principal de ReactJS. Esta es una charla sobre la optimización de imágenes para móviles y web. La optimización de imágenes implica optimizar el contenido y el tamaño del archivo. Para la optimización del contenido, la relación de aspecto es crucial. Para la optimización del tamaño del archivo, debemos minimizar los recursos.

Hola, mi nombre es Kati Cremmann. Soy la desarrolladora principal de ReactJS. Y esta es una charla de nuestra nueva ponente invitada, Kati. ¡Hola! Gracias. Ustedes son mis verdaderos amigos. Gracias a todos los que se quedaron justo antes del almuerzo. Trataré de ser breve. Gracias por esa introducción, Janne. Fue increíble, como siempre.

Así que, hola, mi nombre es Kati Cremmann. Soy la directora de ingeniería móvil en este momento en Promotable. Somos una consultoría de JavaScript increíble. Construimos cosas en React y React Native. Y muchas de estas cosas incluyen imágenes, lo que nos lleva al tema de mi charla, que trata sobre la optimización de imágenes para móviles y web.

Entonces, ¿qué quiero decir exactamente con optimizar imágenes? Puedes pensar en ello de dos maneras. Una forma es optimizar el contenido de la imagen. Optimizar el recorte de la imagen. ¿Vas a usar retrato o paisaje? ¿Dónde quieres ajustar el sujeto de la imagen para que se ajuste mejor a la posición que tienes en la pantalla? Para darte un ejemplo, a la izquierda tenemos una imagen original, que está en modo retrato . Y digamos que nuestro objetivo era usarla como imagen principal en un sitio web o tal vez como una imagen de banner en Twitter. Esta no es una imagen óptima para este caso de uso, porque, como puedes ver, no hay una buena manera de recortarla, así que terminamos con medio niño. Pero esta charla no trata sobre recortar. Si se tratara de recortar, el resumen al final sería usar una relación de aspecto. Como desarrolladores, generalmente no somos responsables de tomar las imágenes y posicionar las imágenes. Eso es trabajo de los expertos. Pero la forma en que comunicamos lo que necesitamos, las posiciones que tenemos en las pantallas, es mediante el uso de una relación de aspecto. Una relación de aspecto es una proporción entre el ancho y la altura de una imagen. Entonces, en lugar de decir, necesito una imagen de 750 por 500, puedes decirle a tu diseñador o fotógrafo que necesitas una imagen con una relación de aspecto de tres a dos, y ellos pueden darte la imagen de la más alta calidad que puedan.

La otra forma de ver las imágenes es mirar el tamaño del archivo. Esto es algo que estamos más acostumbrados a optimizar, porque somos conscientes de que cuando estamos renderizando una aplicación móvil o renderizando un sitio web, el usuario tiene que descargar todos los recursos desde el servidor antes de que podamos mostrarlos. Por lo tanto, queremos que estos recursos, imágenes, paquetes de JavaScript, CSS, sean lo más pequeños posible.

2. Importancia de las Dimensiones de la Imagen

Short description:

El ancho y alto de una imagen son muy importantes en la optimización de imágenes. A medida que avanza la tecnología, el problema de la optimización de imágenes se vuelve más difícil. Por ejemplo, una imagen de alta resolución puede tener un tamaño de archivo grande, lo que la hace inadecuada para una buena experiencia de usuario. Reducir las dimensiones de la imagen puede ayudar en la optimización de imágenes. Compartiré una historia que motivó esta charla sobre la importancia de las dimensiones de la imagen. Al construir una aplicación móvil con mucho contenido de imágenes, nos encontramos con bloqueos después de algunas páginas.

Y lo otro de lo que quiero hablar es de las dimensiones de la imagen. Específicamente, el ancho y el alto de la imagen, que también son importantes. Y he agregado un signo de interrogación aquí porque es posible que no te des cuenta de cuánto importa.

Cuando hablaba sobre la optimización de imágenes ayer con algunas personas, muchas personas se preguntaron cómo es posible que todavía estemos resolviendo un problema de optimización de imágenes. Las personas intentaban optimizar imágenes hace diez años. Cuando hablaba sobre el tema de mi charla, llegamos a la conclusión de que las personas han estado haciendo este tipo de cosas similares durante años y años. Pero el problema es que a medida que avanza la tecnología, el problema que estamos resolviendo se vuelve más difícil.

Para darte un ejemplo, esta es una imagen que mi amigo Taz tomó de mí hace un par de semanas. Taz tiene una cámara muy buena, de última generación. Y es genial. Puedo hacer zoom, como en CSI, y descubrir exactamente a qué hora se tomó esta imagen. Sin embargo, esta resolución viene con el costo de un tamaño de archivo grande. Si reviso los metadatos del archivo, veo que esta imagen sola tiene 21 megabytes. Y tiene 8,000 por 5,000 píxeles. Esta es la imagen de origen que tu fotógrafo te dará para usar en tus sitios web y aplicaciones móviles. Y obviamente no puedes usarla directamente porque no brindará una buena experiencia de usuario. Si quisiera usar esto en mi sitio web, podría reducir las dimensiones, pasarla por el confiable Panda de TinyPNG, y podría terminar con algo mucho más pequeño. Así que esto es 100 megabytes. Aún no es ideal, pero es utilizable. Y he reducido las dimensiones de la imagen. Y notarás que he mencionado las dimensiones de la imagen varias veces. Y es posible que te preguntes por qué es tan importante. Y te contaré una historia, que en realidad es la historia que motivó esta charla.

Esto sucedió hace un par de años, muchos años atrás, cuando estaba construyendo una aplicación móvil. La aplicación móvil estaba lista. Aún no estaba en vivo, no estaba disponible para los usuarios. Pero estaba lista para que los administradores de contenido agregaran contenido y probaran las cosas para asegurarse de que todo estuviera listo antes de lanzarlo. Y la aplicación en sí no importa para los propósitos de esta historia. Pero lo que debes saber es que tenía muchas imágenes, era muy pesada en imágenes. Toda la aplicación, cada página, tenía muchas imágenes personalizadas tomadas profesionalmente en varias configuraciones. Y lo que descubrimos es que los administradores de contenido volvían a nosotros y decían que después de un par de páginas, la aplicación se bloqueaba.

3. Renderizado y Dimensionado de Imágenes

Short description:

No solo después de horas de uso. Literalmente sería después de cinco o seis páginas. Descubrimos que si comentamos todas las imágenes, todos los problemas de rendimiento desaparecen mágicamente. El renderizado de imágenes en aplicaciones nativas es más costoso. Cuanto mayor sea la diferencia entre la imagen y el tamaño en el que la estamos renderizando, más costoso será el cálculo. Entonces, para solucionar esto, la solución directa es dimensionar la imagen en función de lo que realmente necesitas.

No solo después de horas de uso. Literalmente sería después de cinco o seis páginas. Y de inmediato, nos preguntamos, oh, ¿qué dispositivo estás usando? ¿Es un dispositivo Android de gama baja? Porque como desarrolladores de React Native, tendemos a culpar a todo en los dispositivos Android de gama baja. Desafortunadamente, en este caso, todos estaban usando prácticamente los últimos iPhones. Así que no podíamos culpar a Android. Pero obviamente estábamos pensando, si los iPhones no pueden hacerlo, los teléfonos Android no tienen ninguna posibilidad. Así que tenemos que resolver esto.

Entonces, lo que hicimos fue, bueno, básicamente comentamos el código hasta que descubrimos qué estaba rompiendo la aplicación. Y descubrimos que si comentamos todas las imágenes, todos los problemas de rendimiento desaparecen mágicamente. Esto es obviamente genial, pero no es una buena estrategia para lanzar una aplicación que se trata de imágenes. Entonces, mi amigo console logged al rescate. Y lo que hice fue, simplemente console logueé los tamaños de todas las imágenes que se estaban enviando desde la API. Y en realidad logré encontrar las capturas de pantalla que tomé en ese momento. Y esto es básicamente a lo que llegamos. Esto es simplemente abrir la aplicación y navegar por un par de páginas. Y es un poco desordenado, pero he resaltado algunos de los mayores culpables. Y como puedes ver, según la imagen que mostré antes, claramente estas son las imágenes de origen que sus fotógrafos les dieron como fuente, como la imagen inicial, en lugar de versiones recortadas. Y lo que es posible que no sepas, especialmente si vienes de la web, es que el renderizado de imágenes en aplicaciones nativas es más costoso. La forma en que ocurre el renderizado en nativo es que calculamos el tamaño de la imagen, el área que tienes disponible, y luego convertimos la imagen para que se ajuste a ese tamaño. Y esto se hace en memoria. Y cuanto mayor sea la diferencia entre la imagen y el tamaño en el que la estamos renderizando, más costoso será el cálculo. Y obviamente, si estás haciendo toneladas y toneladas de estos cálculos costosos en memoria al mismo tiempo, te quedarás sin memoria y tu aplicación se bloqueará. Entonces, para solucionar esto, la solución directa es dimensionar la imagen en función de lo que realmente necesitas. Te voy a explicar cómo lo haría. Vamos a usar esta hermosa imagen verde en todo el proceso. Me voy a dar dos restricciones. Vamos a usar el ancho de la pantalla como el ancho de la imagen. Y vamos a usar una relación de aspecto de 3.2 para la altura. Este es código de React Native. Tenemos un útil hook llamado use Window Dimensions.

4. Usando Dimensiones y Densidad de Píxeles

Short description:

Puedes usar las dimensiones directamente como una exportación. La imagen de la izquierda está borrosa debido a la densidad de píxeles. La densidad de píxeles determina cuántos píxeles componen un punto de visualización. La mayoría de los iPhones tienen una densidad de píxeles de 3, lo que significa que un punto equivale a nueve píxeles.

También puedes usar las dimensiones directamente como una exportación, pero usar un hook obviamente significa que lo estás ejecutando en la web. Si alguien cambia el tamaño del navegador, obtienes el nuevo valor. Estoy usando el ancho de la pantalla obtenido a través de las dimensiones de la ventana, y estoy calculando la altura relativa en función del ancho. Y en la tercera flecha, lo paso directamente a la imagen.

Ahora, esta es una captura de pantalla de mi teléfono. También he recortado un poco la imagen para que puedas ver mejor la calidad de la imagen. Imprimí el ancho y la altura que obtengo de React Native. Me dice que mi ancho es 390 y mi altura es 260. Entonces, tomo esta imagen y la recorto a 390 por 260. Y obtengo esto.

No estoy seguro de lo bien que puedes verlo, pero la imagen de la izquierda está realmente borrosa. Pero ¿por qué? Acabo de tomar las dimensiones exactas que necesito de mi teléfono y recortar mi imagen. Entonces, ¿por qué está borrosa la imagen? ¿Hay alguien aquí que pueda decírmelo? Sí, correcto. Densidad de píxeles. Tengo una diapositiva completa para esto. Sí, eso es exactamente. Y si vienes de la web, especialmente, no es algo en lo que usualmente tienes que pensar. Pero en móviles, es muy importante. La densidad de píxeles básicamente te dice cuántos... Perdón. Permíteme invertirlo un poco. Cuando vienes de la web, especialmente, y comienzas a escribir estilos, es posible que estés pensando que ya no necesitas escribir píxeles, ems o rems después de los números de estilo. Y la razón por la que no tienes que escribir eso es porque no estás hablando en píxeles ni en ems. Estás hablando en puntos de visualización. Y un punto de visualización puede ser igual a un píxel, pero puede que no lo sea. Y la densidad de píxeles básicamente te dice cuántos píxeles se necesitan para formar un punto de visualización. Uno a uno, todos los iPhones usarían esto, es decir, un píxel es igual a un punto de visualización. Sin embargo, la mayoría de los iPhones en estos días usarán una densidad de píxeles de 3, lo que significa que un punto en realidad son nueve píxeles.

5. Optimizando imágenes para diferentes dispositivos

Short description:

Para optimizar imágenes para diferentes dispositivos, debes considerar las densidades de píxeles. El tamaño de la imagen en píxeles se determina por el área en puntos de visualización multiplicada por la relación de píxeles. La relación de píxeles varía entre uno y 3.5. Al multiplicar los puntos de visualización por la relación de píxeles, puedes obtener el tamaño real de la imagen necesario para una visualización óptima.

Entonces, y si alguna vez has agregado, por ejemplo, un ícono de aplicación, estarías muy familiarizado con esta página, donde tienes que subir cada imagen en 1x1x2x3. La razón por la que haces eso es para tener en cuenta las densidades de píxeles de los diferentes iPhones. Tendrás algo similar en Android, pero creo que tienes alrededor de seis versiones diferentes para tener en cuenta. Y esta es básicamente la fórmula. Es bastante sencillo. El tamaño de la imagen en píxeles es el tamaño del área en puntos de visualización multiplicado por la relación de píxeles. Hay una exportación en React Native, por lo que puedes importar la relación de píxeles y luego obtener la relación de píxeles del dispositivo o sitio web en el que te encuentres actualmente. Y aquí hay algunos ejemplos. Acabo de tomar la captura de pantalla del sitio web de React Native. Podemos ver que la relación de píxeles tiende a variar entre uno y 3.5. Por lo general, no suele ser más alta, pero conociendo la tecnología, probablemente lo sea eventualmente. Y ahora, si multiplico los puntos de visualización por la relación de píxeles, obtendré la imagen real que necesitaba, que era de 1170 por 780. Y ahora se verá nítida en mi pantalla.

6. Optimizando imágenes para diferentes tamaños de pantalla

Short description:

No todos usan el mismo teléfono, por lo que es crucial optimizar las imágenes para diferentes tamaños de pantalla. Subir una imagen y escalarla para diferentes dispositivos puede sobrecargar los dispositivos de gama baja. Las redes de distribución de contenido (CDN) pueden ayudar al almacenar en caché las imágenes en tamaños específicos. Sin embargo, gestionar múltiples imágenes puede ser costoso. Para optimizar el rendimiento, utiliza una matriz de tamaños admitidos y calcula el ancho necesario para la imagen.

Ahora, el problema es que no todos usan el mismo teléfono que yo. Ojalá lo hicieran. Eso simplificaría mucho mi vida. Sin embargo, incluso si solo consideramos los iPhones, hay toneladas y toneladas de tamaños diferentes. Por ejemplo, si comparo un iPhone 6 y un iPhone 12 Pro Max, puedes ver que la misma imagen, utilizando el ancho de la pantalla y una relación de 3 a 1, será muy diferente.

Entonces, si solo tienes una imagen de origen que vas a subir, podrías sentirte tentado a subir la imagen en 1290 por 860 y que todos los demás tengan que escalarla. El problema con eso es que ahora tus dispositivos de gama baja, que ya están luchando, son los que tienen que convertir esta imagen al tamaño que tienes disponible. Afortunadamente, este es un problema que se ha resuelto. Si estás utilizando un CDN, prácticamente todos los CDNs modernos tendrán esta funcionalidad, o puedes crear el tuyo propio, donde básicamente el dispositivo calcula el área que necesita y solicita la imagen en un tamaño específico. Entonces, tu servidor diría: 'Oh, quieres 750 por 500, lo tengo en la caché, aquí lo tienes'. O si no lo tiene, lo calcularía sobre la marcha, lo guardaría en la caché para la próxima vez y lo devolvería.

El problema con esta solución es que todavía hay demasiadas imágenes diferentes. La primera vez, en primer lugar, la primera vez que generamos la imagen, tendrá un par de segundos de costo donde se genera la imagen, por lo que el usuario tiene que esperar. Y en segundo lugar, si estás utilizando un servicio administrado, se vuelve muy costoso porque la mayoría de estos servicios te cobrarán según las transformaciones, por lo que es mucho más barato y mejor utilizar la caché si puedes. La forma de solucionar eso es que generalmente terminarás teniendo una matriz de tamaños admitidos. He elegido bastantes aquí, como 15, pero tendrás paradas admitidas donde dices que vas a admitir una imagen de 600 de ancho o 1,200 de ancho. Y luego, calculas el ancho que necesitas para la imagen y tomas la siguiente mejor imagen, lo que significa que aún no tienes que hacer nada demasiado complicado, pero aún obtienes la optimización de no tener que hacer tantas transformaciones sobre la marcha.

De acuerdo. He hablado mucho sobre esto. También hice una demostración. Así que puedes probarlo. Creo que esto es lo más divertido, si puedes probarlo en tu teléfono. No esperaba que fuera tan grande. Oh wow. Bueno. No estoy seguro de poder hacer esto. Supongo que puedes ver las partes de la derecha, que es la parte importante. El código está a la izquierda. Si no puedes verlo, solo confía en mí.

7. Renderizado y Optimización de Imágenes

Short description:

Estoy renderizando tres imágenes diferentes, incluyendo la imagen de tamaño completo y las imágenes con diferentes relaciones de píxeles y tamaños. Al generar una variedad de tamaños fijos, puedes optimizar el renderizado de imágenes para diferentes dispositivos. Cloudinary es una herramienta recomendada para la optimización de imágenes, pero hay otras opciones dependiendo de las herramientas disponibles.

Está ahí. Pero, tengo tres ejemplos aquí. Entonces, a la derecha, lo estoy renderizando en React Native Web en este momento. Pero si vas aquí y tienes la aplicación Expo Snack. Voy a poner esta diapositiva con el código QR más tarde. Puedes ejecutarla en tu teléfono y ver cómo se ejecutan estas imágenes en tu propio teléfono. Pero en la web, así que estoy renderizando tres imágenes diferentes.

Entonces, tengo la imagen de tamaño completo en todo su esplendor. Luego, tengo... Entonces, aquí arriba, puedes ver cuál es la relación de píxeles. Y aquí, tenemos una relación de píxeles de 1, gracias a Dios. Pero si lo ejecuto normalmente en mi pantalla, es una relación de píxeles de 2. Puedes ver que el ancho de la pantalla es 333, y puedes ver que esta es la imagen de tamaño completo. Esta es la imagen de tamaño exacto. Esta, en tu teléfono, si lo intentas, se verá borrosa. Esta es la imagen de tamaño exacto con la relación de píxeles. Y esta es la imagen de tamaño exacto con los tamaños particulares. Por ejemplo, aquí puedes ver que el ancho en píxeles que estamos buscando para la imagen es 333, pero vamos al siguiente mejor ancho, que es 350. Permíteme volver a mis diapositivas. Ahí tienes. Estas son las diapositivas para tomar una foto, si quieres probarlo. Y puedes probarlo en tu teléfono, y ver cómo la misma imagen se renderiza para ti en comparación con tus amigos. Espero que te haya sido útil, y muchas gracias.

Entonces, en esta solución, ¿tienes esta matriz de tamaños fijos, por lo que realmente generas todas esas imágenes durante el tiempo de construcción? Sí. Entonces, puedes elegir. Dependiendo de tu servicio también, puedes crear las imágenes de antemano. Si, por ejemplo, no quieres usar un servicio en absoluto, puedes decidir que vas a usar estas tres imágenes, las vas a generar de antemano, y sabes que tu API siempre las va a admitir. Pero la solución más óptima sería crearlas sobre la marcha. Pero en tu caso, ¿puedes recomendar alguna herramienta, por ejemplo, empaquetadores, o cosas que hagan esta optimización de imágenes por ti, o se deja ese ejercicio para el lector? Personalmente, me gusta usar Cloudinary, pero pueden ser bastante caros. Así que creo que también depende de las herramientas que tengas disponibles.

8. Optimización de Tamaño y Formato de Imágenes

Short description:

Si ya tienes un CDN de imágenes, probablemente lo hagan por ti. ¿Existe una forma adecuada de dimensionar las imágenes sin tener que elegir la siguiente mejor versión? El método original es dimensionar la imagen exactamente para la pantalla. Otra forma de optimizar la carga de imágenes es elegir un formato de imagen apropiado. Utiliza herramientas como el parámetro de formato automático de Cloudinary para servir el mejor formato para la plataforma. Gastar en herramientas vale la pena cuando se trata de optimización de imágenes. El tiempo es más importante que el dinero en este escenario. Gracias, Cady, por unirte a nosotros.

Si ya tienes un CDN de imágenes, es probable que lo hagan por ti. Genial.

Aquí está la siguiente pregunta. ¿Existe una forma adecuada de dimensionar las imágenes sin tener que elegir la siguiente mejor versión, lo que requiere tener una matriz de tamaños lista? Entonces, básicamente, si no haces esto de tener un tamaño fijo, ¿cuál es la mejor forma de hacerlo? Sería el método original que mostré, que es el tamaño exacto para la pantalla. Así obtendrás siempre el mejor tamaño para el área disponible, pero podría ser más lento si no tienes muchos usuarios con ese dispositivo. Por ejemplo, si tienes un usuario en un iPhone X y 10,000 usuarios en un iPhone 12, el usuario del iPhone X siempre, cada vez que visite la página, el servidor tendrá que generar esas imágenes, mientras que los usuarios del iPhone 12 usarán la misma caché. Genial.

Y la otra forma, por supuesto, de optimizar la carga de imágenes es elegir un formato de imagen apropiado para el tipo de imagen. ¿Has probado estos formatos de imagen modernos y cómo resuelven el mismo problema? Creo, para ser honesto, que la imagen es una de esas cosas en las que tiendo a pagar por usar la buena herramienta para el trabajo. Por ejemplo, no es que los esté promocionando en particular, pero si usas Cloudinary, tienen un parámetro llamado formato automático, que sirve el mejor formato para la plataforma que estás solicitando. Si usas Chrome versus iPhone nativo versus Android nativo, en realidad envía la misma imagen en un formato de archivo diferente. Sí, pero me gusta el punto de gastar un poco más en herramientas. Esto no es algo que quieras intentar resolver por ti mismo si tienes el presupuesto para ello. Sí, absolutamente. Es como tiempo versus dinero, ¿verdad? En este escenario, siento que mi tiempo es más importante que el dinero de algunas personas. Sí. La imagen no es nada. La sed lo es todo. Exactamente.

De acuerdo, tienes sed. Muy bien. Gracias, Cady. Hablando de sed y hambre, dejaremos que la gente vaya a almorzar, pero pueden encontrar a Cady en la sala de preguntas y respuestas de los oradores después de esto. Muchas gracias, Cady, por unirte a nosotros. Increíble. Gracias, Yanni. Lo aprecio. Gracias.

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 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel