Web Performance Daybook Volume 2

Chapter 12. Useless Downloads of Background Images in Android

Éric Daspet

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 (https://bugs.webkit.org/show_bug.cgi?id=24223) 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. ...