Shadow utilities in Bootsrap - Performance & Optimization

Performance: Shadow utilities

MEDIUM IMPACT

Shadow utilities affect the paint and composite stages of page rendering by adding visual depth with shadows.

Adding shadows to multiple elements for visual depth

Bootsrap

<div class="shadow-sm"></div>
<div class="shadow-sm"></div>
<div class="shadow-sm"></div>

Using smaller shadows reduces paint complexity and GPU load, improving rendering speed.

📈 Performance Gainreduces paint and composite cost per element, improving frame rate

Adding shadows to multiple elements for visual depth

Bootsrap

<div class="shadow-lg"></div>
<div class="shadow-lg"></div>
<div class="shadow-lg"></div>

Applying large shadows to many elements triggers multiple paint and composite operations, increasing rendering cost.

📉 Performance Costtriggers multiple paint and composite layers, increasing GPU workload

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large shadows on many elements	Low	0	High paint and composite cost	[X] Bad
Small shadows on few elements	Low	0	Low paint and composite cost	[OK] Good

Rendering Pipeline

Shadow utilities add visual effects that require the browser to calculate styles, paint shadows, and composite layers, impacting rendering performance.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint and Composite stages are most expensive due to shadow rendering.

Core Web Vital Affected

LCP

Shadow utilities affect the paint and composite stages of page rendering by adding visual depth with shadows.

Optimization Tips

1Limit the number of elements with shadows to reduce paint cost.

2Prefer smaller shadows to minimize GPU workload.

3Avoid animating shadows to prevent frame drops.

Performance Quiz - 3 Questions

Which Core Web Vital is most affected by heavy use of shadow utilities?

A Largest Contentful Paint (LCP)

B Interaction to Next Paint (INP)

C Cumulative Layout Shift (CLS)

D First Input Delay (FID)

DevTools: Performance

How to check: Record a performance profile while interacting with the page. Look for long paint or composite events related to shadow styles.

What to look for: High paint or composite times indicate expensive shadow rendering affecting frame rate.