No Login Data Private Local Save

CSS Paint Cost Benchmark - Online Measure Style Performance

23
0
0
0

CSS Paint Cost Benchmark

Measure how different CSS properties affect rendering performance. Compare layout, paint, and composite costs in real time.

Benchmark Settings
What affects Paint Cost?
  • Layout – changing size/position triggers reflow
  • Paint – colors, shadows, outlines redraw pixels
  • Composite – opacity/transform animated on GPU

This tool estimates the time browsers spend on layout and paint when styles change. Lower is better for 60fps.

Frequently Asked Questions

Paint cost refers to the time the browser spends filling pixels on the screen when styles change. High paint costs lead to janky animations and slower page interactions, especially on mobile devices. Keeping paint areas small and avoiding expensive properties ensures a smooth 60fps experience.

It creates a large number of hidden DOM elements, applies a specific CSS class (like box-shadow), forces a layout recalculation, and measures the time. By repeating the process multiple times, we get an average cost. A baseline empty class switch is subtracted to isolate the style cost.

In general, properties that trigger layout (width, height, top, left) are heaviest. Properties that trigger paint (box-shadow, border-radius, background-image) come next. Composite-only properties (transform, opacity) are the cheapest because they can be handled by the GPU without repainting.

Both transform and opacity can be animated entirely on the compositor thread, meaning they don't cause layout or paint recalculations. That's why they're recommended for animations. Even in our benchmark you'll see them as near-zero cost.

Use CSS containment (contain: layout style paint), promote animated elements to their own layer with will-change, avoid expensive property animations, and reduce the size of repaint areas. Tools like this benchmark help you decide which properties to avoid during interactions.

Layout is the calculation of element positions and sizes. Paint is filling in pixels for each part. Composite is assembling the painted layers onto the final screen. The rendering pipeline goes: Layout → Paint → Composite. Cheaper properties skip earlier stages.

Browser engines handle rendering differently, so absolute times vary. However, the relative cost ranking (e.g., box-shadow vs opacity) is consistent across Chrome, Firefox, and Safari. Always test on your target devices.
🔧 Related Tools