Why paint matters

Painting is the step where the browser fills in the pixels that eventually reach the screen. Of all the tasks in the rendering pipeline, it is frequently the most time-consuming, and avoiding it entirely is the best strategy whenever possible.

  • Any property change except transform or opacity will trigger a paint.
  • Paint is often the most expensive stage of the pixel pipeline; avoid it when you can.
  • Use layer promotion and careful animation orchestration to limit the painted area.
  • Profile with Chrome DevTools to measure paint complexity and cost, then reduce it.

When paint gets triggered

Triggering layout always triggers paint, because any change to element geometry means its pixels must be regenerated.

The full pixel pipeline.

Paint can also fire on its own when you modify non-geometric properties such as backgrounds, text color, or shadows. In that case, layout is skipped and the pipeline runs paint directly:

The pixel pipeline without layout.

Spotting paint bottlenecks

To quickly identify painted regions, open the Rendering tab in Chrome DevTools and enable Paint Flashing. Chrome then flashes green on screen whenever a paint occurs. If you see the entire viewport flash, or areas you did not expect to be repainted, investigate further.

The page flashing green whenever painting occurs.

Layer promotion for moving or fading elements

The browser does not always paint into a single in-memory image; it can paint into multiple compositor layers as needed.

A representation of compositor layers.

This matters because elements that repaint often, or that move via transforms, can then do so without disturbing other content. It is the same layering model used in graphics tools like Sketch, GIMP, or Photoshop, where individual layers are combined to produce the final image.

The reliable way to create a layer is the will-change CSS property, supported in all major modern browser engines. Using a value of transform promotes the element to a new compositor layer:

.moving-element {
  will-change: transform;
}

Be careful not to overdo it—each layer costs memory and management overhead. After promoting an element, verify with DevTools that the change actually helped. Never promote elements without profiling first.

Shrinking the paint area

Even with promotion, paint work can still be unavoidable. A common pitfall is that browsers combine multiple dirty regions into one, potentially triggering a full-screen repaint. For instance, a fixed header at the top alongside repainting content at the bottom can cause the entire viewport to be repainted.

Reducing paint areas generally comes down to scheduling animations and transitions so they do not overlap, or finding ways to avoid animating certain parts of the page altogether.

Reducing paint cost

The time taken to paint part of the screen.

Not all paint operations cost the same. Anything involving a blur—such as a shadow—takes considerably longer than painting a solid box. In CSS this is not obvious at a glance: background: red; and box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); look superficially similar in intent, but their performance profiles differ greatly.

The paint profiler tells you whether an effect is expensive enough to warrant an alternative approach. Consider whether a cheaper style or a different technique can deliver the same visual result. During animations you especially want to avoid paint: the roughly 10ms budget per frame is usually insufficient for paint work, particularly on mobile devices.