# Pages with Inefficient Animated Content

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Slow Page Rendering:</strong> Complex or resource-intensive animations can delay the rendering of page
    content, leading to a slower user experience.
  </li>
  <li>
    <strong>High CPU Usage:</strong> Inefficient animations can consume significant CPU resources, particularly on
    lower-powered devices, leading to poor performance and reduced battery life.
  </li>
  <li>
    <strong>Poor Accessibility:</strong> Excessive animations or rapid transitions can be disorienting or distracting
    for users, particularly those with cognitive or visual impairments.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Convert GIFs to more efficient formats:</strong> consider using MPEG4/WebM videos for animations and
    PNG/WebP for static images.
  </li>
  <li>
    <strong>Replicate behaviour of GIFs:</strong> replace animated GIFs with video elements (&lt;video&gt;) to maintain
    autoplay, continuous looping, and silence.
  </li>
</ul>
[Learn more about efficient video
content](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> Optimizing animations can reduce the time it takes for a page to become
    interactive, improving overall page load times.
  </li>
  <li>
    <strong>Improved Battery Life:</strong> By reducing CPU usage, optimized animations can help extend battery life on
    mobile devices.
  </li>
  <li>
    <strong>Enhanced User Experience:</strong> Smoother, more responsive animations can enhance the user experience and
    make the website feel more polished and professional.
  </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}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              savingsKib
              pageviews
              productOfSavingsKibAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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