Layout Optimization
Layout affects performance because the browser must calculate styles, layout, and paint before it can display content and respond to input. A layout that is stable and simple is usually faster to render and easier to keep fast over time.
How Layout Shows Up in Core Web Vitals
| Layout Choice | Typical Risk | Metrics Affected |
|---|---|---|
| Deep wrapper nesting | More style/layout work; bigger DOM | INP, LCP (indirect) |
| Late-injected header bars/banners | Content jumps | CLS |
| Missing media dimensions | Layout expands after load | CLS |
| Layout-driven animations (top/left/height) | Reflows during scroll/tap | INP, CLS |
| Large, global CSS bundles | Longer critical path | LCP, FCP |
Recommended Layout Practices
- Keep above-the-fold structure shallow (avoid nested rows/columns).
- Prefer native CSS Grid/Flexbox over JS-driven layout.
- Reserve space for images/iframes/ads using dimensions or
aspect-ratio. - Use a spacing scale (tokens) instead of per-block inline spacing.
- Animate with
transformandopacitywhen you need motion.
Example spacing tokens:
spacing-tokens.css
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
}
Audit Workflow
- DevTools -> Elements: sanity check wrapper depth in the hero/header.
- DevTools -> Performance: record a page load and look for long "Recalculate Style" / "Layout" work.
- DevTools -> Rendering: enable "Layout Shift Regions" and reload.
- DevTools -> Coverage: identify large CSS that isn't used on the tested template.
Common Pitfalls
- Using different header heights per breakpoint without reserving space.
- Multiple "layout variants" hidden/shown via JS for mobile vs desktop.
- Sticky UI that changes height after load.
- Adding a cookie banner or promo bar above the header without a reserved slot.