Requêtes, parallélisation et mobiles
En 2009, Steve Souders, un expert dans le domaine de la performance web, avait annoncé qu’il ne fallait pas utiliser @import pour appeler ses feuilles de styles CSS.
L’explication est simple : plusieurs fichiers CSS appelés via <link> peuvent être “parallélisés”, c’est à dire chargés en même temps; ce qui n’est pas le cas de fichiers appelés via @import : les styles sont chargés un par un.
Il est bien entendu possible d’utiliser @import de façon pertinente, mais pour des raisons de facilité et de performances, il est devenu conventionnel de se limiter aux appels de styles via <link>.
Mais ça, c’était avant… la propagation du Web sur smartphones et tablettes.
En effet, il semble que tous les navigateurs mobiles ne soient pas sur un même pied d’égalité en ce qui concerne la gestion intelligente des requêtes et des ressources. Grâce à une discussion intéressante avec Simon Boudrias, j’ai procédé à quelques tests de performances mobile, et ma conclusion personnelle est assez édifiante.
Présentation et 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 testant une page HTML dans l’outil en ligne de Blaze.io/mobile, qui semble unanimement pertinent.
Dans tous les cas, les 4 feuilles CSS sont appelées via <link> dans le <head> du document.
<link href="styles.css" media="screen"> <link href="print.css" media="print"> <link href="tv.css" media="tv"> <link href="mobile.css" media="screen and (max-width:800px)">
Observation 1 : Safari mobile est un cancre
Résultat du test sur iPhone 4
Résultat du test sur iPad 2
Que ce soit sur iPhone ou iPad, Safari mobile ne semble pas gérer les téléchargements simultanés : les fichiers de styles sont chargés l’un après l’autre et le navigateur attend que le dernier soit chargé avant de poursuivre le chargement de toutes les autres ressources de la page !
La page a mis 2.86s a être intégralement chargée sur iPhone et 1.94s a être intégralement chargée sur iPad.
Observation 2 : d’autres navigateurs mobiles s’en sortent mieux
Résultat du test sur Android 3
Résultat du test sur Android 2.3
La page a mis 0.55s a être intégralement chargée sur Android 3, et 1.21s sur Android 2.3.
La solution réside-t-elle dans l’unification ?
Puisque Safari ne gère pas correctement la parallélisation des chargements, voyons quel est le résultat en regroupant tous les fichiers de styles en un seul fichier CSS unique.
Résultat du test (CSS unique) sur iPhone 4
La page de test contenant une feuille de style unifiée a mis 1.95s a être intégralement chargée sur iPhone 4, soit près d’une seconde de différence pour une page de moins 2ko !
Il paraît donc évident que le nombre de requêtes (en tout cas pour certains navigateurs) a une incidence non négligeable sur le délai d’affichage des sites sur mobiles.
Résultat du test (CSS unique et minifié) sur iPhone 4
Dans ce dernier test, j’ai poussé jusqu’à minifier au maximum la taille du fichier CSS unique à l’aide de CleanCSS. Le fichier a ainsi été réduit de 45%, mais la différence de performance n’est pas flagrante : la page a mis 1.8s a être intégralement chargée sur iPhone 4.
Nous sommes encore loin des performances d’affichage sur Android, mais on a fait ce qu’on a pu :)
Je pense qu’il y a encore beaucoup à dire sur ce sujet brûlant… et ça tombe bien, la discussion est ouverte. N’hésitez pas à laisser vos commentaires, vos avis et tests personnels.
