Sticky header and footer in Tailwind - Performance & Optimization

Performance: Sticky header and footer

MEDIUM IMPACT

Sticky headers and footers affect page rendering and scrolling performance by keeping elements fixed during scroll.

Keeping header and footer visible during page scroll

Tailwind

<header class="sticky top-0 bg-gray-800 h-16"></header>
<footer class="sticky bottom-0 bg-gray-800 h-16"></footer>

Sticky positioning keeps elements in flow until scroll reaches them, reducing layout thrashing and paint cost.

📈 Performance GainSingle reflow on initial layout, smoother scroll with fewer repaints.

Keeping header and footer visible during page scroll

Tailwind

<header class="fixed top-0 left-0 w-full h-16 bg-gray-800"></header>
<footer class="fixed bottom-0 left-0 w-full h-16 bg-gray-800"></footer>

Using fixed positioning removes elements from normal flow causing potential layout shifts and more paint work on scroll.

📉 Performance CostTriggers multiple reflows and repaints on scroll, increasing CPU usage and reducing scroll smoothness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed header/footer	Low (2 nodes)	Multiple on scroll	High due to repaint on scroll	[X] Bad
Sticky header/footer	Low (2 nodes)	Single on layout	Low repaint cost on scroll	[OK] Good

Rendering Pipeline

Sticky headers and footers affect the Layout and Paint stages by fixing elements during scroll without removing them from flow.

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage due to frequent repaints when fixed elements overlap content during scroll.

Core Web Vital Affected

INP

Sticky headers and footers affect page rendering and scrolling performance by keeping elements fixed during scroll.

Optimization Tips

1Use position sticky for headers and footers to reduce repaints during scroll.

2Avoid fixed positioning for sticky UI elements to minimize layout shifts and CPU usage.

3Test scroll performance in DevTools to identify costly repaints caused by fixed elements.

Performance Quiz - 3 Questions

Which CSS positioning method generally causes fewer repaints during page scroll for headers?

A position: fixed

B position: sticky

C position: absolute

D position: relative

DevTools: Performance

How to check: Record a scroll session and observe the Main thread activity for Layout and Paint events related to header/footer.

What to look for: Look for repeated Layout and Paint events during scroll indicating costly repaints from fixed elements.