Accordion flush variant in Bootsrap - Performance & Optimization

Performance: Accordion flush variant

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling the amount of DOM nodes and CSS styles applied for accordion components.

Creating an accordion with minimal visual borders and padding for faster rendering

Bootsrap

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        Content here
      </div>
    </div>
  </div>
</div>

Flush variant removes extra borders and padding, reducing paint area and layout complexity.

📈 Performance GainReduces paint cost and layout recalculations, improving LCP by a small but noticeable margin.

Creating an accordion with minimal visual borders and padding for faster rendering

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="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        Content here
      </div>
    </div>
  </div>
</div>

Default accordion adds borders and padding which increase paint area and layout complexity.

📉 Performance CostTriggers multiple paint layers and increases layout complexity, slightly delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default Accordion	Moderate (nested divs and buttons)	1-2 reflows on toggle	Higher paint cost due to borders and padding	[X] Bad
Accordion flush variant	Same DOM nodes	1-2 reflows on toggle	Lower paint cost due to no borders/padding	[OK] Good

Rendering Pipeline

The flush variant reduces the CSS box model complexity by removing borders and padding, which simplifies style calculation and layout stages, leading to faster paint and composite steps.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage is most expensive due to fewer borders and smaller paint areas.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling the amount of DOM nodes and CSS styles applied for accordion components.

Optimization Tips

1Use accordion flush variant to reduce borders and padding for faster paint.

2Simpler CSS box model means less layout and paint work.

3Improving paint cost helps Largest Contentful Paint (LCP) metric.

Performance Quiz - 3 Questions

How does using the accordion flush variant affect page rendering?

A It increases DOM nodes significantly.

B It reduces paint cost by removing borders and padding.

C It adds extra JavaScript for toggling.

D It delays the first contentful paint.

DevTools: Performance

How to check: Record a performance profile while toggling the accordion. Look at the paint and layout events in the flame chart.

What to look for: Lower paint time and fewer layout recalculations indicate better performance with the flush variant.