CSS Performance Testing Tool

Paste your CSS stylesheet in the text area and hit the "Test My CSS" button. The tool will conduct a series of client-side tests using JavaScript and update the "Metrics" and "Tests" tables with the results below.

Metrics

Indicator Value
CSS stylesheet size (in kilobytes)
Calculates the size (in kilobytes) of the CSS stylesheet.
Total number of CSS rules
Calculates the total number of rules in the CSS stylesheet.
Average CSS rule length
Calculates the average length (in characters) of CSS rules.
Average CSS selector length
Calculates the average length (in characters) of CSS selectors.
Average CSS declaration length
Calculates the average length (in characters) of CSS declarations.

Tests

Test Result
Does your CSS stylesheet need minification?
Tests for the presence of whitespaces except for inside comments. Consider minifying your CSS stylesheet to remove whitespaces and reduce its size.
Does your CSS stylesheet contain media queries?
Consider adding media attributes to the <link> or <style> element itself to make CSS files non-render blocking.
Does your CSS stylesheet contain the universal (*) selector?
The universal selector in CSS is one of the CSS selectors with the poorest performance.
Does your CSS stylesheet contain attribute ([]) selectors?
Attribute selectors are usually slower than their regular counterparts.
Does your CSS stylesheet contain combinator (+, >, ~, ' ', ||) selectors?
Combinator selectors may or may not be slower; benchmark to find out the case for you.
Does your CSS stylesheet contain @import rules?
Using @import rules can slow down your website's loading.
Does your CSS stylesheet contain @font-face rules?
There are performance implications of using custom fonts; consider swapping them out for web-safe fonts or limiting their use to a reasonable minimum.
Does your CSS stylesheet contain CSS variables?
CSS variables may slow down your website, especially if overused with the calc() function.
Does your CSS stylesheet contain !important rules?
Excessive use of the !important rule may signal CSS bloat.
Does your CSS stylesheet contain @keyframe animations?
Animations can be visually appealing, but they can also impact performance if misused.