0
0
CSSmarkup~8 mins

Absolute units in CSS - Performance & Optimization

Choose your learning style9 modes available
Performance: Absolute units
MEDIUM IMPACT
Absolute units affect page rendering speed by fixing element sizes, which can cause layout shifts on different screen sizes and resolutions.
Setting font size for responsive text
CSS
body { font-size: 1rem; }
Relative units scale with user preferences and viewport, reducing layout shifts and improving accessibility.
📈 Performance GainImproves CLS by reducing layout shifts on zoom and device changes
Setting font size for responsive text
CSS
body { font-size: 16px; }
Pixels fix size regardless of user settings or screen size, causing poor scaling and possible layout shifts on zoom or different devices.
📉 Performance CostCan cause layout shifts (CLS) on zoom or device changes
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Using px for sizesMinimalCan trigger reflows on zoom or device changeModerate[X] Bad
Using rem/em for sizesMinimalFewer reflows due to flexible sizingLower[OK] Good
Rendering Pipeline
Absolute units fix element sizes early in style calculation, which can cause layout recalculations if the viewport or user settings change, triggering layout and paint stages again.
Style Calculation
Layout
Paint
⚠️ BottleneckLayout
Core Web Vital Affected
CLS
Absolute units affect page rendering speed by fixing element sizes, which can cause layout shifts on different screen sizes and resolutions.
Optimization Tips
1Avoid absolute units like px, cm, or in for layout and font sizes to reduce layout shifts.
2Use relative units (rem, em, %) for flexible, responsive sizing that adapts to user settings.
3Test your design by zooming and resizing to check for layout stability and avoid CLS issues.
Performance Quiz - 3 Questions
Test your performance knowledge
Which unit is more likely to cause layout shifts when users zoom the page?
Arem
Bem
Cpx (pixels)
D%
DevTools: Performance
How to check: Record a performance profile while resizing or zooming the page to see layout recalculations and paints.
What to look for: Look for frequent Layout and Recalculate Style events indicating layout shifts caused by fixed sizes.