CSS Performance Optimization
High Performance CSS
Optimize rendering, reduce reflows, GPU acceleration.
Performance Rules
/* Promote to compositing layer */
.card {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Avoid expensive properties */
.no-reflow {
/* Avoid: width/height/margin/padding changes */
/* Prefer: transform/opacity/filter */
}Optimization Checklist
- Use transform/opacity for animations
- contain: layout/style/paint
- will-change: transform (sparingly)
- Critical CSS extraction