CSS Performance issues

Question

hi,

What are the aspects of style sheets (CSS) that can lead to poor performance of web sites? Anything that can really choke up the CPU?

thanks in advance.

Sesh

Answer 1

IE expressions can be a killer if over used. They're reevaluated each and every time the rule is applied.

Answer 2

I have personally never encountered anything in CSS that would do this. Flash content and exessively large pages are far more likely to slow down a browser. That said I would image over use of expressions or custom IE filters (as are often used for transparency of PNG images) may use a lot of CPU.

Answer 3

CSS? Not so much it's pretty tight, but on older (like gen 4) browsers I've seen problems with:

• doing too much on the * selector
• using inherit a lot
• using the IE expression value abusively
• loading a lot of external resources (images, other CSS docs)
• applying a lot of what you might call unanchored selectors like div div

Basically anything which would be difficult to cascade through or would cascade a lot.

Answer 4

Browsers are very good at rendering CSS rules quickly.

Probably more important is the size of the CSS file. For most sites, this isn't a problem, but for larger sites it is something to be aware of.

For instance, cnn.com delivers something like 150K of CSS. This will take a few seconds on older modems, so CNN ought to make sure that their CSS is cacheable and gzipped.

Answer 5

Something that chokes not-too-old browsers are huge backgrounds that use "background-position: fixed" a la Complexspiral Redux.

Answer 6

It's hard to affect the CPU (except with IE expressions, like sblundy mentioned), but it's very easy to affect the page-load time.

Try to follow Yahoo client-side performance guidelines, such as:

• Put CSS links at the top of the page
• Use <link> instead of @import
• Combine CSS files
• Minify CSS files

Answer 7

I have seen cases where high-resolution tiled background-images (usually jpg or png) cause a major slowdown (choppy effect) when you scroll.

Answer 8

Most likely, the CSS file is not choking the site quite so much as trips to the server, complex calc, etc. might. But if it is:

• There's an art to writing a lightweight-but-effective css file system that is ever-evolving, to say the least. Effectively using classes and IDs to take advantage of the cascade, for example, can be tough, especially when the project evolves over time, or if the GUI writing it gets swapped out several times over the course of the lifecycle.

• For every legacy browser you have to support, it adds a performance hit, especially if you're using hacks to get it done. Those can be tricky, especially if layered upon one another. Conditional comments are similar - the browser has to decipher which rules it follows, and read through everything before it renders.

• Going full-size image when you could tile or set a color on a background is a drag on siteload, as well.

• (Gratuitous shot) IE can take a long time to misrender your styles and elements.