Performances : toutes les feuilles de styles sont chargées
La performance dans le Web mobile est une notion capitale : il est crucial de prendre en compte le poids des éléments, les temps de chargement, les requêtes superflues, sous peine de grosses désillusions selon les projets.
J’ai lu récemment qu’une feuille de style CSS dédiée “mobile” était chargée par le navigateur même si elle n’était pas applicable (par exemple avec une condition de taille alors que l’écran ne respecte pas cette taille) et qu’il était nécessaire de procéder à plein de bidouilles pour éviter ce chargement inutile.
Du coup, je me suis amusé à faire un petit test sur une page web hébergée (temporairement) sur http://goetter.fr/tmp/test.html
Principe du test
L’idée générale est d’observer comment sont chargées (ou non) différentes feuilles de styles dédiées à des médias très différents (mobile, mais aussi print et TV) en ouvrant la page HTML dans mon navigateur de bureau préféré.
Les différentes feuilles de styles appelées sont :
<link rel="stylesheet" href="styles.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="tv.css" media="tv"> <link rel="stylesheet" href="mobile.css" media="screen and (max-width:800px)">
Pour rajouter un peu de piment, la feuille de style “mobile” a le bon goût d’appeler un fichier d’image d’arrière-plan appliqué sur body dès lors que la largeur de fenêtre est inférieure à 800px
Observations
- Quel que soit le périphérique ou taille d’écran, toutes les feuilles de styles (même non appliquées/applicables) sont chargées,
- L’image d’arrière-plan présente dans les règles CSS de mobile.css n’est chargée que lorsque la taille d’écran est inférieure ou égale à 800 pixels,
- Le navigateur charge tout d’abord séparément le fichier HTML, puis le premier fichier CSS, puis parallélise les chargements des feuilles CSS suivantes.
- Note en passant : j’ai utilisé Firefox 8, qui n’applique pas le média TV mais qui charge quand-même la feuille de style (au cas où ;))
Ma conclusion
Les inconvénients que l’on prête aux feuilles CSS dédiées mobiles sont exactement les mêmes que pour les autres médias : la feuille de style est inexorablement chargée, au cas où elle serait interprétée un jour.
Par contre, la bonne nouvelle - et c’est rassurant - est que les médias (images de fond par exemple) appelés dans cette feuille CSS mobile ne sont chargés par le navigateur que lorsqu’il en a besoin, c’est à dire lorsque la taille d’écran correspond au Media Query désiré.
Bref, rien de très excitant mais le “problème” de performance est, selon moi, assez négligeable, et je vais continuer un petit moment à employer ma technique préférée pour cibler les mobiles de manière optimale :)
