What is Layout, Paint, Composite? and How Do They Affect Web Performance?

Tim Jat — Thu, 31 Jul 2025 00:19:01 +0000

What are Layout, Paint, and Composite?

Layout, Paint, and Composite are crucial steps in the browser's Rendering Pipeline.

When a browser renders a webpage, it starts by processing the HTML and CSS. Then it figures out which CSS styles apply to each HTML element (this builds the Render Tree). After that, the browser performs the following steps in order: Layout > Paint > Composite

Layout

Calculates where each element should appear on the page and how big it should be. Involves CSS like margin, top/right/bottom/left, width. If any of these properties change, the browser must recalculate everything, a process called Reflow.

Paint

Fills in the pixels e.g. border, background-color, visibility. If this step runs again, it's called a Repaint.

Composite

For certain CSS properties like transform and opacity, the browser promotes the element to its own layer and uses the GPU to process it. This is faster than relying solely on the CPU. Finally, all the layers are composited (combined) to produce the final result on screen.

How Do They Affect Performance?

CSS can change dynamically through interactions like :hover, :active, or via CSS animations and transitions. Each of these can trigger different parts of the rendering pipeline.

These steps are sequential:

If Layout (Reflow) is triggered: the browser must perform Layout > Paint > Composite
If Paint (Repaint) is triggered: the browser must perform Paint > Composite
If only Composite is triggered: only Composite step is run (most efficient)

Triggering Reflow or Repaint is more expensive than triggering Composite-only operations, which are GPU-accelerated and lightweight.

Demo: CSS Reflow vs Composite Performance

Check out the CSS Reflow vs Composite Performance Demo I created to see this in action.

It includes:

A selector to control how many balls are animated
Toggles to enable/disable each animation group
Two groups of balls (A & B) moving left and right

How do they differ?
Group A uses left (triggers Layout > Paint > Composite)

Group B uses transform: translateX() (triggers only Composite)

Paint Flashing

Enable Paint Flashing in Chrome DevTools:

You'll see Group A constantly repainting due to left triggering reflow/repaint.

Group B, using transform, won't flash — because it bypasses reflow/paint entirely.

Performance Monitor

Set the ball count to 1,000 and toggle to show only Group A, then open Performance Monitor:

Group A shows high CPU usage and spikes in Layouts and Style Recalcs.

Switch to Group B and you'll see:

Lower CPU
Fewer style recalcs / sec
Layout/sec drops to zero

Summary

Layout, Paint, and Composite are essential to rendering a web page.
Different CSS properties trigger different steps.
Understanding these can give you powerful tools to diagnose and improve performance.

Resources

DEV Community: Tim Jat