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

Rate this content
Bookmark

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

Jakub Andrzejewski
Jakub Andrzejewski
31 min
12 May, 2023

Comments

Sign in or register to post your comment.

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 las imágenes al vuelo. 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 diferir la carga de imágenes. Las imágenes optimizadas ofrecen una mejor experiencia al usuario. Las soluciones 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, hay varias optimizaciones de front-end que podemos hacer. La optimización de imágenes es una victoria rápida para 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. Optimizar las imágenes es crucial para un sitio web de alto 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.

¿Me escuchan bien? ¿Sí? Bueno. Vale. Entonces, podrías estar pensando que para mejorar el performance del sitio web, necesitamos enfocarnos en las cosas del back-end. ¿Verdad? Entonces, necesitamos optimizar o hacer las consultas SQL más eficientes. Necesitamos optar por implementaciones de caché y cosas así. Pero en realidad, hay varias cosas que podemos hacer en el front-end para hacerlo más eficiente. Y esto me inspiró a tomar el tema de la optimization de imágenes para la presentación de hoy ya que es, en mi opinión, una de las victorias rápidas para mejorar el performance en tu sitio web.

Entonces, como ya me presenté. Mi nombre es Jakub y trabajo en Vue Storefront. Y también soy un Experto Desarrollador de Google en performance web. Esta es también una de las razones por las que seleccioné el tema. Y también soy embajador en esas organizaciones, así que si estás interesado en hablar sobre cualquiera de ellas, solo búscame después de la charla y podemos compartir el conocimiento. Y sí. Hablar de ello. Y como también mencionó Dom, nos conocimos hace casi dos años en la última edición de Vue.js Live, así que estoy muy contento de estar aquí una vez más. Y sí, compartir mi conocimiento con todos ustedes.

Entonces comenzaré la presentación con una pequeña encuesta. Por favor, levanta la mano si estás utilizando imágenes en tu sitio web. Eso es básicamente muy sencillo, ¿verdad? Sí, estamos utilizando las imágenes en nuestros sitios web. Y ahora por favor levanta la mano si estás optimizando las imágenes. Vale. Entonces, bastantes de ustedes, pero no tantos. Así que claramente podemos ver que todos estamos utilizando las imágenes, pero no las estamos optimizando. Mientras que optimizar las imágenes es, en mi opinión, la parte crucial de un sitio web de alto rendimiento. Y no se trata solo de los resultados de Lighthouse o cualquier otra herramienta de auditoría de performance web. También es bueno para la user experience porque los usuarios quieren obtener los data lo más pronto posible. Como las imágenes, si estás buscando un sitio web de e-commerce, quieres tener la imagen del producto lo más pronto posible porque quieres comprar el producto. Entonces, hablemos primero sobre los formatos de imagen. Hay muchas diferencias técnicas entre un formato de imagen y otro. Y en mi charla de hoy, quería centrarme en la optimization.

2. Importancia del Tamaño y Formato de la Imagen

Short description:

El tamaño y el tiempo de carga de las imágenes son factores importantes en el rendimiento del sitio web. Formatos como WebP y Avif son más ligeros que JPEG y PNG, pero no son compatibles con Internet Explorer. Las imágenes de tamaño adecuado evitan el desplazamiento del diseño y mejoran el tiempo de carga. Los Core Web Vitals, como la pintura de contenido más grande y el desplazamiento acumulativo del diseño, dependen de imágenes de 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 centrarme solo en uno. Y sí, prepárate, habrá algunos memes más también.

Para los usuarios, la diferencia habitual entre una imagen que está, digamos, en un formato y la otra imagen, que está en un formato diferente, suele ser la misma. No puedes ver la diferencia. Simplemente se ven igual. 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á soportando una aplicación que todavía necesita funcionar en Internet Explorer. Así que no tiene un gran trabajo, diría yo.

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

Entonces, ¿por qué deberíamos tener las imágenes de un tamaño adecuado? Básicamente por el tiempo de carga. Si estamos obteniendo las imágenes en el formato correcto, el tiempo de carga será más corto y también habrá lo que es la segunda cosa más importante, no veremos el desplazamiento del diseño. Porque tendrás... si has visto algunas charlas o artículos sobre el rendimiento web, probablemente ya sabes sobre los Core Web Vitals. Esta es como la métrica o conjunto de métricas que podemos usar para verificar cómo está funcionando nuestro sitio web. Así que hay métricas como la primera, la pintura de contenido más grande y el desplazamiento acumulativo del diseño. Y tener las imágenes de tamaño adecuado es importante para ambos. Pero podemos optimizar esas imágenes básicamente reemplazando... o convirtiendo una de las formatos de imágenes en otro. Podemos simplemente 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 usar servicios de optimización de imágenes. No estoy seguro si existe una palabra como esta o una palabra clave. Simplemente la inventé.

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. Se puede utilizar 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. Siempre que lo necesitemos, y con los parámetros que también necesitemos. Así que podemos usar 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 diferentes frameworks porque son solo de JavaScript / TypeScript. Así que podemos usarlo con Vue, React.

Así que IPX es el optimizador de imágenes que se basa en Sharp y VIPS. Y realmente es muy sencillo de usar. Podemos simplemente instalarlo y podemos usarlo como middleware de ExpressJS o podemos usarlo como simplemente el cliente de IPX. ¿Y cómo podemos usarlo más adelante en nuestra aplicación? Podemos simplemente enviar una solicitud al 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. Uso de 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 gestionar varios tipos de activos en tu sitio web. Proporciona la flexibilidad para obtener activos en el formato, tamaño y optimizaciones deseados. NUX image y NUX Cloudinary se integran con Cloudinary, pero NUX Cloudinary ofrece funcionalidades y transformaciones adicionales. He colaborado con Kolby Fajok, Director de Experiencia de 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, añadimos 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.

Así que Cloudinary es la gestión de activos digitales que te permite gestionar tus activos en el sitio web. Así que fotos, imágenes, videos, GIFs, muchas cosas así. Y luego lo que podemos hacer con él es que podemos obtenerlos de la manera que queramos. Así que en el formato correcto, en el tamaño correcto, con muchas optimizaciones diferentes aplicadas a, que mostraré en un minuto.

Así que en el mundo de NUX, podemos usar Cloudinary con NUX image porque NUX image soporta 18 proveedores y Cloudinary es uno de ellos. Pero también podemos usar el módulo Cloudinary, que es específicamente para trabajar con Cloudinary Eso fue desarrollado por Maja Chavin. Maja Chavin también es popular en la comunidad de Vue y ella fue la creadora original de este módulo. Y sí, entonces podrías estar preguntándote, cuál es la razón o básicamente cuál es la diferencia entre usar NUX image y el NUX Cloudinary si ambos pueden integrarse con Cloudinary?

Así que la idea detrás de NUX image es ser genérico. Así que no importa qué proveedor uses, todavía puedes usarlo con una API para la imagen. Sin embargo, para el NUX Cloudinary, la idea era entregar más funcionalidades de Cloudinary, más optimizaciones, más transformaciones, transformaciones de imagen. Y también hay una diferencia más en el NUX Cloudinary es que el módulo en sí fue desarrollado hace algún tiempo. Y solo funciona para NUX 2, que como sabes ahora, NUX está en transición a NUX 3. Así que tengo una pequeña sorpresa para ti. Y me uní a Kolby. Kolby Fajok es el Director de Experiencia de Desarrollador en Cloudinary. Así que recientemente hemos unido fuerzas para lanzar un módulo de Cloudinary para NUX 3. Y te lo mostraré en un minuto.

Así que déjame ir al código. Así que el uso del módulo Cloudinary es realmente simple. Simplemente, como con muchos otros módulos, instalamos el módulo. Luego lo registramos en el array de módulos. Y luego, básicamente, solo necesitamos agregar el nombre de la nube, el nombre específico de la nube que está asignado a nuestra cuenta. Y luego lo que podemos hacer es que podemos empezar a usar la imagen CLD, que es el componente específicamente creado para trabajar con Cloudinary. Así que como resultado, lo que tenemos es que cuando vamos al localhost, esta es la imagen que se obtiene de Cloudinary. Y si inspeccionamos, por cierto, ¿está bien la fuente? ¿Visible? Okay. Así que, como puedes ver, el tipo de la imagen es Aviv. Porque Cloudinary, por defecto, lo que hará el cargador de URL de Cloudinary es que automáticamente intentará 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 dependiendo del formato utilizado. El formato AVI reduce el tamaño a 22 kilobytes, mientras que el formato JPEG original es de 33 kilobytes. PNG, por otro lado, es 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 realizada. Fue JPEG transformado en Aviv. Así que intentemos hacerlo como un WebP. Así que aquí ves 22 kilobytes. Y cuando refresco, ves que cambiar a WebP aumentó el tamaño en 15 kilobytes. Más o menos. Así que hagámoslo en el formato original, que será JPEG, si puedo escribirlo correctamente. Así que 33 kilobytes. Ahora son 55 para el original. Así que ya logramos obtener la mitad del tamaño de la imagen solo usando este formato. Y ahora vamos a probar con PNG solo para mostrar la diferencia. Así que con PNG, PNG es de 200 kilobytes, básicamente 10 veces más grande que la imagen en el formato AVI.

6. Funcionalidades de Cloudinary y Módulo Nuxt

Short description:

Cloudinary ofrece más que solo cambio de formato. Permite agregar superposiciones con texto y estilo a las imágenes. La próxima versión 2.0 del módulo 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 solo cambiar el formato, lo que me gustaría hacer aquí es agregar alguna superposición a nuestra imagen, por lo que tendrá algo de texto, algo de estilo también. Entonces, cuando lo descomento y simplemente lo hago un poco más pequeño y refresco la página, tú ves qué más se puede agregar a la imagen. Y esto se está haciendo completamente por Cloudinary, y podemos inspeccionarlo comprobando la fuente de la imagen. Entonces ves aquí la fuente completa de la imagen. Entonces, básicamente, todo lo que definimos aquí en el code, la superposición, se está agregando como los parámetros para que Cloudinary optimice las imágenes para nosotros. Entonces sí, la versión 2.0 para el módulo Cloudinary para Nuxt aún no se ha lanzado, pero será la próxima semana. Entonces, 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. Carga Diferida de Imágenes

Short description:

La carga diferida es un patrón que implica diferir la carga de imágenes hasta que realmente se necesiten. En lugar de buscar todas las imágenes al principio, podemos diferirlas hasta el punto en que el usuario las verá en el viewport.

Permítanme volver a las diapositivas porque tengo algunos patrones más que quería compartir con ustedes. Y el primer patrón que siempre me gusta recomendar y usar en aplicaciones web es básicamente la carga diferida, y específicamente la carga diferida de las imágenes. Así que puedo explicarte cómo funciona, pero te mostraré un GIF con algunos gatos que básicamente te mostrará cómo funciona. Así que tenemos los gatos, imágenes de los gatos, y puedes ver en la cola de solicitudes que ellos se buscan básicamente cuando el usuario está desplazándose hacia abajo, es decir, cuando realmente se necesitan. Así que en lugar de buscar todas ellas al principio, en la carga inicial de la aplicación, podemos simplemente diferirlas hasta el punto en que el usuario las verá en el viewport.

8. Carga Diferida y el Patrón Diferido

Short description:

La carga diferida es una técnica para diferir la carga o solicitud de imágenes hasta que realmente se necesiten. Es parte del patrón diferido, que implica diferir la funcionalidad hasta que se necesite. La carga diferida puede mejorar el rendimiento del sitio web al prevenir solicitudes de imágenes innecesarias. Además, existe una característica experimental llamada prioridad de búsqueda que 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 los docs de Mozilla es que la carga diferida o el valor diferido para el atributo de carga de la imagen se explica como que la imagen se cargará cuando sea necesario. Así que esto no es del todo exactamente cierto, porque, bueno, es cierto, pero no te da el contexto completo de la carga diferida. Porque lo que noté en muchas aplicaciones web como producción, y hablaré de ello en un segundo, es que hay una mayoría de páginas web o, por ejemplo, sitios web de comercio electrónico que están cargando diferidamente la pintura de contenido más grande.

Así que para darte más contexto, la pintura de contenido más grande debería ser entregada lo más pronto posible. Y cuando estamos usando la carga diferida, estamos añadiendo la solicitud de esta imagen al final del bucle de solicitud, lo que básicamente hace que se cargue más tiempo. Así que aquí, también ves la diferencia en el tamaño de las imágenes que se están ejecutando en el sitio web que está usando la carga diferida y no la está usando. Básicamente, como se muestra en el GIF con los gatos, podemos usarlo para diferir la carga o la solicitud de las imágenes hasta el punto en que realmente se necesiten. La carga diferida es parte de lo que llamo el patrón diferido. Y básicamente, lo llamo así. No estoy seguro si esto es un patrón. Y soy realmente un gran fan de este patrón. Este soy yo con dos de mis gatos el último domingo perezoso. Así que soy un gran fan de ello. Y la idea detrás de tener un patrón tan perezoso es usar las técnicas que están relacionadas con diferir, hacer alguna funcionalidad hasta que realmente se necesite. Esta es como, hice esta definición. Así que puedes leer sobre este patrón perezoso en mi DEVTOOL, en mi artículo sobre la mejora del rendimiento 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 diferida, como mencioné. Componentes dinámicos de importación perezosa, composables de búsqueda de datos perezosos, y también la hidratación perezosa. Esta configuración es un gran paquete de Harlan, que también es miembro del equipo central de NAX, así que deberías echarle un vistazo.

¿Qué sigue? También hay una prioridad de búsqueda, que es una característica experimental que te permite instruir al navegador cuándo debe buscar la solicitud. Así que básicamente puedes usarlo para decirle al navegador, OK, esta es súper necesaria, y debería ser cargada lo más pronto posible. Así que podemos decir para el, digamos el banner de inicio de nuestra página de inicio, 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. Solo establece la prioridad de búsqueda en alto para las imágenes que queremos buscar lo más pronto posible. Y también podemos instruir al navegador para que ciertas imágenes sean buscadas más tarde. Así que esto es solo la punta del iceberg en la mejora del rendimiento.

9. Importancia de las Imágenes Optimizadas

Short description:

Al usar imágenes optimizadas, ofreces 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 deberíamos observar. Y estoy seguro de que justo después de mí estará Filip, quien te mostrará algunas ideas sobre el performance 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 de NAX. Y también recientemente comencé a escribir sobre el performance web. Entonces, el uso de IPX, que mencioné anteriormente, la lista de verificación de performance web, son cosas que deberías observar mientras intentas hacer que tu sitio web sea más eficiente.

Y tengo una pequeña solicitud final para ti para terminar mi charla. Al usar imágenes optimizadas básicamente ofreces 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? Bueno, 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. Esta técnica es parte de la carga progresiva, donde se muestra algo al usuario lo antes posible, como un marcador de posición o cargador, y luego se reemplaza por la imagen real. Otra idea es mostrar una matriz de imágenes simples y reemplazarla por el control deslizante real cuando se carga la página. En cuanto a la optimización de SVG, hay paquetes como SVGO que eliminan espacios en blanco y optimizan el archivo. Cloudinary funciona con Vue y hay planes para integrarlo con Vue también.

Bueno, necesito sacar mi teléfono, pero antes de eso, en realidad 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 resolución era, no sé, algo como 50X, 50 píxeles o 100X100, que era extremadamente pequeño. Luego siempre cargábamos la primera, mostrábamos esa, que era solo borrosa, y luego cuando se obtenía 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 es parte de algo que se llama carga progresiva. Si te gustaría revisar este concepto también. Por cierto, el concepto de la carga progresiva es que muestras algo al usuario, como, lo antes posible. Entonces, la primera pintura significativa, la pintura de contenido más grande, y cosas así. Puede ser incluso un marcador de posición, puede ser incluso 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 mencionar otra idea, que era sobre los controles deslizantes. Entonces, como una galería de imágenes, digamos. Porque generalmente usan JavaScript para la galería, las bibliotecas comunes. Entonces, lo que recomendó es que, en lugar de cargar el control deslizante desde el principio, porque generalmente el control deslizante llega, por ejemplo, en la página de inicio. Entonces, tener algo que dependa de JavaScript en la página de inicio que debería cargarse lo antes posible no es generalmente una buena cosa. Entonces, lo que recomendó es mostrar una matriz de imágenes, solo imágenes simples, y luego cuando la página se carga, reemplace esta matriz de imágenes con el control deslizante real. Entonces, esto también puede ser un truco, diría. Sí, genial. Tiene mucho sentido. Genial. Ahora pasemos a nuestras preguntas. ¿Qué hay de 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 plugin como este, pero no tengo mucha experiencia con SVG, así que no estoy seguro. En realidad, usamos antes, creo que puedes buscar en Google SVGOptimizer y luego simplemente pones 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 el 80-90% de espacio. Creo que es incluso algo como SVGOMG, algo así. Creo que es de Jake Archibald, algo similar.

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

11. Refactorización de Vue 3 e Imágenes Subidas por el Usuario

Short description:

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

Para Vue 3, no estoy al tanto de la biblioteca todavía, pero planeamos con Kolby, básicamente después de desarrollar el módulo para Next, refactorizarlo en la próxima versión en un plugin de Vue, de modo que tendremos la misma experiencia para las aplicaciones de Vue sin tener realmente el módulo de Next. Así que ahora solo está en Next, pero la idea es extraerlo a Vue y luego usarlo en Next como un plugin de Vue.

¡Genial! La siguiente es, ¿hay consideraciones especiales para optimizar las imágenes subidas por un usuario? Diría que las mismas, como tratar de, tal vez porque los usuarios tienden a, ya sabes, poner la mejor calidad de imagen, porque la están usando, así que a veces es como calidad del 100% y se utiliza luego como portada de algo o se recorta a un tamaño más pequeño, así que tal vez disminuir la calidad de la imagen, cambiar el formato seguro, porque si el usuario usa PNG, como has visto en la demo, es como 10 veces más grande. Así que si es posible, solo trata de optimizar el formato, los tamaños también, y, sí, la calidad. Nombraría esos tres seguro.

Tiene sentido, por supuesto, desde el lado del desarrollador, pero como usuario final siempre odio cuando simplemente subo una imagen de alta calidad y arruinan todo. 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. Oh, pero todos sabemos las razones de eso. La siguiente pregunta, ¿es Cloudinary gratis? Sí, sí, tienen un nivel gratuito. El que estaba usando durante la demostración es completamente gratis. Por supuesto, hay algunas limitaciones como con todas las herramientas, como con los CMS, con los motores de búsqueda. Hay algunas limitaciones para el nivel gratuito. Por ejemplo, en el caso del nivel gratuito en Cloudinary, lo que no obtienes en una cuenta gratuita es, por ejemplo, eliminar el fondo de la imagen. Porque si vas y visitas el sitio web de Colby, él lo hizo para el Next Cloudinary, el mismo enfoque que te mostré, pero para Next.js. Está utilizando la eliminación de fondo porque tiene la cuenta premium, ya que está trabajando allí. Yo tengo la cuenta gratuita, así que básicamente, no puedo hacer la eliminación de fondo. Cuando intentas enviar una solicitud con el parámetro de eliminación de fondo en la solicitud, simplemente te dirá que tu cuenta no es adecuada para eliminar el fondo, así que cosas así. En resumen, sí, es gratis, y diría que el plan es bastante generoso. Para aplicaciones más pequeñas como un portafolio, esto está completamente bien. Para usarlo en una aplicación de producción como enterprise, el nivel gratuito no es suficiente seguro. Así que 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í, lo conseguirás. Solo bromeaba.

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

OK, gracias.

12. Impacto de las Fallas de Servicio

Short description:

¿Qué sucede cuando Cloudinary o cualquier otro servicio de terceros falla? Si nuestro sitio web depende de ese servicio, también se caerá. Esto se aplica a las plataformas de CMS y comercio electrónico también. Implementar soluciones alternativas, como el uso de imágenes de directorio local o marcadores de posición, puede ayudar a mitigar el impacto de las fallas de servicio.

Ahora tenemos una pregunta que a todo desarrollador le gusta. ¿Qué sucede cuando Cloudinary falla? Diría que lo mismo que con cualquier otro servicio de terceros. Si nuestro sitio web es como, este servicio de terceros es crucial, el sitio web estará caído. Es la dura verdad. 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 si tienes un sitio web de comercio electrónico que el front-end es solo el front-end y la plataforma de comercio electrónico se cae? 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 solución alternativa. Si la solicitud falla, podemos simplemente hacer una solución 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 está basada en CMS, alimentada por CMS, si el CMS no funciona, tu sitio web tampoco funciona. 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 perezoso, como la obtención de los data cuando se necesitan, por supuesto, las cosas que mencioné al principio de la charla, por lo que las optimizaciones en el backend. Entonces, si puedes, por ejemplo, unir algunas solicitudes, digamos que el usuario está haciendo tres solicitudes para obtener un data. Quizás puedas unir esas solicitudes y luego devolver los data al usuario. Quizás si tus usuarios, tus clientes, tienen una conexión a internet lenta, puedes simplemente usar aplicaciones SSR y renderizar los data en el servidor y luego devolver al usuario el resultado real para que no necesite disparar cinco solicitudes. Puede simplemente disparar una y obtener los 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 performance de front-end. Es realmente fácil de encontrar. Sí, esta es una pregunta de la que probablemente podrías hablar durante horas y horas. Gracias por ayudarnos a mejorar la user experience. 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

A Guide to React Rendering Behavior
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
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
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 Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
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
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
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
Daniel Roe
Daniel Roe
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 Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
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 🤐)