intermediate

CSS performance

Critical CSS, style recalculation, layout thrashing, paint cost, compositing, and render-blocking resources.

CSS performance interviews connect stylesheet delivery to user-perceived speed: critical path CSS, render-blocking resources, layout thrashing from JavaScript, and the browser rendering pipeline.

Subtopics: critical CSS, layout thrashing, and repaints versus reflows.

On interviews: describe how CSS affects LCP, what forced synchronous layout means, and which property changes stay on the compositor.

Common pitfalls: inlining entire stylesheets, read-write loops in animation code, and animating width or top without profiling.

Checklist:

Measure render blocking before optimizing.
Batch DOM reads and writes.
Prefer transform and opacity for motion.
Profile pipeline phases in DevTools.