Print stylesheet organization in SASS - Performance & Optimization

Performance: Print stylesheet organization

MEDIUM IMPACT

This affects page load speed and rendering performance when users print a page or use print preview.

Applying print styles in a way that impacts screen rendering performance

SASS

@import 'screen-styles';

// separate print stylesheet loaded only for print
/* <link rel="stylesheet" href="print.css" media="print"> */

Separates print styles into their own file loaded only when printing, reducing CSS parsing and render-blocking on screen.

📈 Performance GainNon-blocking for screen rendering; saves 10-20% CSS parsing time on page load

Applying print styles in a way that impacts screen rendering performance

SASS

@import 'print-styles';

// print styles included in main stylesheet
body {
  font-size: 1rem;
}
@media print {
  body {
    font-size: 0.8rem;
    color: black;
  }
}

Including print styles directly in the main stylesheet causes the browser to parse and apply them even when not printing, increasing CSS size and blocking rendering.

📉 Performance CostBlocks rendering for extra CSS parsing; increases CSS size by 10-20% unnecessarily

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Print styles inline in main CSS	No extra DOM nodes	Triggers 1 reflow on load	Increases paint cost due to larger CSS	[X] Bad
Separate print stylesheet with media="print"	No extra DOM nodes	No reflow on screen load	Paint cost only when printing	[OK] Good

Rendering Pipeline

When print styles are included inline or in the main CSS, the browser must parse and apply them during initial style calculation, increasing render-blocking time. Separating print styles delays their loading until print media is active, reducing initial style calculation and layout time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS and unnecessary parsing

Core Web Vital Affected

LCP

This affects page load speed and rendering performance when users print a page or use print preview.

Optimization Tips

1Keep print styles in a separate CSS file with media="print" attribute.

2Avoid mixing print styles with screen styles in the main stylesheet.

3Load print styles only when printing to reduce initial CSS parsing and render-blocking.

Performance Quiz - 3 Questions

What is the main performance benefit of using a separate print stylesheet with media="print"?

A It makes print styles load faster on screen.

B It delays loading and parsing print styles until printing, reducing initial render-blocking.

C It reduces the number of DOM nodes on the page.

D It improves JavaScript execution speed.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, check the Priority column for print stylesheet.

What to look for: Print stylesheet loads on initial page load with media="print" but Priority should be 'Low'; this confirms non-blocking behavior.