List group with badges in Bootsrap - Performance & Optimization

Performance: List group with badges

MEDIUM IMPACT

This affects the rendering speed and visual stability of list components with badges in the browser.

Displaying a list of items with numeric badges indicating counts

Bootsrap

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">99+</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">1000</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tasks
    <span class="badge bg-primary rounded-pill" style="min-width:2.5rem; text-align:center;">5</span>
  </li>
</ul>

Fixing badge minimum width and using flex layout prevents layout shifts and keeps badges aligned.

📈 Performance GainReduces CLS by preventing reflows caused by varying badge widths.

Displaying a list of items with numeric badges indicating counts

Bootsrap

<ul class="list-group">
  <li class="list-group-item">Messages <span class="badge bg-primary">99+</span></li>
  <li class="list-group-item">Notifications <span class="badge bg-primary">1000</span></li>
  <li class="list-group-item">Tasks <span class="badge bg-primary">5</span></li>
</ul>

Badge widths vary because numbers have different digit lengths, causing layout shifts and reflows when content changes.

📉 Performance CostTriggers multiple reflows and layout shifts (CLS) when badge content changes size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Variable width badges inside list items	Low (few nodes)	Multiple reflows on badge content change	Medium due to layout shifts	[X] Bad
Fixed width badges with flexbox layout	Low (few nodes)	Single reflow on initial render	Low paint cost due to stable layout	[OK] Good

Rendering Pipeline

The browser calculates styles, then layouts the list items and badges. Variable badge widths cause layout recalculations and repaints, increasing rendering cost.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to dynamic badge width changes causing reflows.

Core Web Vital Affected

CLS

This affects the rendering speed and visual stability of list components with badges in the browser.

Optimization Tips

1Use fixed or minimum widths for badges to prevent layout shifts.

2Use flexbox to align list items and badges horizontally.

3Avoid dynamic content changes that alter badge size without reserving space.

Performance Quiz - 3 Questions

What causes layout shifts when using badges in a list group?

A Badges with variable widths due to different content sizes

B Using flexbox for layout

C Setting fixed minimum width on badges

D Using semantic HTML elements

DevTools: Performance

How to check: Record a performance profile while interacting with the list or loading the page. Look for Layout and Recalculate Style events.

What to look for: High number of Layout events or Layout Shifts in the summary indicates unstable badge sizing causing CLS.