DEV Community

Cover image for What is Layout, Paint, Composite? and How Do They Affect Web Performance?
Tim Jat
Tim Jat

Posted on

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

#webdev #performance

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.

Layout - Paint - Composite

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.

Sisyphus of the Render Pipeline

Demo: CSS Reflow vs Composite Performance

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

CSS Reflow vs Composite Performance Demo

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.

Group A triggers Repaint

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.

Group A — High CPU usage

Switch to Group B and you'll see:

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

Group B — Lower CPU usage

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

Top comments (0)