Skip to main content

CSS Compositor Resources: Performance Observer Talk

Background Shortlist of Links:

A companion resource to the talk which will be posted afterwards - thank you!

Web Almanac 2025 section about Non-Composited Animations:

https://almanac.httparchive.org/en/2025/performance#non-composited-animations

Accessibility: MDN Prefers-reduced-motion

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion

Animation from interactions Understanding document example

https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html

Docs: Chromium Code Commit listing Compositable Properties:

https://source.chromium.org/chromium/chromium/src/+/a7e2d2ec825e873347e5582e6bcb6f69f409a705:third_party/blink/renderer/core/animation/compositor_animations.cc;dlc=35a480f16aeed0dbc86341ddf2a19e2e1782f3c5

GPU Accelerated Compositing in Chrome

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/

Stuff to consider: Web Sustainability

https://www.w3.org/TR/web-sustainability-guidelines/#ensure-animation-is-proportionate-and-easy-to-control

Some Google Advice: Avoid Non Composited Animations

https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations

Good website article on layers and compositing:

https://webperf.tips/tip/layers-and-compositing/

CSS Tricks 2021 RE Will-change layer creation:

https://css-tricks.com/when-is-it-right-to-reach-for-contain-and-will-change-in-css/