CSS affects how fast a page renders and how smoothly it runs. Most performance wins are simple habits. Let us cover the ones with the biggest impact.
Animate the cheap properties
The single biggest runtime win: animate only <code>transform</code> and <code>opacity</code>. They skip layout and paint and run on the GPU. Animating <code>width</code>, <code>height</code>, <code>top</code> or <code>margin</code> forces the browser to recalculate layout every frame — the cause of most janky animations.
- width / height
- top / left / margin
- Triggers layout + paint
- Drops frames
- transform
- opacity
- GPU-composited
- Stays at 60fps
Selectors are rarely the bottleneck
Modern browsers match selectors extremely fast, so do not obsess over selector micro-optimisation. Keeping selectors simple matters far more for maintainability than speed. The real costs are layout, paint and the amount of CSS shipped.
Ship less CSS
Unused CSS still has to download and parse. Remove dead rules, avoid huge frameworks when you use 5% of them, and consider critical CSS — inlining the small amount needed for above-the-fold content so the page renders before the full stylesheet loads.
content-visibility
The <code>content-visibility: auto</code> property lets the browser skip rendering off-screen content until it is needed, dramatically speeding up long pages. Pair it with <code>contain-intrinsic-size</code> to reserve space and avoid scroll jumps.
.section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}/* 300KB framework for one button *//* a few KB of the components you actually use */Shipping a giant CSS framework and using a fraction of it, bloating download and parse time. Use only what you need or purge the unused parts.
Animate transform/opacity only, keep selectors simple for readability, remove unused CSS, inline critical CSS for fast first paint, and use content-visibility on long pages. Measure with DevTools rather than guessing.
Take an animation that moves an element with top/left and rewrite it to use transform. Then add content-visibility: auto with contain-intrinsic-size to a long section.
1. Cheapest properties to animate?
2. What does content-visibility: auto do?
3. Biggest CSS download cost?
- Animate only transform and opacity for smooth 60fps motion.
- Selectors are rarely the bottleneck — layout, paint and CSS size are.
- Ship less CSS: remove dead rules, inline critical CSS.
- content-visibility: auto speeds up long pages.