Blog/Ingeniería/Animaciones web eficaces

Animaciones web eficaces

Ingeniería - 54 Lectura mínima

febrero 22, 2024

Cómo mantuvimos un SEO técnico y un rendimiento del sitio elevados al tiempo que ofrecíamos una experiencia de usuario encantadora a nuestros clientes utilizando animaciones Lottie personalizadas.

Introducción

Como nuevo mercado en línea, queremos atraer clientes potenciales a nuestro sitio web. Necesitamos atraer a los usuarios a nuestro sitio para compartir nuestra historia y explicarles cómo nuestro negocio puede beneficiarles, de forma limpia y concisa.

Las ilustraciones animadas son una herramienta de diseño UX de eficacia probada para atraer a los usuarios. Como dice el viejo adagio, "una imagen vale más que mil palabras", decidimos mejorar nuestra página de inicio con una serie de animaciones de desplazamiento para captar la atención del usuario y destacar nuestros servicios.

Sin embargo, las animaciones web suelen ir en detrimento del rendimiento del sitio. Teníamos que encontrar la manera de incorporar estas animaciones y, al mismo tiempo, mantener un SEO técnico excepcional y el rendimiento del sitio web en todos los navegadores y dispositivos. Consulte nuestro post anterior sobrePerfeccionar el SEO técnico en nuestro sitio.

¿Por qué las animaciones merman el rendimiento?

Dependiendo de cómo se genere la animación, hay un par de razones.

Proceso de renderizado

Las animaciones CSS y JavaScript afectan al proceso de renderizado del navegador. La renderización del navegador es un proceso complicado con cuatro pasos secuenciales:

Estilo: hacen coincidir cada elemento HTML del DOM con sus reglas CSS.
Diseño: calculan el tamaño y la posición de cada elemento DOM en la página. Todas las propiedades CSS basadas en la geometría afectan a este paso, incluyendoaltura,anchura,margen,acolchadoyfuente.
Pintardibujar cada elemento en su posición conocida. Esta suele ser la tarea más larga del proceso. Propiedades CSS comocolor,box-shadowyfondo afectan a este paso.
Compuesto: construyen la imagen completa de todos los elementos como capas en la página. Algunas propiedades CSS comotransformar,opacidad,z-indexyfiltro sólo afectan a este paso.

Cuando se introduce una animación en el proceso de renderizado, se repiten algunos o todos estos pasos, a menudo a un ritmo de 60 veces por segundo. Debido a este proceso secuencial, una animación que actualiza el diseño, por ejemplo, es más costosa en cuanto a rendimiento: primero se vuelve a renderizar el diseño, luego la pintura y, por último, el compuesto. Sin embargo, una animación que sólo afecte al paso compuesto, sólo tendrá que volver a renderizar el compuesto de la página.

Las animaciones que sólo activan el composite para actualizarse son las más baratas, en términos de rendimiento. En el navegador, también suelen ser manejadas por la GPU en un subproceso separado, el subproceso del compositor, que está separado del subproceso principal donde se ejecutan el estilo, el diseño, la pintura y todo JavaScript. Por lo tanto, estas animaciones no se ven interrumpidas por ninguna tarea de larga duración en el subproceso principal.

Tamaño del archivo

Muchos sitios web utilizan GIF animados. Estos archivos ofrecen una gran compatibilidad entre plataformas, pero suelen tener un gran tamaño y no se pueden optimizar o comprimir fácilmente. El gran tamaño de los archivos GIF puede aumentar los tiempos de carga, lo que afectará negativamente al SEO y a la experiencia del usuario.

¿Qué opciones tenemos?

HTML/CSS

Las animaciones sólo CSS son rápidas de implementar y tienen un gran rendimiento, siempre y cuando utilices las mejores prácticas en torno a la canalización de renderización, como se explica en la sección anterior. Tienen un gran soporte multiplataforma y son fáciles de controlar y actualizar en tu código base.

La desventaja de las animaciones CSS es que tienen capacidades limitadas. Algunas propiedades no se pueden animar y las animaciones más complejas pueden requerir soluciones de código que son menos legibles y mantenibles.

JavaScript

Una vez que las animaciones se vuelven más complejas, el siguiente paso lógico es incorporar código JavaScript para crear la animación. JavaScript permite capacidades de animación más amplias y un gran soporte multiplataforma. Dado que la animación es totalmente en su base de código, que son fáciles de controlar y personalizar todos los aspectos de la animación.

La desventaja del enfoque JavaScript es que puede llevar mucho tiempo desarrollarlo y diseñarlo para que sea eficaz. Dado que las animaciones JavaScript provocan más repeticiones de la página que las animaciones sólo CSS, son inherentemente menos eficaces. Codificar estas animaciones desde cero puede llevar mucho tiempo, lo que puede compensar los beneficios de tener una animación en la página en primer lugar.

También existen muchas librerías JavaScript que proporcionan animaciones listas para usar. Esto puede ayudar a reducir la cantidad de tiempo que se tarda en implementar animaciones, pero estas bibliotecas son a menudo bastante grandes y contienen un montón de código adicional que no se utiliza, pero todavía contribuye al tamaño final del paquete de su aplicación.

GIF

Otra forma habitual de incorporar animaciones web es incluir GIF animados. Los GIF tienen la ventaja de que son una solución sin código que puede ser creada por un diseñador fuera de la base de código. Por lo tanto, son fáciles de incorporar a su aplicación web. Las animaciones GIF también requieren menos repeticiones de la página para reproducir la animación.

Aunque los GIF tienen una buena compatibilidad entre navegadores, no funcionan bien en distintos tamaños de pantalla y dispositivos. La resolución de un GIF es estática y no se adapta a diferentes tamaños de pantalla sin pixelarse. Además, los GIF pueden tener un gran tamaño de archivo que no puede ser optimizado o comprimido, lo que lleva a una página de menor rendimiento.

Lottie

Una animación Lottie es una de las soluciones más recientes para crear animaciones web de alto rendimiento. Las animaciones Lottie son sin código y creadas fuera de la base de código por un diseñador, similar a un GIF, pero son mucho más escalables y performantes que un archivo GIF. Están escritas en formato JSON, por lo que tienen un gran soporte multiplataforma y la resolución de la animación es escalable en tiempo de ejecución. Las animaciones Lottie pueden incorporarse fácilmente a cualquier aplicación JavaScript utilizando la biblioteca Lottie.

Lottie fue sin duda la mejor solución para nuestro caso de uso de animación de desplazamiento. Siga leyendo para obtener más información sobre los archivos Lottie y cómo los implementamos en nuestro sitio web.

¿Qué es una Lottie?

Lottie es un formato ligero de gráficos animados que funciona para aplicaciones nativas y web. Los diseñadores pueden crear y enviar animaciones sin que los ingenieros tengan que volver a crearlas en el código base. Bajo el capó, la biblioteca Lottie para JavaScript toma los datos de animación exportados deAdobe After Effects como JSON y analiza los datos para renderizar la animación de forma nativa tanto en el móvil como en la web.

Dado que los archivos Lottie están escritos en formato JSON, un Lottie es de media un 600% más pequeño que un GIF. La versión de mayor rendimiento de una animación Lottie es undotLottie. dotLottie es un tipo de archivo con la extensión.lottie que almacena toda la información de la animación Lottie, instrucciones de animación y activos dependientes, en un solo lugar. Archiva y comprime la animación Lottie original, reduciendo así los costes de almacenamiento hasta en un 80% en comparación con la animación Lottie original.

Las animaciones Lottie son inherentemente más performantes que otras soluciones, pero eso no significa que usted no tenga que considerar la optimización al construir una animación Lottie. Entre bastidores, Lottie genera código a partir de los diseños originales, poniendo efectivamente el código de producción en manos de los diseñadores. Por lo tanto, es importante que los desarrolladoresY que los diseñadores del equipo sepan cómo crear una animación eficaz. Hay que tener en cuenta lo siguiente:

Instancias reducidas - cuando construyas la animación, piensa en elementos que sean similares y crea una única instancia, o componente, que pueda ser reutilizado en la animación en lugar de construir instancias separadas desde cero varias veces.
Aplanar capas - Ten cuidado con las capas anidadas innecesarias, esto crea elementos DOM adicionales que no sirven para nada pero inhibirán el rendimiento y las puntuaciones SEO. Agrupa y aplana las capas anidadas tanto como sea posible.
Evitar el escalado anidado - eliminar la escala anidada de los elementos. El elemento padre debe contener la escala para todos los hijos.
Precaución al incluir imágenes - El tamaño del archivo puede aumentar drásticamente con la adición de imágenes como JPEG en la animación. Asegúrese de que todas las imágenes están optimizadas independientemente de la optimización de la animación Lottie.

¿Cómo integramos las animaciones Lottie en nuestro sitio?

Nuestra animación Lottie original más grande era de 1,3 MB de tamaño, después de la conversión a un archivo dotLottie, el tamaño del archivo era de sólo 58 KB. Integrar nuestras animaciones dotLottie en nuestra aplicación Next.js fue una implementación de código muy sencilla. Puede seguir los siguientes pasos para empezar.

Incluya la biblioteca del reproductor dotLottie en su aplicación. El tamaño sin empaquetar es de 3,14 MB.

yarn add @dotlottie/player-component
// or
npm i @dotlottie/player-component

Añade el script JSX de Lottie en la página. En nuestro caso, las animaciones están más abajo en la página por lo que no necesitamos cargar el script hasta que el usuario se desplaza a esa sección. Evitando así un golpe de rendimiento en el tiempo de carga inicial de la página.

<Script src='<https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js>' />

Renderiza el dotLottie en tu JSX

<dotlottie-player src='/[file path]/[animation file name].lottie' autoplay />

Es tan simple como eso para empezar con las animaciones dotLottie. Hay un montón de opciones y personalizaciones para la biblioteca de reproductores dotLottie también. Puede leer más sobre ellasaquí.

Para llevar

Es posible incluir animaciones en su sitio sin que ello repercuta negativamente en el rendimiento y las puntuaciones SEO.
Para animaciones simples, intenta siempre crearlas usando primero sólo HTML y CSS. También presta atención a cómo las propiedades que estás animando impactarán en el pipeline de renderizado.
Para animaciones más complejas, los diseñadores pueden crear animaciones y exportarlas como archivos dotLottie para enviar animaciones web altamente optimizadas que tengan compatibilidad multiplataforma y no inhiban el rendimiento de la página.