Close button component in Bootsrap - Performance & Optimization

Performance: Close button component

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by how the close button is implemented and styled.

Creating a close button for modals or alerts

Bootsrap

<button type="button" class="btn-close" aria-label="Close" onclick="closeModal()"></button>

Using a semantic <button> with Bootstrap's built-in class ensures minimal DOM, better accessibility, and optimized styles.

📈 Performance GainSingle reflow on interaction, keyboard accessible, and leverages optimized Bootstrap CSS.

Creating a close button for modals or alerts

Bootsrap

<div onclick="closeModal()" style="cursor:pointer; font-size: 24px;">&times;</div>

Using a <div> with inline styles and onclick causes accessibility issues and may trigger layout recalculations on style changes.

📉 Performance CostTriggers layout recalculation on style changes and blocks keyboard accessibility, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
<div> with inline styles and onclick	Minimal but non-semantic	Triggers reflow on style changes	Moderate due to inline styles	[X] Bad
<button> with Bootstrap btn-close class	Minimal and semantic	Single reflow on interaction	Low due to optimized CSS	[OK] Good

Rendering Pipeline

The close button is parsed as a button element, styled by Bootstrap CSS, and painted on screen. Interaction triggers event listeners without forcing layout recalculations if implemented properly.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage if non-semantic elements or inline styles cause style recalculations on interaction.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by how the close button is implemented and styled.

Optimization Tips

1Always use semantic <button> elements for close buttons.

2Avoid inline styles that can trigger layout recalculations.

3Leverage Bootstrap's built-in btn-close class for optimized styling and accessibility.

Performance Quiz - 3 Questions

Which HTML element is best for a close button to ensure good performance and accessibility?

A <button> with Bootstrap btn-close class

B <div> with onclick and inline styles

C <span> with click handler

D <a href="#" onclick="close()">

DevTools: Performance

How to check: Record a performance profile while clicking the close button and observe the number of layout and paint events triggered.

What to look for: Look for minimal layout recalculations and fast event handling indicating good interaction performance.