Accordion component in Bootsrap - Performance & Optimization

Performance: Accordion component

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how much content is rendered and how often layout recalculations happen when toggling sections.

Creating an accordion that toggles content sections on user clicks

Bootsrap

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <!-- Content loaded or rendered only when expanded -->
        <img src="large-image.jpg" alt="Large image" loading="lazy">
        <p>Lots of text and media here...</p>
      </div>
    </div>
  </div>
  <!-- More accordion items with lazy loading or conditional rendering -->
</div>

Lazy loads images and defers heavy content rendering until the section is expanded, reducing initial load and memory use.

📈 Performance GainImproves LCP by loading less upfront; reduces reflows on toggle; faster interaction response

Creating an accordion that toggles content sections on user clicks

Bootsrap

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <!-- Large heavy content always rendered -->
        <img src="large-image.jpg" alt="Large image">
        <p>Lots of text and media here...</p>
      </div>
    </div>
  </div>
  <!-- More accordion items with heavy content -->
</div>

All accordion content, including heavy images and text, is loaded and rendered upfront even if hidden, increasing initial load and memory use.

📉 Performance CostBlocks rendering longer on page load; increases LCP; toggling triggers multiple reflows due to large DOM size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Render all content upfront	High (many nodes rendered)	Multiple reflows on toggle	High paint cost due to large content	[X] Bad
Lazy load images and defer content	Lower (only visible nodes rendered)	Single reflow per toggle	Lower paint cost	[OK] Good

Rendering Pipeline

The accordion toggling triggers style recalculation and layout changes when sections expand or collapse. Heavy content inside hidden sections still affects initial paint if rendered upfront.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation and paint when large hidden content is toggled visible

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how much content is rendered and how often layout recalculations happen when toggling sections.

Optimization Tips

1Avoid rendering all accordion content upfront; render only visible sections.

2Use lazy loading for images inside accordion to reduce initial load.

3Minimize DOM size inside hidden sections to reduce layout thrashing on toggle.

Performance Quiz - 3 Questions

What is the main performance issue when all accordion content is rendered upfront?

A It increases initial load time and memory usage

B It improves interaction speed

C It reduces layout recalculations

D It decreases paint cost

DevTools: Performance

How to check: Record a performance profile while toggling accordion sections. Look for layout and paint events triggered on toggle.

What to look for: High layout or paint times indicate heavy DOM or style recalculations; fewer and shorter events mean better performance.