Senior engineers do not guess about performance — they measure. A CSS audit finds what is slow or wasteful and turns it into concrete improvements. Here is how to run one.
Measure unused CSS
Browser coverage tools report how much of each stylesheet is actually used on a page. High unused percentages mean wasted download and parse time. Confirm findings with code search before removing — dynamically added classes can appear "unused" but are not.
Find render-blocking CSS
CSS in the document head blocks rendering until it loads — that is intentional, but a large stylesheet delays first paint. The fix is critical CSS: inline the small amount needed for above-the-fold content and load the rest asynchronously, so the page appears fast.
Measure runtime cost
The performance panel shows time spent in layout, paint and composite. Expensive animations (animating layout properties) and large repaints show up here. The fixes are the ones from the performance lesson: animate transform/opacity, use content-visibility, reduce paint areas.
Set a budget
A performance budget makes quality measurable: e.g. "CSS under 60KB compressed", "no layout-animating transitions", "first paint under 1.5s". Budgets turn vague "make it fast" into checkable criteria the whole team can hold.
/* rewrite selectors hoping it is faster *//* profile → find the real cost → fix → re-measure */Optimising by feel without measuring, so effort goes to things that do not matter while real costs are missed. Always profile before and after.
Audit with data: measure unused CSS, inline critical CSS for fast first paint, profile runtime layout/paint, and enforce a performance budget. Optimise what the numbers show, not what you assume.
Open the Coverage tool in your browser DevTools and record a page load to see how much CSS is unused. Then open the Performance panel and identify time spent in layout and paint.
1. What reports unused CSS?
2. What speeds up first paint for big stylesheets?
3. What makes "make it fast" checkable?
- Measure, do not guess — coverage and performance tools show real costs.
- Inline critical CSS and load the rest async for fast first paint.
- Profile layout/paint; fix by animating transform/opacity etc.
- Set a performance budget to make speed measurable.