Pagination component in Bootsrap - Performance & Optimization

Performance: Pagination component

MEDIUM IMPACT

Pagination affects page load speed and interaction responsiveness by controlling how much content is rendered and how often the DOM updates.

Displaying many items with pagination

Bootsrap

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item disabled"><span class="page-link">...</span></li>
  <li class="page-item"><a class="page-link" href="#">10</a></li>
</ul>

Render only a few page links with ellipsis to reduce DOM size and improve responsiveness.

📈 Performance GainSingle reflow on update; faster interaction and less paint work.

Displaying many items with pagination

Bootsrap

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <!-- Many more page items rendered at once -->
</ul>

Rendering all page links at once creates a large DOM and slows down interaction and rendering.

📉 Performance CostTriggers multiple reflows and repaints; slows interaction responsiveness (INP).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Render all page links at once	High (many nodes)	Multiple per update	High (many elements)	[X] Bad
Render limited page links with ellipsis	Low (few nodes)	Single per update	Low (few elements)	[OK] Good
Re-render entire pagination on click	High (many nodes updated)	Multiple per click	High	[X] Bad
Update only changed page item on click	Low (few nodes updated)	Single per click	Low	[OK] Good

Rendering Pipeline

Pagination updates affect the Layout and Paint stages because changing active page links modifies element styles and positions.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating positions of pagination items.

Core Web Vital Affected

INP

Pagination affects page load speed and interaction responsiveness by controlling how much content is rendered and how often the DOM updates.

Optimization Tips

1Render only visible or a few pagination links to keep DOM small.

2Use event delegation and update only changed elements on user interaction.

3Avoid re-rendering the entire pagination component on every click.

Performance Quiz - 3 Questions

What is the main performance problem when rendering all pagination links at once?

A Large DOM size causing slow rendering and interaction

B Too few DOM nodes causing layout issues

C No impact on performance

D Improves page load speed

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while clicking pagination links > Stop and analyze reflows and paints.

What to look for: Look for long Layout or Paint tasks during pagination interaction indicating heavy DOM updates.