Éric Daspet (@edasfr) is a web consultant in France. He wrote about PHP, founded Paris-Web conferences to promote web quality, and is now pushing performance with a local user group and a future book.
Let’s begin with a quick reminder. In CSS, the “C” stands for “cascading”. You may specify many conflicting rules for an element property: only one will be applied, based on different weights and priorities.
p { background-image: url(red.png) } p { background-image: url(green.png) } p.intro { background-image: url(yellow.png) }
With the previous code and a <p class=intro>, your paragraph should be displayed with a yellow background.
Browsers are smart. If you don’t have any other <p> tag, they will only download the yellow image and even if you do, the red image will never be downloaded.
The Android problem
Well… that’s how it should work. WebKit had an old bug fixed in late 2010 that made it download all three images. In a complex website, this could be a major performance glitch.
Why am I digging up an old bug? Chrome, Safari and other webkit-based browsers are probably up to date by now, but our problem still lives in the mobile world: Android. Almost every default browser shipped in Android 2.x device is still affected by this performance issue.
The mobile world is highly fragmented and updates are not regularly scheduled. Looking at Android smartphones, the majority of devices is still running under Android 2.2 or Android 2.3. Some devices, like the Nexus S, will probably be updated to Android 4.0 in the first quarter of 2012. However, sadly, most of them won’t. You will still find Android 2.2 and 2.3 devices for years. For example, here in France, the Samsung Galaxy S was a true success but it will be running Android 2.3, and will still be used for at least one year, maybe two.
If you target a mobile audience, you now know one of your performance enemies. If you don’t… well, it seems that you have bigger problems to deal with.
And the lack of solution
You probably expect a happy ending to this note with a solution, or at least some workaround. You are right to expect this, but I won’t be able to help.
As far as I know, there is no workaround, so here are two guidelines:
- Add background images in your CSS only to
#idselectors - Avoid using multiple selectors with background images that may target the same element (which means style sheet without cascade)
I know, these guidelines are impossible to follow without exceptions. The purpose here is not to remove all useless downloads, but to reduce them with a “best effort” rule, in order to help your user experience. At the very least, try to avoid using the cascade for large background images that span the entire web page.