Common HTML mistakes - Performance & Optimization

Performance: Common HTML mistakes

MEDIUM IMPACT

Common HTML mistakes affect page load speed, rendering stability, and user experience by causing unnecessary reflows, layout shifts, or blocking resources.

Structuring content with proper semantic tags

HTML

<header><h1>Title</h1><h2>Subtitle</h2></header>

Semantic tags provide clear structure, improve accessibility, and reduce layout shifts.

📈 Performance Gainreduces CLS and improves rendering predictability

Structuring content with proper semantic tags

HTML

<div><b>Title</b></div><div><i>Subtitle</i></div>

Using generic <div> with styling tags like <b> and <i> instead of semantic tags causes poor accessibility and may trigger layout shifts.

📉 Performance Costcan cause CLS due to unexpected style changes and reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using generic <div> with <b>/<i>	Low	1-2 reflows due to style changes	Medium	[X] Bad
Using semantic <header> and <h1>/<h2>	Low	Single reflow	Low	[OK] Good
Missing alt attribute on <img>	No extra DOM ops	No reflows	No paint cost	[!] OK but accessibility issue
Proper alt attribute on <img>	No extra DOM ops	No reflows	No paint cost	[OK] Good
Invalid nesting <p><div>	Browser reparses DOM	Multiple reflows	High	[X] Bad
Correct nesting <div><p>	Normal DOM ops	Single reflow	Low	[OK] Good

Rendering Pipeline

Common HTML mistakes cause the browser to spend extra time fixing invalid markup during parsing, which delays style calculation and layout, leading to reflows and layout shifts.

→Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to forced reflows from invalid or missing tags

Core Web Vital Affected

CLS

Common HTML mistakes affect page load speed, rendering stability, and user experience by causing unnecessary reflows, layout shifts, or blocking resources.

Optimization Tips

1Always use semantic HTML tags to improve accessibility and reduce layout shifts.

2Ensure all images have descriptive alt attributes to help screen readers and improve INP.

3Avoid invalid nesting of HTML elements to prevent forced reflows and CLS.

Performance Quiz - 3 Questions

Which HTML mistake can cause unexpected layout shifts affecting CLS?

A Using semantic tags like <header>

B Adding alt attributes to images

C Invalid nesting of elements

D Using external CSS files

DevTools: Elements and Performance panels

How to check: Use Elements panel to inspect HTML structure and check for invalid nesting or missing attributes. Use Performance panel to record page load and look for layout shifts or forced reflows.

What to look for: Look for warnings about invalid HTML in Elements panel and layout shift markers or long reflow times in Performance panel.