Skip to content
Learn Measure Blog Case studies About
On this page
  • Background
  • How Lighthouse detects non-composited animations
  • How to ensure animations are composited
  • Resources

Avoid non-composited animations

Aug 12, 2020
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Performance audits
On this page
  • Background
  • How Lighthouse detects non-composited animations
  • How to ensure animations are composited
  • Resources

Non-composited animations can appear janky (i.e. not smooth) on low-end phones or when performance-heavy tasks are running on the main thread. Janky animations can increase the Cumulative Layout Shift (CLS) of your page. Reducing CLS will improve your Lighthouse Performance score.

Background #

The browser's algorithms for converting HTML, CSS, and JavaScript into pixels are collectively known as the rendering pipeline.

The rendering pipeline consists of the following sequential steps: JavaScript, Style, Layout, Paint, Composite.
The rendering pipeline.

It's OK if you don't understand what each step of the rendering pipeline means. The key thing to understand right now is that at each step of the rendering pipeline the browser uses the result of the previous operation to create new data. For example, if your code does something that triggers Layout, the Paint and Composite steps need to run again. A non-composited animation is any animation that triggers one of the earlier steps in the rendering pipeline (Style, Layout, or Paint). Non-composited animations perform worse because they force the browser to do more work.

Check out the following resources to learn about the rendering pipeline in-depth:

  • Inside look at modern web browsers (part 3)
  • Simplify paint complexity and reduce paint areas
  • Stick to compositor-only properties and manage layer count

How Lighthouse detects non-composited animations #

When an animation can't be composited, Chrome reports the failure reasons to the DevTools trace, which is what Lighthouse reads. Lighthouse lists DOM nodes which have animations that were not composited along with the failure reason(s) for each animation.

How to ensure animations are composited #

See Stick to compositor-only properties and manage layer count and High-performance animations.

Resources #

  • Source code for the Avoid non-composited animations audit
  • Stick to compositor-only properties and manage layer count
  • High-performance animations
  • Simplify paint complexity and reduce paint areas
  • Inside look at modern web browsers (part 3)
Last updated: Aug 12, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.