3

Are there any tools out there that can find out what CSS is slowing down a page? I had the luck of someone answering a question for me on removing the CSS below which increased the speed of my site drastically. I'd like to find out what else could be causing issues. I'd like to paste my CSS and have some type of performance validator show what lines could cause issues. 

.ui-widget :active {
    outline: none
}
Community
  • 1
  • 1
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341
  • 2
    Box/text shadows, animations, transitions, opacity, rgba colors. – dfsq Nov 15 '13 at 19:54
  • 1
    It looks like your previous experience with removing the CSS was more about a bug in the Javascript. To be honest, this is a very rare occurrence and unless you are still have performance issues with your site, I wouldn't worry about it. Even if you did identify some "slow" code, odds are the performance increase would go unnoticed. If you are still looking for something to check your code, a good start would be: http://validator.w3.org/ – Dryden Long Nov 15 '13 at 20:06
  • 1
    The removal of that CSS improved the performance drastically otherwise I wouldnt be posting this question. – Mike Flynn Nov 15 '13 at 20:57
  • 1
    To broad? There are only three questions, come on guys. – Mike Flynn Nov 17 '13 at 04:32
  • 2
    Reopen this?????????? – Mike Flynn Nov 18 '13 at 03:29

3 Answers3

1

Yahoo's YSlow is a blrowser plugin for multiple browsers that can analyze any page loaded http://developer.yahoo.com/yslow/

Google's PageSpeed Tools is similar:
https://developers.google.com/speed/pagespeed/

Another tool is CSSLint, but I've avoided this one, due to articles like these:
CSS Lint is harmful

Faust
  • 15,130
  • 9
  • 54
  • 111
  • 2
    Good tools, but do these cover the actual page render? I thought both of these were more concerned with the structure of the page and what is being delivered, not how the page is actually constructed once the browser has everything it needs. – Bubbles Nov 15 '13 at 20:22
0

Much of the performance of CSS rules is specific to the rendering engine, but some general guidelines apply to all engines. You can find some information here.

The goal is to avoid inefficient rules. ID selector rules will always be efficient, since they can easily be indexed. But when you build complex rules that specify a class with lots of elements or tag as the rightmost selector, the browser has to test many more elements to determine whether the rule should apply.

Avoiding redundancy can also help. Since HTML demands that all TD elements be inside a TR element, you don't have to include the TR in your selector.

As for the specific issue you specified it may be that the :active pseudo-class is just an expensive selector to match on.

boothinator
  • 121
  • 3
0

Chrome used to have this functionality, but they believe it's no longer necessary. The vast majority of rules can be quickly determined in a modern browser, meaning obsessing over rule efficiency is likely to cost you more in time & code cleanliness than it will buy you actual page speedups. For details, see the patch notes. I think Opera still has this, but I don't have browser on the computer I'm typing this from.

As the above case case shows though, you can't completely forget about selectors. However, this is a pretty simple case of a bad selector - ".ui-widget :active" implicitly uses the universal selector, which is still considered a pretty bad idea. The detached ":active" will match any element that is active in the entire DOM, then will check if it's within an element with the 'ui-widget' class. This case is covered in Google's efficient css guide, and more approachably by Chris Coyier.

In short: there aren't great tools for this, but fortunately you don't have to worry about it as much as you used to. Try to avoid the universal selector, getting needlessly specific, and favor classes and id's over element types.

Bubbles
  • 3,795
  • 1
  • 24
  • 25