Text decoration in CSS - Performance & Optimization

Performance: Text decoration

LOW IMPACT

Text decoration affects the paint and composite stages of rendering, impacting how quickly styled text appears and updates on screen.

Applying underline style to text

CSS

p { text-decoration: underline solid black; }

Simple solid underline uses less paint and compositing resources.

📈 Performance Gainreduces paint and composite cost by ~50%

Applying underline style to text

CSS

p { text-decoration: underline wavy red; }

Complex text-decoration styles like wavy lines trigger more paint and compositing work.

📉 Performance Costtriggers 1 extra paint and composite per element

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
text-decoration: underline solid	none	none	low paint cost	[OK] Good
text-decoration: underline wavy	none	none	higher paint cost	[X] Bad

Rendering Pipeline

Text decoration styles are applied during style calculation and affect paint and composite stages. Complex decorations increase paint area and compositing layers.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint

Core Web Vital Affected

CLS

Text decoration affects the paint and composite stages of rendering, impacting how quickly styled text appears and updates on screen.

Optimization Tips

1Prefer simple text-decoration styles like solid underline for better paint performance.

2Avoid animating text-decoration properties to reduce paint and composite overhead.

3Use browser DevTools Performance panel to monitor paint and composite costs of text styles.

Performance Quiz - 3 Questions

Which text-decoration style generally causes less paint work?

A Double underline

B Wavy underline

C Solid underline

D Dotted underline

DevTools: Performance

How to check: Record a performance profile while interacting with text that has decoration. Look for paint and composite events in the flame chart.

What to look for: High paint or composite times indicate costly text-decoration styles.