Cómo evitar la animación no compuesta: Guía fácil

¿Alguna vez has hecho clic en un sitio web y te has dado cuenta de que tartamudea y se retrasa al desplazarte?

Frustrante, ¿verdad?

Bueno, ¿y si te dijéramos que el secreto de esos inconvenientes reside en algo llamado animaciones no compuestas?

Se trata de animaciones que no son procesadas eficazmente por el navegador, lo que supone una carga adicional para el procesador principal del ordenador y provoca problemas de rendimiento.

Pero no te preocupes, hay una forma de solucionarlo.

En este blog, hablaremos de las animaciones no compuestas y de cómo arreglarlas. Te guiaremos a través de sencillos pasos para suavizar esas animaciones entrecortadas, haciendo que tu sitio web no sólo sea más rápido, sino que también sea un placer navegar por él para tus visitantes.

Comencemos.

¿Qué es la animación no compuesta?

La animación no compuesta es un tipo de animación web procesada principalmente por la CPU y no por la GPU (Unidad de Procesamiento Gráfico).

Este enfoque de procesamiento a menudo conduce a un renderizado menos eficiente, causando potencialmente problemas de rendimiento, como velocidades de fotogramas más lentas y retraso en la interfaz de usuario, especialmente en páginas web complejas o en dispositivos menos potentes.

Recortar el Desplazamiento de diseño acumulativo (CLS) promete un aumento de tu puntuación de Rendimiento de Lighthouse.

¿Por qué evitar las animaciones no compuestas es esencial para el rendimiento web?

Evitar las animaciones no compuestas es esencial para el rendimiento web por varias razones. En primer lugar, las animaciones no compuestas, que son procesadas por la CPU, pueden ser menos eficientes y más lentas que las animaciones procesadas por la GPU.

Esta ineficacia a menudo provoca una disminución de la velocidad de fotogramas, haciendo que las animaciones parezcan entrecortadas o lentas, lo que puede afectar negativamente a la experiencia del usuario. Las páginas web con animaciones más fluidas son más sensibles y, en general, más agradables para interactuar.

En segundo lugar, las animaciones que consumen mucha CPU pueden sobrecargar los recursos del sistema, especialmente en dispositivos menos potentes, como smartphones u ordenadores antiguos. Esta sobrecarga puede ralentizar no sólo las propias animaciones, sino también otros procesos que se ejecuten en la página web.

Como resultado, el rendimiento general del sitio web puede verse comprometido. No sólo esto, un rendimiento comprometido del sitio web también puede afectar negativamente al éxito del marketing digital. Consulta este blog "El impacto de la velocidad del sitio web en el éxito del marketing digital" para saber cómo.

Nota: Aquí tienes unos cuantos consejos para acelerar tu sitio WordPress y mejorar su rendimiento.

¿Cómo afectan las animaciones no compuestas al rendimiento de la página y al renderizado del navegador?

Las animaciones no compuestas pueden tener un gran impacto tanto en el rendimiento de la página como en la renderización del navegador. En cuanto al rendimiento, tienden a ralentizar un sitio web. Esto ocurre porque el procesador principal del ordenador (CPU) está sobrecargado de trabajo, tratando de manejar animaciones complejas además de otras tareas.

Como resultado, el sitio web responde menos a las interacciones del usuario, como hacer clic o desplazarse. Esto se nota especialmente en dispositivos con menos capacidad de procesamiento, como los teléfonos móviles.

En cuanto a la renderización del navegador, las animaciones no compuestas suelen provocar un movimiento entrecortado y desigual en la pantalla. Como la CPU es menos eficiente dibujando y gestionando estas animaciones que la GPU, las animaciones pueden aparecer entrecortadas y poco fluidas.

Esto afecta al atractivo visual y puede hacer que el sitio web parezca más lento, ya que el navegador se esfuerza por seguir el ritmo de renderización de estas animaciones tan exigentes. Además, la carga sobre la CPU puede provocar tiempos de carga más largos para la página web, ya que tarda más tiempo en procesar y mostrar los elementos animados.

¿Cómo detectar animaciones no compuestas?

Detectar animaciones no compuestas puede hacerse utilizando herramientas de análisis del rendimiento como Google PageSpeed Insights y GTmetrix. Aquí tienes 10 mejores herramientas de prueba de velocidad de WordPress que puedes utilizar para detectar animaciones no compuestas.

Estas herramientas analizan varios aspectos del rendimiento de tu sitio web, incluido cómo se renderizan las animaciones.

A continuación te explicamos cómo puedes utilizarlas:

Google PageSpeed Insights

• Visita la página Sitio web de PageSpeed Insightsintroduce la URL de tu página web y haz clic en "Analizar". La herramienta evalúa el rendimiento de tu página tanto para móviles como para ordenadores de sobremesa.

• Tras el análisis, PageSpeed Insights proporciona una puntuación y un informe detallado. Busca en la sección "Diagnóstico" del informe.
• Busca una advertencia que diga algo como "Evitar animaciones no compuestas". Esto indica que tu página tiene animaciones que podrían optimizarse para mejorar el rendimiento.

GT Metrix

• Ir a la página GTmetrix introduce la URL de tu sitio e inicia la prueba. GTmetrix ofrece un análisis completo del rendimiento de carga de tu sitio.

• Una vez completado el análisis, obtendrás un informe detallado. GTmetrix se centra más en las métricas generales de rendimiento, por lo que es posible que no señale directamente las animaciones no compuestas, como PageSpeed Insights.
• Busca tiempos de renderizado y métricas de carga de la CPU, como "Tiempo total de bloqueo" o "Tiempo para interactuar".
• Aunque GTmetrix no mencione explícitamente las animaciones no compuestas, los valores altos en estas áreas podrían indicar procesos de renderizado ineficientes, que podrían deberse a animaciones no compuestas.

Además, también puedes realizar prueba de esfuerzo para determinar el rendimiento de tu sitio web.

¿Cómo manejan los navegadores las animaciones?

Cuando se trata de manejar animaciones, los navegadores utilizan dos partes principales de un ordenador: la CPU (Unidad Central de Procesamiento) y la GPU (Unidad de Procesamiento Gráfico). Las animaciones sencillas, como el cambio de colores o de texto, suelen ser gestionadas por la CPU.

Sin embargo, para animaciones más complejas, especialmente las que implican movimiento o transformación, los navegadores intentan utilizar la GPU. La GPU es mejor para estas tareas porque está diseñada para manejar gráficos y puede crear animaciones suaves y fluidas.

Pero, si una animación no está configurada correctamente, el navegador puede seguir utilizando la CPU para ello, haciendo que la animación sea menos fluida y ralentizando todo el sitio web. Por eso, los desarrolladores web trabajan para asegurarse de que sus animaciones son compatibles con la GPU para obtener el mejor rendimiento.

Causas de las animaciones no compuestas

Para avanzar hacia la resolución del problema de las animaciones no compuestas, es esencial comprender primero cuáles son sus causas. He aquí algunas causas comunes:

Animar propiedades no compuestas

Animar propiedades no compuestas suele provocar animaciones no compuestas. Esto ocurre cuando en las animaciones se utilizan propiedades como "anchura", "altura" o "margen", que requieren que el navegador haga muchos recálculos y redibuje.

Estas propiedades no son manejadas eficientemente por la GPU, por lo que suponen una mayor carga para la CPU, haciendo que las animaciones sean menos fluidas.

Utilizar JavaScript para animar

Utilizar JavaScript para animar también puede causar problemas. Las animaciones basadas en JavaScript, especialmente cuando no están optimizadas, pueden exigir mucho a la CPU. Aunque JavaScript ofrece más control sobre las animaciones, puede provocar problemas de rendimiento si las animaciones son complejas o no están codificadas de forma eficiente.

Áreas pintadas complejas

Las zonas pintadas complejas en las animaciones pueden ser otro de los culpables. Cuando tienes grandes áreas que deben repintarse con frecuencia durante una animación, el sistema se ve sometido a una gran presión. Esto es especialmente cierto en el caso de gráficos intrincados o imágenes de alta resolución que cambian rápidamente.

Gráficos o medios ineficaces

El uso ineficiente de gráficos o medios en las animaciones es otra causa común. Las imágenes de alta resolución, los vídeos o los gráficos que no están optimizados para su uso en la web pueden ralentizar las animaciones. El navegador se esfuerza más para renderizar estos elementos pesados, especialmente si forman parte de una secuencia animada.

Uso excesivo de sombras y filtros

Por último, el uso excesivo de sombras y filtros en CSS puede dar lugar a animaciones no compuestas. Estos efectos, aunque visualmente atractivos, consumen muchos recursos. Aplicarlos a elementos en movimiento puede afectar significativamente al rendimiento, ya que requieren que el navegador realice una gran cantidad de procesamiento adicional.

Nota: Aprende los otros causas de la lentitud de los sitios web.

Cómo evitar las animaciones no compuestas

Las animaciones no compuestas pueden afectar significativamente al rendimiento de tu sitio web, provocando una experiencia de usuario lenta. La clave para resolver este problema reside en optimizar la forma en que se gestionan las animaciones.

A continuación te explico paso a paso cómo solucionar este problema. Antes de pasar a la fijación, te mostraré cómo se ve la puntuación del sitio web con este error:

• Pasando a los diagnósticos, encontramos el error "evitar animaciones no compuestas".

Estos son los pasos que debes seguir para solucionar este problema.

• Ve a tu panel de WordPress
• Selecciona Apariencia > Personalizar
• Puede que encuentres un código CSS en la sección "CSS adicional". Hay muchas posibilidades de que este código no utilice animaciones css optimizadas, lo que está provocando que se produzca este error.

• Si eres desarrollador, ya sabrás que este código no está optimizado. Y aquí están los cambios que harían maravillas por tu sitio web.

Cambio 1: Añadir la propiedad Will-Change

Este cambio consiste en informar al navegador sobre los próximos cambios de animación, lo que puede ayudar a optimizar el rendimiento de la renderización.

.my-animation {

    width: 100px;

    height: 100px;

    background-color: red;

    position: absolute;

    will-change: transform, opacity; /* Added line */

    animation: complexMove 5s linear infinite;

}

/* Rest of the keyframes remain unchanged */

Cambio 2: Reducir la complejidad de la animación

Aquí, la transformación de escala al 50% se ha modificado de scale(2) a scale(1,5). Esto reduce la complejidad y la intensidad de la animación.

.my-animation {

    /* ... other properties ... */

    will-change: transform, opacity; /* Assuming Change 1 is kept */

    animation: complexMove 5s linear infinite;

}

@keyframes complexMove {

    /* ... 0% and 100% keyframes ... */

    50% {

        transform: translateX(300%) rotate(180deg) scale(1.5); /* Modified line */

        opacity: 0.5;

    }

    /* ... 100% keyframe ... */

}

Este es el aspecto que tendría tu código final:

.my-animation {

    width: 100px;

    height: 100px;

    background-color: red;

    position: absolute;

    will-change: transform, opacity; /* Informing the browser of upcoming changes */

    animation: complexMove 5s linear infinite;

}

@keyframes complexMove {

    0%, 100% {

        transform: translateX(0) rotate(0) scale(1);

        opacity: 1;

    }

    50% {

        transform: translateX(300%) rotate(180deg) scale(1.5); /* Simplified scale for reduced complexity */

        opacity: 0.5;

    }

}

• Simplemente elimina el código anterior y copia y pega este nuevo código en tu css adicional. Esto no cambiará la animación, pero seguramente eliminará este error.

• Puedes ver que el error ya no existe.
• Y lo bueno es que, con el código optimizado, puedes aumentar la puntuación de rendimiento. Al principio de esta sección vimos que la puntuación de rendimiento era de 77.
• Aquí tienes la puntuación de rendimiento mejorada:

Por tanto, algunos consejos generales que debes tener en cuenta para solucionar este error son:

Consejo 1: Optimiza las animaciones CSS

En lugar de animar propiedades como altura, anchura o izquierda, que pueden consumir muchos recursos, utiliza
transformar
y
opacidad. Estas propiedades se aceleran en la GPU y los navegadores pueden gestionarlas con mayor eficacia.

Aquí tienes el código de ejemplo antes y después de la optimización:

Antes de la optimización:

.animate-left {

    position: relative;

    animation: moveLeft 2s linear infinite;

}

@keyframes moveLeft {

    from { left: 0; }

    to { left: 100px; }

}

Después de la optimización:

.animate-left {

    position: relative;

    animation: moveLeft 2s linear infinite;

}

@keyframes moveLeft {

    from { transform: translateX(0); }

    to { transform: translateX(100px); }

}

Consejo 2: Aprovechar el poder de la propiedad "Will-Change" de CSS

Utiliza la propiedad voluntad-cambio para informar al navegador de los elementos que cambiarán en un futuro próximo. Esto permite al navegador prepararse y optimizar el cambio.

A continuación te explicamos cómo utilizar la propiedad will-change;

• Inserta la siguiente línea en tu código;

  will-change: transform, opacity; /* Added line */

Consejo 3: Descargar animaciones a la GPU

Descargar las animaciones a la GPU (Unidad de Procesamiento Gráfico) es una técnica para optimizar las animaciones web, haciéndolas más fluidas y menos gravosas para la CPU (Unidad Central de Procesamiento).

Este enfoque es especialmente eficaz para resolver los problemas de animación no compuesta, ya que aprovecha la capacidad de la GPU para manejar las tareas gráficas de forma más eficiente.

Puedes descargar las animaciones a la GPU utilizando las propiedades Transformación y Opacidad para las animaciones, porque son más eficientes que animar propiedades como anchura, altura, parte superior o izquierda.

Puedes utilizar propiedades de transformación y opacidad en lugar de izquierda y derecha. Aquí tienes un ejemplo:

Código no optimizado:

@keyframes moveLeft {

    from { left: 0; }

    to { left: 100px; }

}

Código optimizado:

@keyframes moveLeft {

    from { transform: translateX(0); }

    to { transform: translateX(100px); }

}

Consejo 4: Utilizar bibliotecas y herramientas eficientes

Incorporar bibliotecas eficientes como GreenSock Animation Platform (GSAP) o Velocity.js puede ser muy eficaz para resolver errores de animación no compuesta.

Estas bibliotecas están optimizadas para el rendimiento, y ofrecen animaciones más suaves y eficientes que el CSS o JavaScript estándar.

Para incorporar la biblioteca GSAP, sigue estos pasos;

• Localiza el enlace CDN para GSAP.
• Abre tu archivo HTML donde quieras utilizar GSAP.
• Tienes que colocar el enlace CDN dentro de una etiqueta <script>. Esta etiqueta debería colocarse idealmente cerca del final de tu sección <body>.

<!DOCTYPE html>

<html>

<head>

    <title>Your Webpage</title>

    <!-- Other head elements -->

</head>

<body>

    <!-- Your HTML content goes here -->

    <!-- GSAP CDN Script at the end of body -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</body>

</html>

Cómo el alojamiento Cloudways puede complementar tus animaciones optimizadas

Alojamiento Cloudways mejora los sitios web con animaciones optimizadas ofreciendo velocidades rápidas y un alto tiempo de actividad desde los mejores proveedores en la nube, como DigitalOcean, AWS y Google Cloud. Sus soluciones avanzadas de almacenamiento en caché, como Memcached, Varnish y Redis, garantizan una carga rápida de las animaciones. La pila optimizada de la plataforma, junto con la CDN empresarial de Cloudflare, aumenta aún más el rendimiento de las animaciones, especialmente durante los picos de tráfico. Junto con sólidas funciones de seguridad, Cloudways proporciona un entorno de alojamiento ideal y rentable para sitios web ricos en animaciones.

Resumen

Y esto es todo. Hemos explorado estrategias clave para evitar animaciones no compuestas, centrándonos en las mejores prácticas de animación web.

También hemos discutido las causas de la aparición de animaciones no compuestas y cómo afectan al rendimiento de la web y a la renderización del navegador.

Si tienes alguna pregunta sobre este tema, no dudes en ponerte en contacto con nosotros.

Liza Rajput

Liza Rajput es Productora de Contenidos Técnicos en Cloudways. Como ingeniera de software, le encanta jugar con los datos y sus procesos, y desea crecer y destacar en Ciencia de Datos e Ingeniería de Big Data. También es una ávida lectora y una escritora excepcional, con suficiente experiencia en escritura técnica, basada en la investigación y creativa.