Reputation: 6182

CSS Performance issues

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

Upvotes: 3

Answers (8)

John Dunagan

Reputation: 1465

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.

Upvotes: 0

Bryan A

Reputation: 3634

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

Upvotes: 0

orip

Reputation: 75437

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

Upvotes: 0

Henrik Paul

Reputation: 67703

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

Upvotes: 1

Jack Ryan

Reputation: 8472

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.

Upvotes: 1

Kenan Banks

Reputation: 211924

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.

Upvotes: 2