As we’ve documented previously on this blog, a majority of perceived Web page load time resides on the front end – i.e., in how a page is rendered to a user. A poorly designed Cascading Style Sheet (CSS) file can have a negative impact on the time it takes a page to display to the user. What’s worse, a poor CSS design might load quickly, but inhibit subsequent performance due to expensive redraw behavior. The following article examines a few key issues in CSS performance, and more importantly, how to decide whether it’s worth the effort in the first place.
Assessing the Web Performance Impact of CSS
A key principle of performance improvement is that any changes should be driven by data. Before tweaking your site’s performance, you need data to tell you which functions or features are causing the biggest delays.
For CSS, the one factor that causes the most performance lags are selectors. Selectors are the statements that specify to which elements a given set of CSS styles will apply. Selectors can be simple, addressing an element by its type:
DIV { font-weight: bold; }
Or they can be complex, using a combination of tag name, ID, class and child references to style a specific subset of elements:
#menus ul ul li.current-menu-parent > a{ background:#222;color:#fff;text-shadow:0 0 0 #222; }
CSS2 and CSS2 also support a sizable number of advanced selectors, including universal selectors, attribute selectors, and pseudo-classes.
Longer selectors generally run more slowly. To profile the running times of selectors, developers can use one of the many CSS profilers available on the Web which will run all of the selectors on a page and calculate their individual running times.
For a simple profiler, you can use Andy Edinborough’s CSS Stress Test Bookmarklet, which profiles the running time of all CSS selectors included in a page. Many Web browsers are now shipping with style profilers built in. Opera included a Style Profiler with its Dragonfly release last year. Google Chrome has made CSS selector profiling available in its Page Speed browser extension.