Avoiding Non-Composited Animation Issues

Have you ever clicked on a website only to find it stutters and lags as you scroll?

Frustrating, isn’t it?

Well, what if we told you the secret behind those snags lies in something called non-composited animations?

These are animations that aren’t efficiently processed by the browser, putting extra load on the computer’s main processor and leading to performance issues.

But don’t worry, there’s a way to fix this.

In this blog, we will discuss the non-composited animations and how to fix them. We’ll guide you through simple steps to smooth out those jerky animations, making your website not just faster but also a pleasure to navigate for your visitors.

Let’s begin.

What Is Non Composited Animation?

Non-composited animation is a type of web animation processed primarily by the CPU rather than the GPU (Graphics Processing Unit).

This processing approach often leads to less efficient rendering, potentially causing performance issues such as slower frame rates and user interface lag, especially on complex web pages or less powerful devices.

Trimming down Cumulative Layout Shift (CLS) promises a boost to your Lighthouse Performance score.

Want to Boost Your Website’s Animation Performance?

Enhance your site’s animations with Cloudways Managed Hosting. Our optimized stack, featuring top cloud providers like DigitalOcean and Google Cloud, ensures smooth, non-composited animations.

TRY NOW

Why Is Avoiding Non Composited Animation Essential for Web Performance?

Avoiding non-composited animations is essential for web performance for several reasons. Firstly, non-composited animations, which are processed by the CPU, can be less efficient and slower than GPU-processed animations.

This inefficiency often leads to a decrease in the frame rate, causing animations to appear choppy or laggy, which can negatively impact the user experience. Webpages with smoother animations feel more responsive and are generally more pleasant to interact with.

Secondly, CPU-intensive animations can strain the system’s resources, especially on less powerful devices like smartphones or older computers. This strain can slow down not only the animations themselves but also other processes running on the webpage.

As a result, the overall performance of the website can be compromised. Not just this, a compromised website performance can also negatively impact digital marketing success. Check this blog “The Impact of Website Speed on Digital Marketing Success” to know how.

Note: Here are a few easy tips to speed up your WordPress site for better performance.

How Do Non-composited Animations Affect Page Performance and Browser Rendering?

Non-composited animations can heavily impact both page performance and browser rendering. On the performance side, they tend to slow down a website. This happens because the computer’s main processor (CPU) is overworked, trying to handle complex animations on top of other tasks.

As a result, the website becomes less responsive to user interactions like clicking or scrolling. This is especially noticeable on devices with less processing power, like mobile phones.

Regarding browser rendering, non-composited animations often lead to choppy and uneven movement on the screen. Since the CPU is less efficient at drawing and managing these animations than the GPU, the animations can appear stuttered and not smooth.

This affects the visual appeal and can make the website feel slower as the browser struggles to keep up with rendering these demanding animations. Additionally, the burden on the CPU can lead to longer loading times for the webpage, as it takes more time to process and display the animated elements.

Optimize Your Site’s Animations with WordPress Hosting by Cloudways!

Our advanced caching tools like Memcached, Varnish, and Redis, combined with the reliability of top cloud providers, ensure your animations are fluid and engaging.

TRY NOW

How to Detect Non-Composited Animations?

Detecting non-composited animations can be done using performance analysis tools like Google PageSpeed Insights and GTmetrix. Here are the 10 best WordPress Speed Test Tools that you can use to detect non-composited animations.

These tools analyze various aspects of your website’s performance, including how animations are rendered.

Here’s how you can use them:

Google PageSpeed Insights

• Visit the PageSpeed Insights website, enter your webpage URL, and click ‘Analyze’. The tool evaluates your page both for mobile and desktop performance.

• After the analysis, PageSpeed Insights provides a score and a detailed report. Look under the ‘Diagnostics’ section of the report.
• Look for a warning that says something like “Avoid non-composited animations.” This indicates that your page has animations that could be optimized for better performance.

GT Metrix

• Go to the GTmetrix website, enter your site’s URL, and start the test. GTmetrix offers a comprehensive analysis of your site’s loading performance.

• Once the analysis is complete, you’ll get a detailed report. GTmetrix focuses more on general performance metrics, so it may not directly point out non-composited animations like PageSpeed Insights.
• Look for rendering times and CPU load metrics, such as ‘Total Blocking Time’ or ‘Time to Interactive.’
• While GTmetrix might not explicitly mention non-composited animations, high values in these areas could indicate inefficient rendering processes, which might be due to non-composited animations.

Moreover, you can also perform stress test to determine your website’s performance.

How Do Browsers Handle Animations?

When it comes to handling animations, browsers use two main parts of a computer: the CPU (Central Processing Unit) and the GPU (Graphics Processing Unit). Simple animations, like changing colors or text, are usually managed by the CPU.

However, for more complex animations, especially those involving movement or transformation, browsers try to use the GPU. The GPU is better for these tasks because it’s designed to handle graphics and can create smooth, fluid animations.

But, if an animation isn’t set up correctly, the browser might still use the CPU for it, making the animation less smooth and slowing down the whole website. So, web developers work to ensure their animations are GPU-friendly for the best performance.

Causes of Non-Composited Animations

To move towards resolving the issue of non-composited animations, it’s essential first to understand what causes them. Here are some common reasons:

Animating Non-Composite Properties

Animating non-composite properties often leads to non-composited animations. This happens when properties like ‘width’, ‘height’, or ‘margin’, which require the browser to do a lot of recalculating and redrawing, are used in animations.

These properties aren’t efficiently handled by the GPU, so they put more load on the CPU, making animations less smooth.

Using JavaScript to Animate

Using JavaScript to animate can also cause problems. JavaScript-based animations, especially when not optimized, can demand a lot from the CPU. While JavaScript offers more control over animations, it can lead to performance issues if the animations are complex or not coded efficiently.

Complex Painted Areas

Complex painted areas in animations can be another culprit. When you have large areas that need to be repainted frequently during an animation, it puts a significant strain on the system. This is particularly true for intricate graphics or high-resolution images that change rapidly.

Inefficient Graphics or Media

Inefficient graphics or media usage in animations is another common cause. High-resolution images, videos, or graphics that aren’t optimized for web use can slow down animations. The browser struggles more to render these heavy elements, especially if they’re part of an animated sequence.

Excessive Use of Shadows and Filters

Lastly, the excessive use of shadows and filters in CSS can lead to non-composited animations. These effects, while visually appealing, are resource-intensive. Applying them to moving elements can significantly impact performance, as they require the browser to do a lot of extra processing.

Note: Learn the other causes of slow websites.

How to Avoid Non-composited Animations

Non-composited animations can significantly impact your website’s performance, leading to a sluggish user experience. The key to resolving this issue lies in optimizing how animations are handled.

Want to Improve Your Site Speed and UX? Switch to Cloudways Today!

Elevate your animation performance with Cloudways’ SSD-based hosting and built-in advanced caches, ensuring ultra-fast load times and smooth, non-composited animations on your WordPress site.

TRY NOW

Here is the step-by-step approach to fix this issue. Before moving toward fixation, I will show you how the website score looks with this error:

• Moving toward the diagnostics, we found the “avoid non-composited animations” error.

Here are the steps you need to follow to fix this issue.

• Go to your WordPress Dashboard
• Select Appearance > Customize
• You may find a CSS code under the “Additional CSS” section. There is a high chance that this code doesn’t use optimized css animations, which is causing this error to occur.

• If you’re a developer, you would already know that this code isn’t optimized. And here are the changes that would do wonders for your website.

Change 1: Adding the Will-Change Property

This change is about informing the browser about the upcoming animation changes, which can help optimize the rendering performance.

.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 */

Change 2: Reducing Animation Complexity

Here, the scale transformation at 50% has been modified from scale(2) to scale(1.5). This reduces the complexity and intensity of the animation.

.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 ... */

}

Here is what your final code would look like:

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

    }

}

• Simply remove the previous code and copy and paste this new code into your additional css. This won’t change the animation, but will surely remove this error.

• You can see the error no longer exists.
• And the good thing is, with the optimized code, you can increase the performance score. We saw at the start of this section that the performance score was 77.
• Here’s the improved performance score:

Thus, some general tips you must keep in mind to solve this error are:

Tip 1: Optimize CSS Animations

Instead of animating properties like height, width, or left, which can be resource-intensive, use
transform
and
opacity. These properties are GPU-accelerated and can be more efficiently handled by browsers.

Here’s the example code before and after optimization:

Before Optimization:

.animate-left {

    position: relative;

    animation: moveLeft 2s linear infinite;

}

@keyframes moveLeft {

    from { left: 0; }

    to { left: 100px; }

}

After Optimization:

.animate-left {

    position: relative;

    animation: moveLeft 2s linear infinite;

}

@keyframes moveLeft {

    from { transform: translateX(0); }

    to { transform: translateX(100px); }

}

Tip 2: Leveraging the Power of CSS ‘Will-Change’ Property

Use the will-change property to inform the browser of elements that will change in the near future. This allows the browser to prepare and optimize for the change.

Here’s how to use the will-change property;

• Insert the following line in your code;

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

Tip 3: Offloading Animations to the GPU

Offloading animations to the GPU (Graphics Processing Unit) is a technique to optimize web animations, making them smoother and less taxing on the CPU (Central Processing Unit).

This approach is especially effective in resolving non-composited animation issues, as it leverages the GPU’s ability to handle graphical tasks more efficiently.

You can offload animations to the GPU using Transform and Opacity properties for animations because they are more efficient than animating properties like width, height, top, or left.

You can use transform and opacity properties instead of left and right. Here’s an example:

Unoptimized Code:

@keyframes moveLeft {

    from { left: 0; }

    to { left: 100px; }

}

Optimized Code:

@keyframes moveLeft {

    from { transform: translateX(0); }

    to { transform: translateX(100px); }

}

Tip 4: Using Efficient Libraries and Tools

Incorporating efficient libraries like GreenSock Animation Platform (GSAP) or Velocity.js can be highly effective in solving non-composited animation errors.

These libraries are optimized for performance, offering smoother and more efficient animations than standard CSS or JavaScript.

To incorporate the GSAP library, follow these steps;

• Locate the CDN link for GSAP.
• Open your HTML file where you want to use GSAP.
• You need to place the CDN link inside a <script> tag. This tag should ideally be placed near the end of your <body> section.

<!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>

How Cloudways Hosting Can Complement Your Optimized Animations

Cloudways Hosting enhances websites with optimized animations by offering fast speeds and high uptime from top cloud providers like DigitalOcean, AWS, and Google Cloud. Its advanced caching solutions, including Memcached, Varnish, and Redis, ensure quick loading of animations. The platform’s optimized stack, along with Cloudflare’s Enterprise CDN, further boosts animation performance, especially during peak traffic. Coupled with robust security features, Cloudways provides an ideal, cost-effective hosting environment for animation-rich websites.

Summary

And that’s it. We have explored key strategies for avoiding non-composited animations, focusing on best practices in web animation.

We have also discussed the causes of the occurrence of non-composited animations and how they impact web performance and browser rendering.

If you have any questions regarding this topic, feel free to reach out.