Call (877) SITE-OPT (748-3678)

Website Optimization Tips Article - CSS Performance Tests

Summary: Stephen McKinney gives 10 steps to speed up your site. The article recommends Website Optimization Secrets, and reveals a CSS selector speed test.

Stephen McKinney gives 10 steps to speed up your site. The article recommends Website Optimization Secrets, and reveals a CSS selector speed test.

In the article, McKinney recommends that authors use the fastest CSS selectors. He references a series of articles by Jon Skyes on CSS performance testing that show the relative speed of various ways to target content with CSS. Skyes found that Safari was the most sensitive to the type of CSS selector used, but the other browsers did show some rendering differences with the different types of selectors. In order of relative speed, no style was the fastest, followed by tag, class, descender, and child selectors.

According to Sykes, you should first try to just style tags then simple class selectors (.class). Descendant selectors (div p) are slower than simple class selectors, and child selectors are slower still.

The tests were run on a complex and large page, however. Under real-world conditions with simpler pages these speed differences would not be as noticeable. Using all classes you also trade off the extra overhead of embedding classes within your markup for rendering speed. While more computationally demanding, using descendant and child selectors save bytes by avoiding the need to embed class and id names within your markup.

To read the full Website Optimization Tips article see:

10 Easy Steps to Great Website Optimization

By website optimization on 16 Oct 2008 PM

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: August 27, 2013.

Follow us on: Twitter, Google+, Facebook, Linked In