6 conseils clés pour améliorer les performances des sites Internet mobiles

Optimisation des requêtes, du cache, réduction de la taille du code JavaScript... Réussir un site mobile nécessite la prise en compte de contraintes techniques spécifiques.

Réussir un site mobile nécessite la prise en compte de contraintes spécifiques : les débits des réseaux mobiles sont plus faibles que dans l'Internet classique, la puissance de traitement des terminaux est limitée, la taille des écrans varie selon les terminaux et est souvent bien plus petite que celles des PC. De plus, les contraintes techniques de conception de ces sites peuvent également engendrer des problèmes de performance.

Quel que soit leur niveau d'expertise dans le domaine du mobile, leurs enjeux stratégiques, et leur niveau d'engagement en termes de budget et de ressources, les entreprises qui se lancent dans un projet mobile ont généralement conscience que la performance et la disponibilité sont des composantes essentielles du succès commercial de leur site. Elles doivent donc identifier et traiter ces points techniques sensibles afin d'offrir une expérience optimale à l'utilisateur final.

Lorsque les utilisateurs sont confrontés à des problèmes de disponibilité ou à des temps de réponse trop longs sur un site Internet, la cause provient la plupart du temps de l'hébergement du site lui même. Ce n'est pas toujours le cas dans le monde mobile : la conception de sites mobiles est en effet très différente de celle des sites Web classiques. Même si une entreprise dispose d'un site Web exceptionnel, elle ne doit pas faire l'économie d'une approche spécifique mobile : les terminaux possèdent un écran plus petit, moins de puissance processeur, et il n'existe pas de 'design' standard d'application mobile. Négliger ces points, c'est à coup sûr s'exposer à une grande frustration des utilisateurs.

Les 6 conseils présentés dans cet article s'adressent aux entreprises soucieuses d'optimiser l'ergonomie et les performances de leurs sites mobiles de manière à répondre au fort niveau d'exigence de leurs utilisateurs.


Conseil 1 : Dans l'état actuel des technologies mobiles, et même si la présentation et le style des sites sont importants, il convient de privilégier l'aspect fonctionnel et le contenu. Dans le monde du Web, le JavaScript, par exemple, représente en moyenne la moitié du nombre total d'octets téléchargés par page (contre un tiers il y a 5 ans). Les terminaux mobiles, eux, n'ont pas encore la capacité de traitement suffisante pour gérer une telle masse de contenus interactifs de manière fluide. Ne conservez donc que l'essentiel sur un site mobile. A titre d'exemple, il peut être intéressant, sur un site Web, de modifier la couleur d'un bouton lorsque l'utilisateur le survole à la souris, mais ne vous permettez pas ce genre de fantaisies sur un site mobile.


Conseil 2 : Surveillez vos images. Une page de site Internet peut contenir jusqu'à une cinquantaine d'images. Chacune d'elles nécessite une requête dédiée sur le réseau pour récupérer le fichier image (.jpg, .gif ou autre). Compte tenu des débits des réseaux mobiles, ces quelques précieuses millisecondes cumulées, se traduisent par un ralentissement important dans l'affichage des pages.

Identifiez les images qui ne vont pas changer. Les bordures, les barres de navigation (etc.) ne changent pas à chaque page. Utilisez des feuilles de contenu en cascade (CSS Sprites) pour intégrer tout ce contenu constant dans une seule image : le temps de traitement interne par le navigateur sera sans doute un peu plus long, mais globalement vous gagnerez beaucoup de temps.


Conseil 3 : Utilisez l'entête http "expires" sur les éléments de la page afin d'optimiser le cache. Cette fonction permet d'améliorer la vitesse d'affichage des pages en indiquant au navigateur à quel moment un élément mis en cache doit être rechargé. Quand une image (par exemple) est mise en cache, elle s'affiche très rapidement puisque le navigateur n'a pas besoin d'aller la chercher sur le serveur distant. Malheureusement, la plupart des développeurs négligent cette fonction.


Conseil 4 : Il est également lié à la gestion du cache. Quand un élément est statique, utilisez le header "expires" en spécifiant une date très éloignée afin d'éviter au navigateur d'effectuer des requêtes conditionnelles. Lorsque vous devez modifier l'élément, il vous suffit de modifier le nom du fichier et le navigateur saura quand il doit demander le nouveau contenu. La façon la plus simple de garder une trace des changements de fichiers consiste à insérer un horodatage (timestamp) dans le nom du fichier.

Les conseils 3 et 4 permettent des améliorations considérables en termes de performances car, lorsqu'un navigateur envoie de nombreuses requêtes à un serveur, les temps d'aller-retour se cumulent. Dans le monde mobile, les résultats sont spectaculaires car les réseaux mobiles sont plus lents et les temps de connexion (latency) plus longs.


Conseil 5 : Tenez compte du temps d'exécution des fichiers JavaScript. Nous avons déjà évoqué le temps nécessaire au téléchargement d'un fichier JavaScript volumineux. Mais, même si vous optimisez la taille de votre code pour que le téléchargement ne prenne que 1,5 secondes, le navigateur peut prendre 3 secondes supplémentaires pour l'exécuter.


Conseil 6 : N'oubliez pas de surveiller en temps réel les performances de votre site mobile. Il est évidemment important que votre site se comporte bien lors de sa mise en production, mais si vous ne surveillez pas en permanence ses performances et sa disponibilité, vous ne saurez pas si (et quand et pourquoi) vos performances s'améliorent ou se dégradent dans le temps... et vos clients s'en apercevront probablement avant vous.