Performance: Linking to sections using IDs
LOW IMPACT
This affects page load speed slightly by enabling quick navigation and impacts visual stability during jumps.
0
0
Linking to sections using IDs in HTML - Performance & Optimization
Navigating to a section within the same page using anchor links
HTML
<a href="#section1" aria-label="Go to Section 1">Go to Section 1</a> ... <section id="section1" style="min-height: 20rem;">Content</section>
Reserving space prevents layout shifts when jumping to the section, improving visual stability.
📈 Performance GainReduces CLS by preventing unexpected layout changes
Navigating to a section within the same page using anchor links
HTML
<a href="#section1">Go to Section 1</a> ... <section id="section1">Content</section>
If the target section loads late or images above it resize, clicking the link causes layout shifts.
📉 Performance CostTriggers layout shifts causing CLS issues
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Linking to ID without reserved space | Minimal | Multiple if content resizes after scroll | Medium due to repaint after shift | [X] Bad |
| Linking to ID with reserved space | Minimal | Single reflow on load | Low paint cost | [OK] Good |
Rendering Pipeline
When clicking a link with an ID, the browser scrolls to the element with that ID. If the layout changes after scroll, it causes layout shifts.
→Layout
→Paint
→Composite
⚠️ BottleneckLayout (due to reflows from content resizing)
Core Web Vital Affected
CLS
This affects page load speed slightly by enabling quick navigation and impacts visual stability during jumps.
Optimization Tips
1Always reserve vertical space above linked sections to avoid layout shifts.
2Use semantic IDs and anchor links for fast navigation without extra DOM cost.
3Test navigation with DevTools Performance panel to catch layout shifts.
Performance Quiz - 3 Questions
Test your performance knowledge
What performance issue can occur when linking to a section ID without reserving space above it?
DevTools: Performance
How to check: Record a session while clicking an anchor link to a section. Look for layout shifts and reflows after scroll.
What to look for: Check for Layout Shift events and reflow counts in the flame chart to confirm stable navigation.