Optimización de Imágenes - Ganancia Rápida para Mejorar el Rendimiento en Aplicaciones Vue y Nuxt

Rate this content
Bookmark

Mejorar el rendimiento de las aplicaciones Vue o Nuxt no es una tarea fácil. Sin embargo, hay algunas ganancias rápidas que puedes implementar fácilmente y que mejorarán drásticamente el rendimiento de tu sitio web. Una de esas ganancias rápidas es la Optimización de Imágenes. En esta masterclass, te enseñaré cómo optimizar imágenes sobre la marcha con servicios de Gestión de Activos Digitales como Cloudinary o Sistemas de Gestión de Contenido, utilizar el concepto de Carga Perezosa, utilizar el formato comprimido de imágenes como WEBP, ¡y mucho más!

31 min
12 May, 2023

Video Summary and Transcription

La optimización de imágenes es crucial para el rendimiento del sitio web y la experiencia del usuario. Servicios como IPX y Cloudinary pueden ayudar a optimizar imágenes sobre la marcha. Cloudinary ofrece funcionalidades adicionales y transformaciones para la gestión de imágenes. La carga perezosa y el patrón perezoso pueden mejorar el rendimiento del sitio web al retrasar la carga de imágenes. Las imágenes optimizadas ofrecen una mejor experiencia de usuario. Las alternativas pueden mitigar el impacto de las fallas del servicio.

Available in English

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

Short description:

Para mejorar el rendimiento del sitio web, a menudo nos enfocamos en el back-end. Sin embargo, también podemos realizar varias optimizaciones en el front-end. La optimización de imágenes es una forma rápida de mejorar el rendimiento y la experiencia del usuario. Comencemos con una encuesta para ver cuántos de ustedes están utilizando y optimizando imágenes en sus sitios web. La optimización de imágenes es crucial para un sitio web con buen rendimiento y mejora la experiencia del usuario. Hoy nos centraremos en la optimización de imágenes y su impacto en el rendimiento del sitio web.

¿Están escuchándome bien? ¿Sí? Bien. De acuerdo. Entonces, es posible que estén pensando que para mejorar el rendimiento del sitio web, necesitamos enfocarnos en cosas del back-end. ¿Verdad? Necesitamos optimizar o hacer que las consultas SQL sean más eficientes. Necesitamos implementar caché y cosas así. Pero en realidad, hay varias cosas que podemos hacer en el front-end mismo para mejorarlo en términos de rendimiento. Y esto me inspiró a elegir el tema de la optimización de imágenes para la presentación de hoy porque, en mi opinión, es una forma rápida de mejorar el rendimiento de su sitio web.

Como ya me he presentado. Mi nombre es Jakub y trabajo en Vue Storefront. También soy un Experto en Desarrollo de Google en rendimiento web. Esta es una de las razones por las que elegí este tema. También soy embajador en esas organizaciones, así que si están interesados en hablar sobre alguna de ellas, encuéntrenme después de la charla y podemos compartir conocimientos. Y sí. Hablar de eso. Y como mencionó Dom, nos conocimos hace casi dos años en la última edición de Vue.js Live, así que estoy muy feliz de estar aquí una vez más. Y sí, compartir mi conocimiento con todos ustedes.

Comenzaré la presentación con una pequeña encuesta. Por favor, levanten la mano si están utilizando imágenes en su sitio web. Eso es bastante obvio, ¿verdad? Sí, estamos utilizando imágenes en nuestros sitios web. Y ahora, por favor, levanten la mano si están optimizando las imágenes. De acuerdo. Bastantes de ustedes, pero no tantos. Así que claramente podemos ver que todos estamos utilizando imágenes, pero no las estamos optimizando. Mientras que la optimización de imágenes es, en mi opinión, una parte crucial de un sitio web con buen rendimiento. Y no solo se trata de los resultados de Lighthouse u otras herramientas de auditoría de rendimiento web. También es bueno para la experiencia del usuario porque los usuarios quieren obtener los datos lo antes posible. Por ejemplo, si están buscando en un sitio web de comercio electrónico, quieren ver la imagen del producto lo antes posible porque quieren comprarlo. Así que primero hablemos sobre los formatos de imagen. Hay muchas diferencias técnicas entre un formato de imagen y otro. Y en mi charla de hoy, quiero centrarme en la optimización.

2. Importancia del Tamaño y Formato de Imagen

Short description:

El tamaño y el tiempo de carga de las imágenes son factores importantes en el rendimiento del sitio web. Los formatos como WebP y Avif son más ligeros que JPEG y PNG, pero no son compatibles con Internet Explorer. Las imágenes con el tamaño adecuado evitan cambios en el diseño y mejoran el tiempo de carga. Los Core Web Vitals, como el mayor contenido visible y el cambio de diseño acumulativo, dependen de imágenes con el tamaño adecuado. Los servicios de optimización de imágenes pueden ayudar a optimizar las imágenes al vuelo.

Básicamente, el tamaño y el tiempo de carga de la imagen. Así que quiero enfocarme solo en uno. Y sí, prepárense porque también habrá algunos memes más.

Para los usuarios, la diferencia habitual entre una imagen que está, digamos, en un formato y otra imagen que está en un formato diferente, suele ser la misma. No se puede ver la diferencia. Simplemente se ven iguales. La única diferencia es el tamaño. Y esto es lo que mostraré durante la breve demostración más adelante. Pero en general, formatos como WebP o Avif, espero haberlo pronunciado correctamente, son más ligeros que JPEG y PNG, pero no son compatibles con Internet Explorer. Y digo esto porque uno de mis amigos, hasta hoy, está manteniendo una aplicación que aún necesita ejecutarse en Internet Explorer. Así que no tiene un gran trabajo, diría yo.

Sí, hablamos sobre los formatos de imagen. También hay casos relacionados con el tamaño, imágenes con el tamaño adecuado. Y he visto demasiados sitios web en producción donde básicamente estaban obteniendo la imagen, por ejemplo, para un pequeño icono, y la imagen estaba en resolución Full HD, y luego la comprimían en el icono que estaba, por ejemplo, en el pie de página. Así que esto puede parecer un problema realmente extraño, pero sucede con demasiada frecuencia, diría yo, en los sitios web modernos.

Entonces, ¿por qué deberíamos tener las imágenes con un tamaño adecuado? Básicamente, por el tiempo de carga. Si obtenemos las imágenes en el formato correcto, el tiempo de carga será más corto y también habrá otra cosa muy importante, no veremos cambios en el diseño. Porque si han visto algunas charlas o artículos sobre el rendimiento web, probablemente ya conozcan los Core Web Vitals. Esto es como la métrica o conjunto de métricas que podemos usar para verificar cómo se está desempeñando nuestro sitio web. Entonces, hay métricas como el mayor contenido visible y el cambio de diseño acumulativo. Y tener imágenes con el tamaño adecuado es importante para ambos. Pero podemos optimizar esas imágenes reemplazando... o convirtiendo el formato de una imagen en otro. Podemos tener la imagen en la resolución correcta desde el principio. Pero en la mayoría de los casos, queremos poder optimizarlas al vuelo. Utilizando cierto software. Para eso, podemos utilizar servicios de optimización de imágenes. No estoy seguro si existe una palabra como esta o una palabra clave. La acabo de inventar.

3. Servicios de Optimización de Imágenes

Short description:

La idea detrás de estos servicios es optimizar las imágenes al vuelo. IPX, desarrollado por el equipo de Nuxt, es un optimizador de imágenes sencillo basado en Sharp y VIPS. Puede ser utilizado como middleware de ExpressJS o como cliente de IPX. Es ampliamente utilizado en el ecosistema de Nuxt.

Básicamente, la idea detrás de estos servicios es permitirnos optimizar las imágenes al vuelo. Así que cada vez que lo necesitemos, y con los parámetros que también necesitemos. Podemos utilizar la herramienta llamada IPX, que es la herramienta desarrollada por el equipo de Nuxt también bajo la organización NGS.

Y la organización NGS en general, si aún no la conoces, es una organización donde hay paquetes que se utilizan en muchos frameworks diferentes porque son solo de JavaScript/TypeScript. Así que podemos usarlo con Vue, React.

IPX es el optimizador de imágenes basado en Sharp y VIPS. Y su uso es realmente sencillo. Simplemente podemos instalarlo y usarlo como middleware de ExpressJS o como cliente de IPX. ¿Y cómo podemos usarlo más adelante en nuestra aplicación? Simplemente podemos enviar una solicitud a localhost con ciertos parámetros, por ejemplo, el formato. En este caso, será webP. Pero IPX funciona bien y de hecho se utiliza en la imagen de Nuxt, el módulo que se utiliza ampliamente en el ecosistema de Nuxt para manejar imágenes.

4. Usando Cloudinary para la Gestión de Imágenes

Short description:

Sin embargo, puede haber casos en los que no podamos usar IPX y necesitemos un servicio de terceros como Cloudinary. Cloudinary es una herramienta de gestión de activos digitales que te permite administrar varios tipos de activos en tu sitio web. Proporciona la flexibilidad de obtener activos en el formato, tamaño y con las optimizaciones deseadas. La imagen NUX y NUX Cloudinary se integran con Cloudinary, pero NUX Cloudinary ofrece funcionalidades y transformaciones adicionales. He colaborado con Kolby Fajok, Director de Experiencia del Desarrollador en Cloudinary, para lanzar un módulo de Cloudinary para NUX 3. Permíteme mostrarte cómo funciona. Simplemente instalamos el módulo, lo registramos, agregamos el nombre de la nube y usamos el componente de imagen CLD. Cloudinary selecciona automáticamente el formato de imagen más eficiente.

Sin embargo, puede haber casos en los que básicamente no podemos usar algo como IPX. Simplemente queremos que un servicio de terceros maneje este caso por nosotros. Y para eso, podemos usar una herramienta como Cloudinary.

Entonces, Cloudinary es la herramienta de gestión de activos digitales que te permite administrar tus activos en el sitio web. Por lo tanto, fotos, imágenes, videos, GIF, muchas cosas así. Y luego lo que podemos hacer con ella es obtenerlos de la manera que queramos. En el formato correcto, en el tamaño correcto, con muchas optimizaciones diferentes aplicadas, que mostraré en un minuto.

En el mundo de NUX, podemos usar Cloudinary con la imagen NUX porque la imagen NUX admite 18 proveedores y Cloudinary es uno de ellos. Pero también podemos usar el módulo de Cloudinary, que está específicamente diseñado para trabajar con Cloudinary. Eso fue desarrollado por Maja Chavin. Maja Chavin también es popular en la comunidad de Vue y fue la creadora original de este módulo. Y sí, es posible que te estés preguntando, ¿cuál es la razón o básicamente cuál es la diferencia entre usar la imagen NUX y la NUX Cloudinary si ambas pueden integrarse con Cloudinary?

La idea detrás de la imagen NUX es ser genérica. No importa qué proveedor uses, aún puedes usarla con una API para la imagen. Sin embargo, para la NUX Cloudinary, la idea era ofrecer más funcionalidades de Cloudinary, más optimizaciones, más transformaciones, transformaciones de imagen. Y también hay una diferencia más en la NUX Cloudinary, y es que el módulo en sí fue desarrollado hace algún tiempo. Y solo funciona para NUX 2, que como sabes, NUX está haciendo la transición a NUX 3 en este momento. Así que tengo una pequeña sorpresa para ti. Me he unido a Kolby. Kolby Fajok es el Director de Experiencia del Desarrollador en Cloudinary. Recientemente nos hemos unido para lanzar un módulo de Cloudinary para NUX 3. Y te lo mostraré en un minuto.

Así que vamos al código. El uso del módulo de Cloudinary es muy sencillo. Simplemente, al igual que con muchos otros módulos, instalamos el módulo. Luego lo registramos en la matriz de módulos. Y luego, básicamente, solo necesitamos agregar el nombre de la nube, el nombre específico de la nube que se asigna a nuestra cuenta. Y luego lo que podemos hacer es comenzar a usar la imagen CLD, que es el componente específicamente creado para trabajar con Cloudinary. Como resultado, cuando vamos a localhost, esta es la imagen que se obtiene de Cloudinary. Y si inspeccionamos, por cierto, ¿la fuente está bien? ¿Visible? De acuerdo. Como puedes ver, el tipo de imagen es Aviv. Porque Cloudinary, por defecto, lo que hará el cargador de URL de Cloudinary es intentar automáticamente usar el formato de imagen más eficiente.

5. Comparación de Formato y Tamaño de Imagen

Short description:

El tamaño de la imagen varía según el formato utilizado. El formato AVI reduce el tamaño a 22 kilobytes, mientras que el formato JPEG original es de 33 kilobytes. Por otro lado, PNG tiene un tamaño de 200 kilobytes, significativamente más grande que el formato AVI.

Entonces, en este caso, será Aviv. Echemos un vistazo al tamaño. Dice 22.3 kilobytes para esta imagen. Y como puedes ver aquí, el SRC de la imagen es JPEG, por lo que ya ves la transformación que se está realizando. Fue transformado de JPEG a Aviv. Así que intentemos hacerlo como WebP. Aquí ves 22 kilobytes. Y cuando actualizo, ves que cambiar a WebP aumentó el tamaño en 15 kilobytes. Más o menos. Así que hagámoslo en formato original, que será JPEG, si puedo escribirlo correctamente. Entonces, 33 kilobytes. Ahora son 55 para el original. Así que logramos reducir a la mitad el tamaño de la imagen solo usando este formato. Y ahora vamos a PNG solo para mostrar la diferencia. Con PNG, PNG tiene un tamaño de 200 kilobytes, básicamente 10 veces más grande que la imagen en formato AVI.

6. Funcionalidades de Cloudinary y Módulo de Nuxt

Short description:

Cloudinary ofrece más que solo cambiar el formato. Permite agregar superposiciones con texto y estilo a las imágenes. La próxima versión 2.0 del módulo de Cloudinary para Nuxt se lanzará la próxima semana, lo que lo hará accesible para los usuarios de proyectos gratuitos de Nuxt.

Pero Cloudinary no solo te permite cambiar el formato. Viene con muchas más funcionalidades de serie. Así que digamos que en lugar de simplemente cambiar el formato, lo que me gustaría hacer aquí es agregar una superposición a nuestra imagen, para que tenga algo de texto y estilo. Así que cuando lo descomento y lo hago un poco más pequeño y actualizo la página, puedes ver qué más se puede agregar a la imagen. Y esto se hace completamente con Cloudinary, y podemos inspeccionarlo verificando la fuente de la imagen. Entonces aquí ves la fuente completa de la imagen. Básicamente, todo lo que definimos aquí en el código, la superposición, se agrega como parámetros para que Cloudinary optimice las imágenes por nosotros. Sí, la versión 2.0 del módulo de Cloudinary para Nuxt aún no se ha lanzado, pero será la próxima semana. Con la creciente popularidad de los proyectos gratuitos de Nuxt, podrás usar este módulo en los próximos días también.

7. Lazy Loading of Images

Short description:

La carga perezosa es un patrón que implica retrasar la carga de imágenes hasta que realmente se necesiten. En lugar de cargar todas las imágenes al principio, podemos retrasarlas hasta el punto en que el usuario las vea en el viewport.

Permíteme volver a las diapositivas porque tengo algunos patrones más que quiero compartir contigo. Y el primer patrón que siempre me gusta recomendar y usar en aplicaciones web es básicamente la carga perezosa, y específicamente la carga perezosa de las imágenes. Así que puedo explicarte cómo funciona, pero te mostraré un GIF con algunos gatos que te mostrará básicamente cómo funciona. Así que tenemos los gatos, imágenes de los gatos, y puedes ver en la cola de solicitudes que se obtienen básicamente cuando el usuario se desplaza hacia abajo, cuando realmente se necesitan. Así que en lugar de obtener todas al principio, en la carga inicial de la aplicación, simplemente podemos retrasarlas hasta el punto en que el usuario las vea en el viewport.

8. Lazy Loading y el Patrón Lazy

Short description:

La carga perezosa es una técnica para retrasar la carga o solicitud de imágenes hasta que realmente sean necesarias. Forma parte del patrón perezoso, que implica retrasar la funcionalidad hasta que sea necesaria. La carga perezosa puede mejorar el rendimiento del sitio web al evitar solicitudes de imágenes innecesarias. Además, existe una función experimental llamada prioridad de búsqueda que te permite priorizar la carga de imágenes. Estas técnicas son solo el comienzo de la optimización del rendimiento.

Y se puede hacer muy fácilmente. Puedes usar el atributo de carga de la imagen. También puedes usar paquetes como lozat o el observador de intersección. Pero una pequeña cosa que noté recientemente en la documentación de Mozilla es que la carga perezosa o el valor perezoso para el atributo de carga de la imagen se explica como que la imagen se cargará cuando sea necesario. Entonces esto no es del todo exactamente cierto, porque, bueno, es cierto, pero no te da el contexto completo de la carga perezosa. Porque lo que noté en muchas aplicaciones web en producción, y hablaré de ello en un segundo, es que la mayoría de las páginas web o, por ejemplo, sitios web de comercio electrónico están cargando perezosamente la mayor pintura de contenido.

Para darte más contexto, la mayor pintura de contenido debe entregarse lo antes posible. Y cuando usamos la carga perezosa, estamos agregando la solicitud de esta imagen al final del bucle de solicitud, lo que básicamente hace que tarde más en cargarse. Entonces aquí también ves la diferencia en el tamaño de las imágenes que se ejecutan en el sitio web que está utilizando la carga perezosa y el que no lo está utilizando. Básicamente, como se muestra en el GIF con los gatos, podemos usarlo para retrasar la carga o solicitud de las imágenes hasta el punto en que realmente se necesiten. La carga perezosa es parte de lo que llamo el patrón perezoso. Y básicamente, lo llamo así. No estoy seguro si esto es un patrón. Y realmente soy un gran fanático de este patrón. Esta soy yo con dos de mis gatos el último domingo perezoso. Así que soy un gran fanático de ello. La idea detrás de tener un patrón tan perezoso es usar las técnicas relacionadas con el aplazamiento, hacer alguna funcionalidad hasta que sea realmente necesaria. Esto es como, hice esta definición. Así que puedes leer sobre este patrón perezoso en mi DEVTOOL, en mi artículo sobre cómo mejorar el performance de NAX con el patrón perezoso. Y como parte de este patrón perezoso, lo que viene con él es, por supuesto, la carga perezosa, como mencioné. Importaciones dinámicas perezosas de componentes, obtención de datos perezosa, y hidratación perezosa también. Esta configuración es un gran paquete creado por Harlan, quien también es miembro del equipo principal de NAX, así que deberías echarle un vistazo.

¿Qué sigue? También hay una prioridad de búsqueda, que es una función experimental que te permite indicar al navegador cuándo debe buscar la solicitud. Entonces básicamente puedes usarlo para decirle al navegador, OK, este es súper necesario, y debería cargarse lo antes posible. Así que simplemente podemos decir, por ejemplo, para el banner de inicio de nuestra página principal, deberíamos usar la prioridad de búsqueda para permitir que se cargue lo más rápido posible. Y podemos hacerlo muy fácilmente con la etiqueta de imagen. Simplemente establece la prioridad de búsqueda en alta para las imágenes que queremos cargar lo antes posible. Y también podemos indicarle al navegador que busque ciertas imágenes más tarde. Esto es solo la punta del iceberg en la mejora del performance.

9. Importancia de las imágenes optimizadas

Short description:

Al utilizar imágenes optimizadas, brindas una mejor experiencia a los usuarios, haciéndolos sentir geniales. Gracias por estar aquí y escucharme. Si quieres encontrarme en Internet, busca a Jakub Andrewski. Soy Barosz en GitHub. Gracias.

Porque hay muchas cosas que debemos tener en cuenta. Y estoy seguro de que justo después de mí, Filip les mostrará algunas ideas sobre el rendimiento web también. Y si estás interesado en aprender más sobre este tema, tengo esta serie en DevTool sobre el performance de NAX, específicamente. Y recientemente comencé a escribir sobre el performance web. Así que el uso de IPX que mencioné anteriormente, la lista de verificación de performance web, cosas que debes tener en cuenta al intentar mejorar el rendimiento de tu sitio web.

Y tengo una pequeña solicitud final para terminar mi charla. Al utilizar imágenes optimizadas, básicamente brindas una mejor experiencia a los usuarios. Esto es genial. Porque a los usuarios les gusta ser entretenidos, les gusta tener una experiencia genial. Entonces, ¿quién no quiere ser genial, verdad? De acuerdo, muchas gracias por estar aquí y escucharme. Si quieres encontrarme en algún lugar de Internet, puedes buscar a Jakub Andrewski. Es más fácil pronunciar mi apellido de esta manera que el original. Con una pequeña diferencia en GitHub, soy Barosz. Gracias. Gracias. Me encantan tus ideas sobre el performance web. Siéntete libre.

10. Técnicas de carga de imágenes y optimización de SVG

Short description:

En un proyecto, teníamos dos imágenes diferentes como activos, cargando la primera y reemplazándola por una de mayor calidad y tamaño. Esta técnica forma parte de la carga progresiva, donde se muestra algo al usuario lo más pronto posible, como un marcador de posición o un cargador, y luego se reemplaza por la imagen real. Otra idea es mostrar una matriz de imágenes simples y reemplazarla por el deslizador real cuando se carga la página. En cuanto a la optimización de SVG, existen paquetes como SVGO que eliminan los espacios en blanco y optimizan el archivo. Cloudinary funciona con Vue y también hay planes para integrarlo con Vue.

De acuerdo, necesito sacar mi teléfono, pero antes de eso, tengo una pregunta. Hace un par de años, en un proyecto, teníamos un componente especial para cargar imágenes, y siempre teníamos dos imágenes diferentes como activos. Una era de resolución completa y la otra era, no sé, algo como 50X50 píxeles o 100X100, que era extremadamente pequeña. Luego siempre cargábamos la primera, mostrábamos esa, que estaba borrosa, y luego cuando se recuperaba la más grande, obviamente la reemplazábamos por una de mejor calidad. ¿Qué opinas de esa técnica? Es una buena idea en general, y también forma parte de algo que se llama la carga progresiva. Si también te gustaría conocer este concepto. Por cierto, el concepto de la carga progresiva es mostrar algo al usuario, lo más pronto posible. Así que el primer pintado significativo, el pintado de contenido más grande, y cosas así. Incluso puede ser un marcador de posición, incluso puede ser un cargador. No necesita ser una imagen, puede ser un cargador. Y luego, con el tiempo, lo reemplazas por la imagen real. Incluso escuché a uno de los chicos de la comunidad de Vue mencionarme otra idea, que se trataba de los deslizadores. Así como una galería de imágenes, digamos. Porque generalmente usan JavaScript para la galería, las bibliotecas comunes. Entonces, lo que recomendó es, en lugar de cargar el deslizador desde el principio, porque generalmente el deslizador viene, por ejemplo, en la página de inicio. Entonces, tener algo que dependa de JavaScript en la página de inicio y que deba cargarse lo más pronto posible no es algo bueno en general. Entonces, lo que recomendó es mostrar una matriz de imágenes, solo imágenes simples, y luego cuando se carga la página, reemplazar esta matriz de imágenes por el deslizador real. Así que esto también puede ser un truco, diría yo. Sí, genial. Tiene mucho sentido. Genial. Ahora pasemos a nuestras preguntas. ¿Qué tal optimizar los SVG? Oh, para ser honesto, no tengo experiencia en eso. Estoy seguro de que hay paquetes para trabajar con los SVG en Vue y Vite que hacen parte de la optimización por nosotros. Creo que es SVGO, este complemento, pero no tengo mucha experiencia con los SVG, así que no estoy seguro. Antes lo usábamos, creo que solo tienes que buscar SVGOptimizer y luego poner tu SVG allí, el que te dan los diseñadores, y simplemente elimina todos los espacios en blanco, optimiza todo y a veces ahorras hasta un 80-90% de espacio. Creo que es algo como SVGOMG, algo así. Creo que es de Jake Archibald, algo similar.

Ok, genial. La segunda pregunta es, ¿Cloudinary también funciona con Vue? Si no, ¿hay planes para integrarlo? Sí, funciona con Vue, pero también con Vue.

11. Refactorización de Vue 3 y imágenes cargadas por el usuario

Short description:

Para Vue 3, planeamos refactorizar el módulo para Next en un complemento de Vue. Las consideraciones para optimizar las imágenes cargadas por el usuario incluyen disminuir la calidad, cambiar el formato y optimizar los tamaños. Cloudinary tiene un nivel gratuito con limitaciones, como la eliminación de fondo. Existe una alternativa de código abierto llamada IPX que se puede usar localmente sin un servicio de terceros.

Para Vue 3, aún no conozco la biblioteca, pero planeamos, junto con Kolby, básicamente después de desarrollar el módulo para Next, refactorizarlo en la próxima versión como un complemento de Vue, de modo que tengamos la misma experiencia para las aplicaciones de Vue sin tener realmente el módulo de Next. Por ahora, solo está en Next, pero la idea es extraerlo a Vue y luego usarlo en Next como un complemento de Vue.

¡Genial! La siguiente pregunta es, ¿alguna consideración especial para optimizar las imágenes cargadas por un usuario? Diría las mismas, como tratar de disminuir la calidad de la imagen, ya que los usuarios tienden a utilizar imágenes de alta calidad, que luego se utilizan como portada o se recortan a un tamaño más pequeño. También se puede cambiar el formato de la imagen, ya que, como viste en la demostración, el formato PNG es hasta 10 veces más grande. Por lo tanto, si es posible, intenta optimizar el formato, los tamaños y la calidad. Esas serían las tres consideraciones principales.

Tiene sentido, por supuesto, desde el punto de vista del desarrollador, pero como usuario final, siempre odio cuando subo una imagen de alta calidad y luego la arruinan. Es como en Messenger, ¿verdad? Subes la imagen y la calidad es tan mala que ni siquiera puedes verte a ti mismo en la imagen. Pero todos conocemos las razones para eso. La siguiente pregunta es, ¿Cloudinary es gratuito? Sí, tienen un nivel gratuito. El que estaba usando durante la demostración es completamente gratuito. Por supuesto, hay algunas limitaciones como con todas las herramientas, al igual que con los CMS y los motores de búsqueda. Hay algunas limitaciones para el nivel gratuito de Cloudinary. Por ejemplo, en el caso del nivel gratuito de Cloudinary, no puedes eliminar el fondo de la imagen. Si visitas el sitio web de Colby, verás que él lo hizo para Next Cloudinary, utilizando el mismo enfoque que te mostré, pero para Next.js. Él está utilizando la eliminación de fondo porque tiene una cuenta premium, ya que trabaja allí. Yo tengo una cuenta gratuita, por lo que básicamente no puedo eliminar el fondo. Cuando intentas enviar una solicitud con el parámetro de eliminación de fondo, te dirá que tu cuenta no es adecuada para eliminar el fondo, entre otras cosas. En resumen, sí, es gratuito y diría que el plan es bastante generoso. Para aplicaciones más pequeñas como un portafolio, esto es completamente suficiente. Pero para usarlo en una aplicación de producción como una empresa, el nivel gratuito no es suficiente, eso seguro. ¿Entonces eres un embajador y no te dieron una cuenta PRO? Creé esta cuenta mucho antes. Aún no he solicitado la cuenta para los embajadores, pero ese es el plan. Sí, la obtendrás. Solo estoy bromeando.

La siguiente pregunta es, ¿hay una alternativa de código abierto y autohospedada a Cloudinary? Sí, básicamente IPX, el que mostré, es de código abierto, puedes descargarlo. También se utiliza en NextImage. En NextImage también puedes usar Cloudinary como proveedor, pero de forma predeterminada utiliza IPX para que puedas usarlo localmente sin ningún servicio de terceros para optimizar la imagen.

De nada.

12. Impacto de las fallas del servicio

Short description:

¿Qué sucede cuando Cloudinary u otro servicio de terceros se cae? Si nuestro sitio web depende de ese servicio, también se caerá. Esto también se aplica a los CMS y plataformas de comercio electrónico. Implementar alternativas, como usar imágenes de directorios locales o marcadores de posición, puede ayudar a mitigar el impacto de las fallas del servicio.

Ahora tenemos una pregunta que a todo desarrollador le gusta. ¿Qué sucede cuando Cloudinary se cae? Diría que lo mismo que con cualquier otro servicio de terceros. Si nuestro sitio web depende de este servicio de terceros, el sitio web se caerá. Es la dura realidad. Pero puede funcionar de la misma manera si basamos nuestra aplicación en, por ejemplo, el CMS o el comercio electrónico. ¿Qué sucede ahora mismo si tienes un sitio web de comercio electrónico en el que el front-end es solo el front-end y la plataforma de comercio electrónico está caída? Digamos que Shopify por alguna razón está caído. Básicamente, nuestra tienda no está funcionando. Por supuesto, puedes implementar algún tipo de alternativa. Si la solicitud falla, podemos simplemente hacer una alternativa a un directorio local donde podríamos tener algunas imágenes o imágenes de marcador de posición. Con el CMS también. Si tu página se basa en CMS, impulsada por CMS, si CMS no funciona, tu sitio web tampoco funcionará. Sí. 100%. Y hagamos una pregunta final ahora. Entonces, además de las imágenes, algunas de las cosas que mencioné en el patrón de carga lenta, como obtener los data cuando se necesitan, por supuesto, las cosas que mencioné al principio de la charla, como optimizaciones en el backend. Entonces, si puedes, por ejemplo, unir algunas solicitudes, digamos que el usuario está haciendo tres solicitudes para obtener un data. Tal vez puedas unir esas solicitudes y luego devolver el data al usuario. Tal vez si tus usuarios, tus clientes, tienen una conexión a internet lenta, puedes simplemente usar aplicaciones SSR y renderizar el data en el servidor y luego devolver al usuario el resultado actual para que no necesite enviar cinco solicitudes. Solo puede enviar una y obtener el data de vuelta. Entonces, en realidad hay muchas cosas que puedes hacer. Y creé esta lista de verificación, así que si estás interesado, échale un vistazo. Es como una lista de verificación de rendimiento del frontend. Es muy fácil de encontrar. Sí, esta es una pregunta sobre la que probablemente se pueda hablar durante horas y horas. Gracias por ayudarnos a mejorar la experiencia del usuario. Fue una charla increíble. Hagan ruido por Jakub.

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.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
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

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 🤐)
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
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
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
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 🤐)