The Compositing Phase

How the browser merges multiple painted layers together using the GPU to create the final image on your screen.

Internet3 min readConcept 30 of 35

What it is

Compositing is the final step in the Critical Rendering Path. It takes the visual layers created during the Paint phase and flattens them together into the final image you see on your monitor.

Crucially, Compositing is usually handled by the device's GPU (Graphics Processing Unit), making it incredibly fast compared to CPU-bound Layout and Paint operations.

Why it matters

If you understand compositing, you unlock 60fps (or 120fps) animations. The golden rule of web performance is to only animate properties that the Compositor can handle alone.

If you only animate transform and opacity, the browser skips the Layout and Paint phases entirely. The GPU just takes the pre-painted layers, moves them around, or changes their transparency. This is why these two properties are buttery-smooth even on cheap smartphones.

How it works

When the browser paints elements, it can decide to put certain elements onto their own independent 'Render Layers'.

Think of these layers like sheets of clear acetate stacked on top of each other. If you move one sheet around (transform), or make it more transparent (opacity), you don't need to redraw the artwork on the sheets themselves. The Compositor just merges the sheets together visually.

Try it

Toggle between animating margin-left (CPU) and transform: translateX (GPU) to see how the Compositor handles layers independently.

Animation Engine:transform: translateX(100px) (GPU Compositor)
Browser Layers (3D View)
Document Background
Element
Composited Layer
Paint Flashes0

Animating transform promotes the element to its own independent GPU Layer. The GPU just slides this separate layer around without redrawing any pixels.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which two CSS properties are safe to animate because they skip Layout and Paint, going straight to the Compositor?
  2. 2What is a major downside of forcing too many elements onto their own compositor layers (e.g., using `will-change: transform` on everything)?
  3. 3What real-world analogy best describes the Compositing phase?

Remember this

  • Compositing merges painted layers together using the GPU.
  • Only animate transform and opacity to hit 60fps.
  • Don't abuse will-change or create too many layers, as it eats up memory.

Done with this concept?

Mark it complete to track your progress. No login needed.