Reducing compiled CSS size in SASS - Performance & Optimization

Performance: Reducing compiled CSS size

MEDIUM IMPACT

This affects page load speed by reducing CSS file size and parsing time, improving Largest Contentful Paint (LCP).

Writing CSS with Sass to style a website efficiently

SASS

$primary-color: #3498db;

.common-text {
  color: $primary-color;
}

.button, .card, .alert {
  @extend .common-text;
}

Using @extend shares common styles, reducing repeated CSS declarations and shrinking the compiled CSS size.

📈 Performance GainSaves kilobytes in CSS file size, reduces parsing time, and speeds up initial render.

Writing CSS with Sass to style a website efficiently

SASS

$primary-color: #3498db;

.button {
  color: $primary-color;
}

.card {
  color: $primary-color;
}

.alert {
  color: $primary-color;
}

Repeating the same property with the same value in multiple selectors generates redundant CSS rules, increasing file size.

📉 Performance CostAdds unnecessary kilobytes to CSS bundle, increasing load time and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated CSS properties	No extra DOM nodes	No extra reflows	Higher paint cost due to larger CSS	[X] Bad
Shared styles with @extend	No extra DOM nodes	No extra reflows	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

Smaller CSS files reduce the time browser spends downloading, parsing, and applying styles, speeding up the critical rendering path.

→Network

→Style Calculation

→Layout

⚠️ BottleneckNetwork and Style Calculation stages are most impacted by large CSS files.

Core Web Vital Affected

LCP

This affects page load speed by reducing CSS file size and parsing time, improving Largest Contentful Paint (LCP).

Optimization Tips

1Avoid repeating identical CSS declarations across selectors.

2Use Sass @extend to share common styles and reduce duplication.

3Remove unused CSS to keep the compiled file small.

Performance Quiz - 3 Questions

How does reducing compiled CSS size affect page load?

A It increases the number of DOM nodes.

B It decreases CSS download and parsing time, improving load speed.

C It causes more layout reflows.

D It has no effect on performance.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check file sizes and load times.

What to look for: Look for smaller CSS file sizes and faster load times indicating optimized compiled CSS.