Small and compact tables in Bootsrap - Performance & Optimization

Performance: Small and compact tables

MEDIUM IMPACT

This affects page load speed and rendering performance by reducing DOM size and paint area for tables.

Displaying tabular data with minimal space and fast rendering

Bootsrap

<table class="table table-sm">
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
  </tbody>
</table>

Using the .table-sm class reduces padding and spacing, making the table smaller and faster to render.

📈 Performance GainReduces paint area and layout size, improving LCP by rendering fewer pixels.

Displaying tabular data with minimal space and fast rendering

Bootsrap

<table class="table">
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
  </tbody>
</table>

Default Bootstrap tables have larger padding and spacing, increasing table size and paint area.

📉 Performance CostTriggers larger paint area and more pixels to render, increasing LCP time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default Bootstrap table	Minimal	1 per table render	High due to large padding	[X] Bad
Bootstrap table with .table-sm	Minimal	1 per table render	Lower due to reduced padding	[OK] Good

Rendering Pipeline

The browser calculates styles, then layouts the table cells. Smaller padding reduces layout size and paint area, speeding up paint and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage is most expensive due to large pixel area of default tables.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by reducing DOM size and paint area for tables.

Optimization Tips

1Use .table-sm to reduce padding and spacing in Bootstrap tables.

2Smaller tables reduce paint area, speeding up rendering.

3Compact tables improve Largest Contentful Paint (LCP) by loading main content faster.

Performance Quiz - 3 Questions

What is the main performance benefit of using Bootstrap's .table-sm class?

A Increases font size for readability

B Adds animations to table rows

C Reduces table padding and spacing, decreasing paint area

D Loads table data asynchronously

DevTools: Performance

How to check: Record a performance profile while loading the page with the table. Look at the 'Paint' and 'Layout' events in the flame chart.

What to look for: Smaller paint rectangles and shorter layout times indicate better performance with compact tables.