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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.