Home » Website Optimization Secrets » Website Optimization Tips Article – CSS Performance Tests

Website Optimization Tips Article – CSS Performance Tests

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