Avoid non-composited animations
"Avoid non-composited animations" means that your webpage is using animations that are not being composited by the GPU, which can slow down your site and negatively impact the user experience.
How to fix it
The solution is to use composited animations. Here's how:
Step 1: Identify Non-Composited Animations
First, you need to identify the non-composited animations. You can use Chrome DevTools for this. Open DevTools, go to the 'Performance' tab, and look for animations in the 'Main' section that are not being composited.
Step 2: Use Composited Animations
Once you've identified the non-composited animations, you need to replace them with composited animations. This might involve using CSS transforms and opacity changes instead of animating properties like left or top, or using the will-change property to hint to the browser that an element will be animated.
/* Before */
.animate {
animation: move 1s linear;
}
@keyframes move {
from { top: 0; }
to { top: 100px; }
}
/* After */
.animate {
will-change: transform;
animation: move 1s linear;
}
@keyframes move {
from { transform: translateY(0); }
to { transform: translateY(100px); }
}
In this example, we've replaced a non-composited animation with a composited animation by using a CSS transform instead of animating the top property.
Step 3: Test Your Changes
For an even better solution, consider testing your changes to make sure they don't break any functionality. This can help ensure that your site still works as expected with the composited animations.