4 astuces pour doper la performance des sites sur mobile
La quête de la performance Web ne concerne plus uniquement la rapidité d'affichage des sites sur PC traditionnels "Desktop". Elle s'est encore compliquée en s'étendant à l'accès des pages Web en situation de mobilité, via smartphones ou tablettes. Or, ces terminaux n'ont pas les mêmes caractéristiques que des PCs traditionnels, ni les mêmes limites.
Quatre différences majeures doivent être prises en compte.
Une plus grande latence de la connexion Internet. Il faut compter entre 50 et 100 millisecondes en moyenne sur PC contre parfois plus de 300 pour les mobiles. "Et cette différence sensible s'ajoute pour chaque requête", prévient Stéphane Rios, ancien DSI de RueduCommerce.fr, aujourd'hui à la tête de Fasterize, éditeur de solutions dédiées à l'optimisation de la performance Web.
Autre point concernant la connexion Internet : la bande passante elle-même est aussi plus limitée sur mobile que sur PC traditionnels. "Les opérateurs ont beau promettre des mégabits, les antennes 3G sont souvent partagées, ce qui peut diminuer la performance constatée par les utilisateurs", rappelle Stéphane Rios.
Les performances des processeurs, et la fameuse puissance CPU des smartphones n'égalent pas encore celles généralement constatées sur les PC fixes.
Les capacités de la mémoire des terminaux mobiles, (256 ou 512 Mo pour beaucoup, voire 1 Go) n'atteignent pas non plus celles rencontrées sur les PC aujourd'hui. "C'est un peu comme si l'on avait affaire à des PC un peu vieillissants", compare Stéphane Rios.
"Il faut impérativement garder en tête ces particularités pour optimiser la performance sur mobile", poursuit l'expert en performance. Conséquence immédiate : "il faut essayer de diminuer le plus possible le nombre de requêtes. Et certaines recettes bien connues de la performance Web pour ordinateur fixe doivent parfois être appliquées avec plus d'agressivité pour les smartphones".
1– Utiliser le Lazy Loading
La technique de Lazy Loading, déjà employée pour améliorer la rapidité de l'accès depuis un PC, permet de ne pas charger toute la page, mais seulement ce qui est nécessaire ou visible par l'internaute. "Une technique particulièrement conseillée et utile pour les pages d'accueil très chargées", précise le fondateur de Fasterize.
2 - Concaténer en tenant compte des limites des smartphones
Pour contourner les limites du cache navigateur : s'appuyer sur le stockage en local de HTML5
Concaténer et minifier le JavaScript, et regrouper les images dans des sprites CSS sont des grands classiques de la performance Web. Ces conseils peuvent être suivis pour les smartphones, car il s'agit de puissants leviers pour améliorer la vitesse de chargement.
"Mais, la mémoire disponible sur les smartphones empêche la concaténation de fichiers trop volumineux : il faut aussi en tenir compte", prévient Stéphane Rios. Par exemple, sur Safari Mobile, pour pouvoir être mis en cache, les objets décompressés ne doivent pas dépasser les 100 Ko pour l'iPhone 4, et 50 Ko pour le modèle précédent (iPhone 3 GS), encore assez répandu. "La panacée pour Desktop n'est pas forcément la panacée sur smartphone", a pu ainsi constater Stephane Rios.
3 - Utiliser le stockage en local
"Pour contourner les limites du cache navigateur sur les smartphones, il est possible de s'appuyer sur le stockage en local (Local Storage), accessible via HTML5. Il offre des possibilités bien moins limitées", conseille Stéphane Rios. Toujours sur iPhone, pour poursuivre avec le même exemple, ce stockage local est de 5 Mo par défaut sur les iPhone, et si l'utilisateur le souhaite il peut être porté à 10 Mo.
4 –Penser au responsive design et aux tablettes
Grande question posée avant de se lancer : faut-il opter pour le responsive design ou pour un sous-domaine dédié au mobile, de type m.monsite.fr ? "Recréer et maintenir un nouveau site peut être jugé trop coûteux pour certains sites", fait valoir l'ancien DSI de RueDuCommerce.fr. Et c'est d'ailleurs ce qui explique sans doute pourquoi bon nombre de ténors de l'e-commerce français n'ont pas choisi cette option.
La voie du responsive design a l'avantage de se baser sur le même code... En outre, "avec l'arrivée des tablettes notamment, les utilisateurs sur terminaux mobiles veulent aussi de moins en moins de site trop allégés, et veulent même de plus en plus de fonctionnalités", a pu observer Stéphane Rios. Ce dernier en conclut qu'"il faudrait en fait aujourd'hui penser un site pour les tablettes, c'est-à-dire avec une ergonomie et une richesse fonctionnelle répondant à cette attente croissante des utilisateurs, tous terminaux confondus, mais pouvant aussi se plier aux contraintes techniques des mobiles. Un site ainsi optimisé pour tablette pourra aussi tout à fait s'adapter au Desktop".