Comments on: Performance Impact of CSS Selectors http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ Essential knowledge for making your web pages faster. Sat, 04 Feb 2012 09:46:28 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: andrej http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-3234 andrej Sun, 17 Apr 2011 16:38:02 +0000 http://www.stevesouders.com/blog/?p=267#comment-3234 Very interesting post. Is there any further inquiery or research been done into css performance? I have been reading up on object oriented css lately - and the most important take-away from oocss is that already specified rules are performance freebies. Is there any correlation between the your finding and oocss? Very interesting post.

Is there any further inquiery or research been done into css performance?

I have been reading up on object oriented css lately – and the most important take-away from oocss is that already specified rules are performance freebies. Is there any correlation between the your finding and oocss?

]]> By: Michael http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-2985 Michael Thu, 27 Jan 2011 20:22:02 +0000 http://www.stevesouders.com/blog/?p=267#comment-2985 According to the full comment from David Hyatt regarding performance speed is likely less of the issue than memory utilization. Nowadays browsers can consume 150mb per tab or window. While the speed maybe saved by the use of more memory to handle a page the performance impact is there. As users multitask on their laptops/desktops it must be considered that multiple apps are running. A web page causing an increase in 150mb or more in memory usage could make the computer seem slow and as a result the user starts closing tabs/windows and ... your page. According to the full comment from David Hyatt regarding performance speed is likely less of the issue than memory utilization.

Nowadays browsers can consume 150mb per tab or window. While the speed maybe saved by the use of more memory to handle a page the performance impact is there.

As users multitask on their laptops/desktops it must be considered that multiple apps are running. A web page causing an increase in 150mb or more in memory usage could make the computer seem slow and as a result the user starts closing tabs/windows and … your page.

]]> By: Yaron Shapira http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-2881 Yaron Shapira Mon, 27 Dec 2010 08:17:36 +0000 http://www.stevesouders.com/blog/?p=267#comment-2881 Great article and discussion. I like using long selector chains like #kwrap #kheader ul li a because it lets me see the html structure as I work on the CSS. I also sometimes do stuff like ...span#notices for the same reason. I realize now that these are (possibly terribly) inefficient selectors but has anyone seen any tests on what impact these might actually have in real world situation? (say >500 dom nodes, >500 selectors and >1000 total rules) Great article and discussion. I like using long selector chains like #kwrap #kheader ul li a because it lets me see the html structure as I work on the CSS. I also sometimes do stuff like …span#notices for the same reason. I realize now that these are (possibly terribly) inefficient selectors but has anyone seen any tests on what impact these might actually have in real world situation? (say >500 dom nodes, >500 selectors and >1000 total rules)

]]> By: Steve Souders http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-2628 Steve Souders Sun, 31 Oct 2010 16:58:30 +0000 http://www.stevesouders.com/blog/?p=267#comment-2628 @willabee: please read the conclusion: "For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be." @willabee: please read the conclusion: “For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be.”

]]> By: Willabee http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-2627 Willabee Sun, 31 Oct 2010 15:30:07 +0000 http://www.stevesouders.com/blog/?p=267#comment-2627 From information given here and elsewhere, the optimisation seems to point towards adding class names to quickly target subject nodes in order to gain a few ms of performance. Considering: * Increased (maybe drastically) page weight. * The extra mark-up render time. * Increased style-sheet weight. * The CSS will cache for most users. * The extra maintenance effort to update the mark-up with these class names. * The extra maintenance effort to make modifications to the presentation layer. For just a few ms!!! We've got to be kidding. Its almost like going back to presentational tag soup. CSS inheritance is the nearest thing to event delegation. This, along with over-rides (more specific) should be the focus for performance across presentation and behaviour layers IMO. From information given here and elsewhere, the optimisation seems to point towards adding class names to quickly target subject nodes in order to gain a few ms of performance.

Considering:
* Increased (maybe drastically) page weight.
* The extra mark-up render time.
* Increased style-sheet weight.
* The CSS will cache for most users.
* The extra maintenance effort to update the mark-up with these class names.
* The extra maintenance effort to make modifications to the presentation layer.

For just a few ms!!!
We’ve got to be kidding.
Its almost like going back to presentational tag soup.

CSS inheritance is the nearest thing to event delegation. This, along with over-rides (more specific) should be the focus for performance across presentation and behaviour layers IMO.

]]> By: Buckthorn http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-1888 Buckthorn Tue, 30 Mar 2010 13:38:19 +0000 http://www.stevesouders.com/blog/?p=267#comment-1888 Thanks for the article. The book may still be out on measuring the exact performance effects of css optimization. But what I take away from things like Speed Test and Hyatt's comments is that for many of us, there is probably plenty of room for optimization. Assigning IDs and classes is obviously ridiculous. But at the same time, we would do well to avoid being lazy and leaning too heavily on things like "multi-multi-level" contextual and descendant selectors (e.g., "ul li p span a"), and redundant, "overqualified" IDs and classes (e.g., "body#home", "div.column"). Thanks for the article. The book may still be out on measuring the exact performance effects of css optimization. But what I take away from things like Speed Test and Hyatt’s comments is that for many of us, there is probably plenty of room for optimization. Assigning IDs and classes is obviously ridiculous. But at the same time, we would do well to avoid being lazy and leaning too heavily on things like “multi-multi-level” contextual and descendant selectors (e.g., “ul li p span a”), and redundant, “overqualified” IDs and classes (e.g., “body#home”, “div.column”).

]]> By: stoimen http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-1784 stoimen Wed, 10 Mar 2010 12:45:56 +0000 http://www.stevesouders.com/blog/?p=267#comment-1784 Whatever the gain size is, isn't it a good practice to optimize whatever you can. OK, it cannot be the most important part of a web site optimization process, but it doesn't slows down the page, isn't it! Whatever the gain size is, isn’t it a good practice to optimize whatever you can.

OK, it cannot be the most important part of a web site optimization process, but it doesn’t slows down the page, isn’t it!

]]> By: Steve Souders http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-1666 Steve Souders Mon, 22 Feb 2010 17:38:41 +0000 http://www.stevesouders.com/blog/?p=267#comment-1666 @Dave: Hi! There's a link to the "test pages" above, but here it is again: http://stevesouders.com/tests/css-selectors/index.html I ran these on my ThinkPad x61 on Windows XP. I don't have that laptop any more, so don't have memory, CPU, etc. info for you. @Dave: Hi! There’s a link to the “test pages” above, but here it is again: http://stevesouders.com/tests/css-selectors/index.html

I ran these on my ThinkPad x61 on Windows XP. I don’t have that laptop any more, so don’t have memory, CPU, etc. info for you.

]]> By: Dave Artz http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-1664 Dave Artz Mon, 22 Feb 2010 15:59:27 +0000 http://www.stevesouders.com/blog/?p=267#comment-1664 Steve, could you publish and link to your test page scripts? I'd like to run these benchmarks on our reference machine (3GHz P4 512MB). What machine config did you run these tests on? Steve, could you publish and link to your test page scripts? I’d like to run these benchmarks on our reference machine (3GHz P4 512MB).

What machine config did you run these tests on?

]]> By: Zach http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/#comment-1621 Zach Tue, 16 Feb 2010 09:06:59 +0000 http://www.stevesouders.com/blog/?p=267#comment-1621 Great article. Had been wondering about this for quite awhile. Great article. Had been wondering about this for quite awhile.

]]>