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

¿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.

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é.

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.

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.

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.

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.

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.

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.

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.

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.

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.