CSS Performance Profiler?

Question

I'm currently working on a site, and somewhere in my mass of stylesheets, something is killing performance in IE. Are there any good CSS profilers out there? I'd like a tool that can pinpoint rules that are killing performance.

Before you ask, I've disabled JavaScript, opacity, and box-shadow/text-shadow rules. The page is still jumpy. :/ If I disable all CSS, it runs great.

I need a tool that can profile the page and report where the CSS bottlenecks are.

Answer 1

So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that border-radius on an element that contains many children (e.g. a body level div) performs incredibly poorly on IE9.

I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css

From there, you can install a bookmarklet to easily run the test on any page.

Answer 2

The Page Speed plugin from Google has a section that analyses your CSS and tells you about inefficient selectors, perhaps start there?

hth

Note: I know its a Firefox plugin, but should help optimize a bit :)