Performance: Viewport units
MEDIUM IMPACT
Viewport units affect the layout and sizing of elements relative to the browser window size, impacting rendering and layout recalculations on resize.
0
0
Viewport units in CSS - Performance & Optimization
Sizing elements responsively to viewport size
CSS
div { height: 100dvh; } /* dynamic viewport height */100dvh accounts for dynamic viewport changes, reducing layout shifts and reflows on mobile.
📈 Performance Gainreduces reflows and CLS by stabilizing height during viewport changes
Sizing elements responsively to viewport size
CSS
div { height: 100vh; } /* full viewport height */100vh can cause layout shifts on mobile browsers when address bars show/hide, triggering reflows and CLS.
📉 Performance Costtriggers multiple reflows on viewport resize, causing noticeable layout shifts
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Using 100vh for height | Minimal | Multiple on resize | Medium | [X] Bad |
| Using 100dvh for height | Minimal | Single or none on resize | Low | [OK] Good |
Rendering Pipeline
Viewport units are calculated during style calculation and layout stages. Changes in viewport size cause recalculation of styles and layout, triggering reflows and repaints.
→Style Calculation
→Layout
→Paint
⚠️ BottleneckLayout (reflow) due to viewport size changes affecting element dimensions
Core Web Vital Affected
CLS
Viewport units affect the layout and sizing of elements relative to the browser window size, impacting rendering and layout recalculations on resize.
Optimization Tips
1Avoid using 100vh on mobile to prevent layout shifts.
2Use dynamic viewport units like 100dvh for better visual stability.
3Test viewport unit usage by resizing browser and checking for reflows.
Performance Quiz - 3 Questions
Test your performance knowledge
Which viewport unit helps reduce layout shifts on mobile browsers?
DevTools: Performance
How to check: Record a performance profile while resizing the browser window and observe layout and paint events.
What to look for: Look for frequent layout (reflow) events and layout shift markers indicating CLS issues.