Performance: Hidden and visibility control
MEDIUM IMPACT
Controls how elements appear or disappear on the page, affecting rendering and layout stability.
0
0
Hidden and visibility control in Tailwind - Performance & Optimization
Hiding elements without causing layout shifts
Tailwind
<div class="invisible">Content</div>Keeps element in layout but hides it visually, preventing layout shifts.
📈 Performance GainNo reflow triggered, reduces CLS impact
Hiding elements without causing layout shifts
Tailwind
<div class="hidden">Content</div>Using 'hidden' removes the element from layout, causing reflow and layout shifts.
📉 Performance CostTriggers 1 reflow and can cause CLS if layout changes visibly
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| hidden (display:none) | Element removed from layout | Triggers 1 reflow | Paint cost reduced (not painted) | [X] Bad |
| invisible (visibility:hidden) | Element remains in layout | No reflow | Paint cost for invisible element | [OK] Good |
Rendering Pipeline
Visibility control affects the Layout and Paint stages by changing element presence or visibility, impacting reflows and repaints.
→Layout
→Paint
→Composite
⚠️ BottleneckLayout (reflow) when elements are removed or added
Core Web Vital Affected
CLS
Controls how elements appear or disappear on the page, affecting rendering and layout stability.
Optimization Tips
1Avoid using 'hidden' if you want to prevent layout shifts.
2Use 'invisible' to hide elements while preserving layout space.
3Use 'sr-only' for accessibility without visual impact or layout changes.
Performance Quiz - 3 Questions
Test your performance knowledge
Which Tailwind class hides an element without causing layout shifts?
DevTools: Performance
How to check: Record a performance profile while toggling visibility classes; look for layout shifts and reflows in the summary.
What to look for: Check for Layout events and CLS score spikes indicating layout shifts caused by hiding/showing elements.