# Non-Composited Animations

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

Animations that are handled by the main thread can cause performance issues because the main thread is responsible for many tasks, including handling user interactions, running JavaScript, and rendering page content.

<ul>
  <li>
    <strong>Janky Animations:</strong> When animations are run on the main thread, they can become janky or choppy,
    especially if the main thread is busy with other tasks. This can lead to a poor user experience and can increase
    Cumulative Layout Shift.
  </li>
  <li>
    <strong>Longer Time to Interactive (TTI):</strong> The main thread being occupied with animations can delay the time
    it takes for a page to become interactive, as the browser has to juggle rendering animations and processing user
    interactions simultaneously.
  </li>
  <li>
    <strong>Increased CPU Usage:</strong> Non-composited animations can increase CPU usage since the main thread is more
    heavily utilized. This can drain battery life faster on mobile devices.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Use CSS Properties that Promote Compositing:</strong> Stick to CSS properties that are known to be handled
    by the compositor thread, such as <code>transform</code> and <code>opacity</code>. Avoid properties like{" "}
    <code>top</code>, <code>left</code>, <code>width</code>, and <code>height</code> for animations.
  </li>
  <li>
    <strong>Enable GPU Acceleration:</strong> Ensure that animations are hardware-accelerated by using the{" "}
    <code>will-change</code> property to hint to the browser that an element will be animated.
  </li>
  <li>
    <strong>Optimize Animation Performance:</strong> Minimize the use of complex animations and avoid animating large
    elements. Simplify animations where possible to reduce the burden on the main thread.
  </li>
</ul>
[Learn how to avoid non-composited
animations.](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)

## What is the positive impact

<ul>
  <li>
    <strong>Smoother Animations:</strong> By ensuring animations are composited, they will run more smoothly and appear
    more fluid, enhancing the user experience and CLS.
  </li>
  <li>
    <strong>Reduced Main Thread Workload:</strong> Offloading animations to the compositor thread frees up the main
    thread to handle other tasks, improving overall page performance and responsiveness.
  </li>
  <li>
    <strong>Better Battery Life and Efficiency:</strong> Optimized animations that leverage the GPU can reduce CPU
    usage, leading to better battery life on mobile devices and more efficient use of system resources.
  </li>
</ul>

## How to fetch the data for this report template

You will need to run a crawl for report template to generate report. When report has been generated and you have
crawl id you can fetch data for the report using the following query:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
            nodes {
              opportunityDigest
              element
              title
              auditId
              exampleUrl
              urlCount
              nodeNodeLabel
              failedAuditsCount
              warningAuditsCount
              infoAuditsCount
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"non_composited_animations_failed_items"}
```