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

Answer 1

I also have performance problems on a web project I'm currently working on. It runs well in Firefox, Chrome, even IE8. In IE9 it bogs down.

After some detective work I discovered that eliminating all box-shadow CSS lines improved performance considerably. I had shadows from banners, tables, boxes and tabs, each with just a subtle amount of shadow and blur, but apparently enough for IE9 to get all moody.

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 :)

Answer 3

Opera is experimenting with css profiling in its profiler.

It can be enabled following the steps on this page. Then open the profiler, start profiling, and refresh the page you wish to analyze. Stop profiling after rendering finishes, then the results will be shown.

Answer 4

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 5

Hmm, never heard of such a tool.

If you find none, things to look out for manually will include

• Any filter statements (the classic alpha=opacity and others - IE has a number of very advanced graphical filters that are extremely expensive)

• Huge elements (like thousands of pixels large)

• Huge background images - maybe remove them all for a moment?

I would strongly suspect the first point - alpha transparencies can be a terrible rendering bottleneck, especially on older systems.

Answer 6

The Chrome dev tools used to contain a CSS Selector Profiler for doing just this sort of thing. You can see screen shots of it in this blog post.

The Chrome team pulled the feature in Chrome 30 stating that:

CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline "Recalculate Style" event.

As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.

You could try to use an old version of Chrome to dig into the issue, but I'd recommend taking a look at the Timeline tab of the current version of Chrome dev tools with will show you how long Chrome has taken to calculate styles (where selector performance is affected), layout and paint the page.