How media queries slow the mobile web

You proba­bly have been told to design with the grace­ful degra­da­tion para­digm. If you have very smart friends, they may even use the « progres­sive enhan­ce­ment » in place of grace­ful degra­da­tion. To enable an opti­mi­zed access to mobile on a website, you proba­bly use css media queries:

header { background-image: url(head-1280px.png) }
@media screen and (max-device-width: 480px) {
  header { background-image: url(head-480px.png) }
}

If you’re really smart and don’t care about IE, you may design first for narrow mobiles and then opti­mize all other use cases:

header { background-image: url(head-320px.png) }
@media screen and (min-device-width: 321px) {
  header { background-image: url(head-480px.png) }
}
@media screen and (min-device-width: 481px) {
  header { background-image: url(head-855px.png) }
}
@media screen and (min-device-width: 856px) {
  header { background-image: url(head-1280px.png) }
}

Sorry, what you has been told is bull­shit. You are not opti­mi­zing anything. Worse, you are degra­ding all android user expe­rience (and proba­bly some ipho­ne’s ones).

It’s not your fault, webkit has an horrible bug. It down­loads all appli­cable images, not just the final one. This basi­cally means that down­loa­ding only the big 1280px image may even be chea­per than these alter­na­tives with media queries.

Yes, it’s sad, but so is the life. The former is true at least up to Android 2.3.2 so the problem won’t disap­pear this year.

If you ask me, it’s even worse: Brow­sers based on 2010’s webkit and lower (inclu­ding mobile ones) don’t need any media query to be slowed down. You just need the follo­wing to down­load two images instead of one.

p { background-image: url(useless.png); }
p { background-image: url(usefull.png); }

There are only three solu­tions

1. Push the fix on Android (still not there in 2.3.2) and upgrade to the latest firm­ware (not only on your own mobile, but on everyo­ne’s)
2. Use the same images for all devices and screen widths AND don’t use the cascade to over­ride previous back­ground-image rules in your style­sheets
3. Wrap every back­ground-image rule in a media query and define min and max constraints for each media query so that a device never read more than one block (this mean you will never support IE without CSS hacks) AND don’t use the cascade to over­ride previous back­ground-image rules in your style­sheets