Ordered lists in HTML - Performance & Optimization

Performance: Ordered lists

LOW IMPACT

Ordered lists affect the browser's rendering speed by adding structured list elements that require layout and paint operations.

Displaying a numbered list of items with minimal layout shifts

HTML

<ol><li>Item 1</li><li>Item 2</li></ol>

Using native HTML ordered lists leverages browser optimizations for numbering and layout.

📈 Performance Gainsingle layout pass with stable numbering, minimal reflows

Displaying a numbered list of items with minimal layout shifts

HTML

<ol style="list-style: none; counter-reset: item 0;"><li style="counter-increment: item;">Item 1</li><li style="counter-increment: item;">Item 2</li></ol>

Using CSS counters with complex styles on each list item triggers multiple style recalculations and can cause layout shifts.

📉 Performance Costtriggers multiple reflows and layout recalculations per list item

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Native <ol> with <li>	Minimal DOM nodes	Single reflow for list	Low paint cost	[OK] Good
<ol> with CSS counters on each <li>	More style recalculations	Multiple reflows per item	Higher paint cost	[X] Bad

Rendering Pipeline

The browser parses the ordered list HTML, calculates styles including list numbering, performs layout to position list items, paints the content, and composites layers for display.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to numbering and item positioning

Core Web Vital Affected

CLS

Ordered lists affect the browser's rendering speed by adding structured list elements that require layout and paint operations.

Optimization Tips

1Use native <ol> and <li> elements for ordered lists.

2Avoid complex CSS counters or JavaScript numbering for list items.

3Keep list styling simple to prevent layout shifts and reflows.

Performance Quiz - 3 Questions

Which ordered list pattern causes fewer layout recalculations?

A Using <div> elements styled as lists

B Using <ol> with CSS counters on each list item

C Using native <ol> and <li> elements

D Using JavaScript to number list items dynamically

DevTools: Performance

How to check: Record a performance profile while loading the page with the ordered list. Look for layout and style recalculation events related to list items.

What to look for: Check for minimal layout thrashing and stable layout timings indicating efficient ordered list rendering.