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




Étiquettes :


Une réponse à “How media queries slow the mobile web”

  1. Avatar de Fnaph

    Surely you could just use media queries in the style sheet links instead of on each element and then have a seperate css file for each device? You could include a common stylesheet to avoid code duplication if need be, it may add one extra http request but that’s all.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *