I visit websites that will make my CPU max out when I scroll pretty much every other day. If this guide is related to that, then it is definitely worth it.
9 times out of 10 it's related to JS or some sort of external embedded resources. The other big culprit tends to be box-shadow which have pretty horrific performance in Chrome[1], but don't do that well in other browsers either.
I find that selector performance is not a problem unless you're dealing with large-scale one-page apps.
Yeah, definitely JavaScript. Don't forget web fonts too. I can't tell you how many times I see an entire page load then have to wait several seconds for any text to show up. It's always good to write clean efficient CSS but I think articles like this are more like coder porn than anything else. The performance gains are trivial especially when compared to JavaScript, embeds/like buttons, videos, images, and slow database queries. I know DB queries arent rendering related but I know many somewhat experienced developers working on sites that run a CMS who start optimizing everything except their database and drive themselves crazy trying to figure out why pages are loading so slow. Point is, optimized CSS is probably not that high of a priority for the vast majority of sites.
A lot of things on websites these days take their toll. Facebook js files (like boxes etc), google ads and google maps are really heavy. It also happened on my own sites to have issues with facebook components loading very slowly.
I mean if you consider that just to have a facebook like box it involves loading a JS file, that then scans the page for FBML and then replaces it with an iframe (which also causes the page to repaint because its size is set after the dom is ready) and then the iframe requests 10+ additional files from facebook you understand why some pages take so long to render.
