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.

In our past installments on Web performance optimization, we've seen how caching, server configuration, and the use of Content Delivery Networks (CDNs) can increase a Web site's responsiveness and improve Web performance metrics. Most of the techniques we've reviewed have focused on configuring the Web server or optimizing server applications. Unfortunately, a Web page that downloads quickly but is slow to parse or execute on the client will appear just as slow to a user as if the Web server were on its last megabyte of memory. In this article, we'll discuss some ways that Web page content can be streamlined for an optimal client-side experience.

 

Streamline JavaScript Includes

JavaScript abounds on the Web. From jQuery to Dojo, the Web is full of JavaScript libraries that can easily be dropped into a Web application. And any site whose developers are actively adding features is going to accrue its own storehouse of .js files. Unless a site's JavaScript is carefully managed, its Web pages could end up making a dozen or more separate requests for scripts. As we've already discussed in our article on
web performance optimization non-caching strategies, the more requests your site makes, the slower it will load.

Tip of the hat to TechAttitude.com for the graphic showing how Web page sizes and number of objects have grown tremendously over the past 16 years. In the interesting article they state, "...the average size of a web page has increased by more than five times since 2003" and "the use of mulitmedia is increasing by 100% each year".

Follow these guidelines to manage and reduce the burden of JavaScript on your Web pages.

Your website is a little slow - so what? Well, it is probably costing you money. I have been researching published facts about web performance because we are always trying to understand our industry better. This post should help you realize that improving your web application performance can directly impact your bottom line by 10% or more. Don't believe me? Read on...