CSS Modules support in Astro - Performance & Optimization

Performance: CSS Modules support

MEDIUM IMPACT

This affects page load speed by controlling CSS scope and bundle size, impacting render blocking and style recalculation.

Applying styles scoped to components without global conflicts

Astro

import styles from './Button.module.css';

<div className={styles.primary}>Click me</div>

CSS Modules load only styles used by the component, reducing CSS size and avoiding global style recalculations.

📈 Performance GainSaves 30-70kb CSS, reduces render-blocking CSS, limits style recalculation to scoped elements

Applying styles scoped to components without global conflicts

Astro

/* global.css loaded everywhere */
import './global.css';

<div class="button primary">Click me</div>

Global CSS loads all styles on every page, increasing bundle size and causing unnecessary style recalculations.

📉 Performance CostAdds 50-100kb to CSS bundle, blocks rendering until CSS loads, triggers style recalculation for all elements

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Global CSS	N/A	Multiple reflows on style changes	High paint cost due to large CSS	[X] Bad
CSS Modules	Scoped to component nodes	Single reflow limited to component	Lower paint cost with smaller CSS	[OK] Good

Rendering Pipeline

CSS Modules generate scoped CSS classes that the browser applies only to relevant elements, reducing style recalculation and repaint.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large global CSS

Core Web Vital Affected

LCP

This affects page load speed by controlling CSS scope and bundle size, impacting render blocking and style recalculation.

Optimization Tips

1Scope CSS to components to reduce unused styles and bundle size.

2Avoid large global CSS files that block rendering and cause style recalculations.

3Use CSS Modules to limit style recalculation and improve Largest Contentful Paint.

Performance Quiz - 3 Questions

How does CSS Modules support improve page load performance compared to global CSS?

A By loading all CSS globally to avoid multiple requests

B By scoping CSS to components, reducing unused styles and render-blocking CSS

C By increasing CSS bundle size for better caching

D By disabling CSS animations to reduce paint cost

DevTools: Performance

How to check: Record a page load and interaction; look for style recalculation and layout shifts in the flame chart.

What to look for: Lower style recalculation time and fewer layout shifts indicate better CSS scoping and performance.