Tools to measure the effect of individual CSS rules on page rendering speed? [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 7 years ago.

I saw that LinkedIn's new HTML5 iPad App got rid of rounded borders, i.e., border-radius:X px, to improve their page rendering speed. This seems like it could only provide a minor improvement. I'm wondering more generally how to measure the effect of various CSS rules on a website's performance. Is there a microtime() for CSS?

Update I ran the performance test suggested by @valentinas: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

While this does provides measurements for my page's classes, i'm more interested in comparing rule1 vs. rule2 for a given element. Still, below is the data. My site uses Twitter Bootstrap.css and many of its class selectors. Here's a snapshot of the data which I find hard to interpret. Might someone help with this as a starting point?

....
Selector          # Elms.  # Child.     Delta   Total
Removing #back-top  1   2   saves   7.17ms  3.90ms
Removing .container-fluid   1   414 saves   7.15ms  3.93ms
Removing .oGreen    1   0   saves   7.14ms  3.94ms
Removing .row-fluid 2   316 saves   7.07ms  4.00ms
Selectors Tested:   128
Baseline Time:  11.08ms
Num. Tests: 120

Answer 1

There are a number of tools available to test the actual performance implications of loading and applying CSS. That said, with the things you specifically mentioned, they are particularly difficult to test.

Experienced CSS developers will have come across studies showing that rounded corers and CSS3 box-shadows can cause 'performance issues', but in this context they are more specifically talking about page responsiveness or how quickly the page responds to user actions.

Let me explain that in more detail. When talking about how fast a page renders or how long it takes for CSS and image assets to download and be available to the client, there are clear metrics that many different tools can provide. HTTP request and response times are measurable, as is the time from initial request to DOM ready. The problem is that all of these easily measurable things have already happened when you start looking at page responsiveness. Those issues will be related to your specific applications features, functionality and styling and can only be tested in an application specific way.

As an example, there are studies that have shown that in certain contexts, CSS3 box-shadows can cause non-smooth scrolling on a page or some lag time between user action and event completion. The easiest way to test this would be to manually test the page with and without the box-shadow so that you can visually see the difference. Now, if you know that box-shadow is known to cause certain issues, this might be something you would think to test, but for the people that have published their studies and findings on that particular issue, this is almost certainly not what they looked at first. It was something they discovered through trial and error.

In the end, the real answer is experience: having worked through issues and adding to your own collective knowledge. Reading blogs and other resources that discuss these issues can help with that.