Anchor tag basics in HTML - Performance & Optimization

Performance: Anchor tag basics

MEDIUM IMPACT

Anchor tags affect page load speed by triggering navigation and can impact interaction responsiveness when used improperly.

Creating clickable links for navigation

HTML

<a href="/target-page" aria-label="Go to target page">Click me</a>

Using a real href enables browser prefetching and faster navigation; no inline JS blocking rendering.

📈 Performance Gainnon-blocking navigation, faster interaction, better accessibility

Creating clickable links for navigation

HTML

<a href="#" onclick="doSomething(); return false;">Click me</a>

Using href="#" causes the browser to jump to the top and may trigger unnecessary reflows or reloads; inline JavaScript blocks rendering and delays interaction.

📉 Performance Costtriggers 1 reflow and blocks interaction until JS runs

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Anchor with href="#" and inline JS	Minimal DOM nodes	1 reflow on click	Low paint cost	[X] Bad
Anchor with valid href and no inline JS	Minimal DOM nodes	0 reflows on click	Low paint cost	[OK] Good

Rendering Pipeline

Anchor tags with valid hrefs allow the browser to prepare navigation early, improving the critical rendering path. Improper use can cause layout shifts or block interaction.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Interaction Delay

Core Web Vital Affected

INP

Anchor tags affect page load speed by triggering navigation and can impact interaction responsiveness when used improperly.

Optimization Tips

1Always use valid href attributes in anchor tags for better navigation performance.

2Avoid using href="#" as it causes unnecessary page jumps and reflows.

3Do not block rendering with inline JavaScript on anchor tags.

Performance Quiz - 3 Questions

What is a performance downside of using <a href="#"> with inline JavaScript for navigation?

A It improves browser prefetching.

B It reduces the file size of the page.

C It can cause unnecessary page jumps and block interaction.

D It speeds up page load time.

DevTools: Performance

How to check: Record a session while clicking anchor links; look for layout shifts or long tasks blocking interaction.

What to look for: Check for minimal layout recalculations and fast interaction response times.