Relative units in CSS - Performance & Optimization

Performance: Relative units

MEDIUM IMPACT

Relative units affect how CSS scales and adapts during page load and resizing, impacting layout stability and rendering speed.

Setting font sizes and spacing for responsive design

CSS

body { font-size: 1rem; margin: 1.25rem; }

Relative units scale with root font size and user preferences, reducing layout shifts and improving accessibility.

📈 Performance GainReduces reflows on resize and zoom, improving CLS and user experience

Setting font sizes and spacing for responsive design

CSS

body { font-size: 16px; margin: 20px; }

Fixed pixel units do not scale with user settings or viewport changes, causing layout shifts and poor accessibility.

📉 Performance CostCan cause multiple reflows on viewport resize or zoom, increasing CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed px units	Normal	Multiple on resize/zoom	Moderate	[X] Bad
Relative units (rem, em, %)	Normal	Single or none on resize/zoom	Low	[OK] Good

Rendering Pipeline

Relative units are resolved during style calculation and layout stages, allowing the browser to adapt sizes dynamically without triggering extra reflows on viewport changes.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

Relative units affect how CSS scales and adapts during page load and resizing, impacting layout stability and rendering speed.

Optimization Tips

1Use rem or em units for font sizes to respect user preferences and improve accessibility.

2Use % or vw/vh for layout widths and heights to adapt to viewport size changes.

3Avoid fixed px units for spacing and sizing to reduce layout shifts and improve CLS.

Performance Quiz - 3 Questions

Why are relative units like rem and em better for responsive design than fixed px units?

A They scale with user settings and viewport changes, reducing layout shifts.

B They load faster because they are smaller in file size.

C They prevent any reflows from happening.

D They make the page use less memory.

DevTools: Performance

How to check: Record a performance profile while resizing the browser or changing font size. Look for layout shifts and reflows in the summary.

What to look for: Fewer layout recalculations and smaller layout shift scores indicate better use of relative units.