CSS Performance Issues

Question

For this question, let “efficiency” mean more or less page rendering speed. Although we must also consider performance issues such as smooth scrolling.

Say you put a striped background on a page. In terms of efficiency, is it better to draw an image 100 pixels wide (showing ten stripes) or an image 20 pixels wide (showing two stripes)? Of course ... a large image takes longer to load, but I feel that I have run into difficulties processing very small images. Is there an optimal point?

I'm starting to think that this depends on the browser (and possibly on the operating system?), Especially considering the second part of this question:

To achieve transparency, are you more efficient at writing a transparent .png file or working with CSS opacity attributes (again, the question arises of large or small tiles)? In my experience, older versions of IE seem to behave better with tiled, translucent .png than with CSS opacity attributes (although I have never done any scientific testing).

Rounded corners are another good example ... in some browsers, using images instead of CSS attributes or JavaScript implementations seems to make the page much faster with smoother scrolling.

This is really a broader issue than CSS, but this is what I’ve been thinking about lately.

-Peter

Answer 1

Yes, this is all the OS and browser.

For example, Safari makes better use of CSS transforms to animate elements than JS.

Generally:

• You want to avoid alternating very small images. An image of 20 pixels will be better than 1px, as the browser does a lot less work to redraw the entire screen. Most likely, not a big difference between 20px and 100px.
• anything you can do with CSS is more likely to be more efficient than loading another image. (e.g. rounded corners, shadows, etc.).
• The big warning is IE css filters. Many of them are ineffective, and you might be better off returning to images.

Answer 2

Based on my testing, the page seems to display faster using the smallest possible image, and let CSS do the tiling for itself. The speed with which this happens depends solely on the browser.

Regarding translucent backgrounds, using CSS will be easier in bandwidth, but CSS opacity is still not fully supported, so I will take this into account when solving something like this.

I would be very interested to know what other people's test results are ...