Vendor prefix mixin patterns in SASS - Performance & Optimization

Performance: Vendor prefix mixin patterns

MEDIUM IMPACT

This affects CSS file size and rendering speed by controlling how many vendor-prefixed properties are generated and applied.

Adding vendor prefixes for CSS properties using mixins

SASS

@mixin box-shadow($value) {
  box-shadow: $value;
}

.element {
  @include box-shadow(2px 2px 5px #000);
}

Only outputs standard property, reducing CSS size and avoiding redundant style recalculations.

📈 Performance GainSaves ~1-2kb CSS, reduces style recalculations, improves LCP by a few milliseconds.

Adding vendor prefixes for CSS properties using mixins

SASS

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

.element {
  @include box-shadow(2px 2px 5px #000);
}

Generates unnecessary vendor prefixes for browsers that no longer need them, increasing CSS size and blocking rendering longer.

📉 Performance CostAdds ~1-2kb extra CSS, slightly delays LCP due to larger CSS file and more style recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Mixin with all vendor prefixes	No extra DOM nodes	Triggers 1 reflow per style recalculation	Higher paint cost due to larger CSS	[X] Bad
Mixin with only standard property	No extra DOM nodes	Single reflow	Lower paint cost with smaller CSS	[OK] Good

Rendering Pipeline

Vendor prefix mixins affect the CSS parsing and style calculation stages by increasing the number of CSS rules the browser must process.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to increased CSS rules from redundant prefixes

Core Web Vital Affected

LCP

This affects CSS file size and rendering speed by controlling how many vendor-prefixed properties are generated and applied.

Optimization Tips

1Avoid adding unnecessary vendor prefixes in mixins.

2Target only browsers that require prefixes to reduce CSS size.

3Smaller CSS files improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is the main performance downside of using vendor prefix mixins that add all possible prefixes?

A Increased CSS file size and slower style calculation

B More DOM nodes created

C JavaScript execution slows down

D Images take longer to load

DevTools: Performance

How to check: Record a performance profile while loading the page. Look at the 'Style Recalculation' and 'Layout' timings.

What to look for: Longer style recalculation times and larger CSS file sizes indicate excessive vendor prefixes.