Skip to main content

Pages with Non-Composited Animations

Priority: Critical

Impact: Neutral

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.

  • Janky Animations: 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.

  • Longer Time to Interactive (TTI): 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.

  • Increased CPU Usage: Non-composited animations can increase CPU usage since the main thread is more heavily utilized. This can drain battery life faster on mobile devices.

How do you fix it​

  • Use CSS Properties that Promote Compositing: Stick to CSS properties that are known to be handled by the compositor thread, such as transform and opacity. Avoid properties like top, left, width, and height for animations.

  • Enable GPU Acceleration: Ensure that animations are hardware-accelerated by using the will-change property to hint to the browser that an element will be animated.

  • Optimize Animation Performance: Minimize the use of complex animations and avoid animating large elements. Simplify animations where possible to reduce the burden on the main thread.

Learn how to avoid non-composited animations.

What is the positive impact​

  • Smoother Animations: By ensuring animations are composited, they will run more smoothly and appear more fluid, enhancing the user experience and CLS.

  • Reduced Main Thread Workload: Offloading animations to the compositor thread frees up the main thread to handle other tasks, improving overall page performance and responsiveness.

  • Better Battery Life and Efficiency: 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.

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:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            metricSavingsCls
            score
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer