CSS selector costs

Connor Clark

Published: Oct 8, 2025

If recalculate style costs remain high, selector optimization can reduce them. Optimize the selectors with both high elapsed time and high slow-path percentages. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.

How to pass this insight

This insight always passes, but may still show for informational purposes.

It only appears in the DevTools Performance panel when the setting Enable CSS selector stats (slow) is on.

Additional references

• Insight source code
• Analyze CSS selector performance during Recalculate Style events
• Reduce the scope and complexity of style calculations