Comment améliorer le temps de chargement de mon application mobile ?

Camille Ramirez
26/11/2019

C’est un point trop souvent négligé. Et pourtant, le temps de chargement d’une application mobile est l’un des facteurs les plus importants pour assurer une Expérience Utilisateur (UX) agréable. Maintenant que nous connaissons les raisons qui entraînent une application mobile à connaître des ralentissements, nous allons vous donner les solutions adaptées pour réduire ce temps de chargement et ainsi proposer un produit à la hauteur des attentes de vos utilisateurs.

 

Analyser les performances de l’application mobile

Selon une récente étude de Google, un temps de chargement rapide est de moins de trois secondes. Qu’en est-il de votre application mobile ?

Vous souhaitez améliorer son temps de chargement ? Commençons par le début. La première phase est l’analyse. Chez Kreactive, parmi les outils que nous utilisons, c’est Postman qui nous accompagne au quotidien. Cet outil permet de construire et d’exécuter des requêtes HTTP, de les stocker dans une base de données afin de pouvoir les retravailler et les organiser.

Comme nous le disons régulièrement, nous vous conseillons de tester et re-tester votre application mobile afin d’optimiser votre temps de chargement. 

 

Depuis le développement back-end 

Au niveau back-end, il est possible de rencontrer des temps de calculs qui peuvent s’avérer très longs. Par exemple, les développeurs sont amenés à demander l’accès à des ressources externes dans le but d’obtenir des informations en retour. Les premiers calculs en matière de temps se font dès cette première étape.

 

Intégrer des caches 

La première solution que nous pouvons apporter est la suivante : mettre en cache les données pendant un certain temps. Il peut s’agir d’un cache au sein de l’application mobile, c’est-à-dire qu’on les met dans différents objets.

La mise en cache a pour but de diminuer le nombre de ressources utilisées par les serveurs par le biais d’une réduction du nombre de requêtes demandées. Le fonctionnement est très simple : l’application sauvegarde certaines données en cache lors du chargement, ce qui permet d’afficher certaines vues déjà sauvegardées dans des requêtes déjà envoyées. Du point de vue de l’utilisateur, aucun changement n’est à prévoir. Celui-ci se verra parcourir l’application mobile comme s’il y avait pas eu de cache. Bien au contraire, la navigation se fera de manière beaucoup plus fluide et rapide. Nul besoin pour lui de recharger sa page pour faire apparaître tous les éléments du site à chaque visite sur l’application. Seulement les nouveaux éléments seront chargés puisque le reste des éléments aura déjà été sauvegardé en amont grâce au cache. 

De votre côté, la mise en place de caches assure un temps de chargement plus rapide que si l’application mobile ne possédait pas de cache. Cette étape est l’une des plus importantes dans la réduction du temps de chargement de votre produit. 

 

Inclure un CDN

Dans un second temps, on utilise un CDN (Content Delivery Network), c’est-à-dire qu’on intègre un premier serveur dans un second qui a pour but d’enregistrer les données brutes et les conserver durant quelques heures avant d’effectuer un nouveau rechargement et de nouvelles requêtes. La mise en place d’un CDN permet à vos utilisateurs de bénéficier du contenu statique de votre application mobile depuis un serveur localisé le plus près possible de leur lieu de connexion. Le Content Delivery Networ vous permet de livrer les contenus de votre produit dans un maximum de lieux possibles. Si vous développez une application mobile qui sera utilisée dans le monde entier, l’intégration d’un CDN est une étape cruciale pour le bon fonctionnement de votre produit et un temps de chargement respectable. Lorsque vous utilisez une application américaine, les données sont chargées aux États-Unis et peuvent impacter le temps de chargement. C’est précisément pour éviter ce genre de problème qu’il est essentiel de mettre en place un CDN dans vos projets. L’autre avantage de l’implication d’un CDN est le suivant : les données sont traitées et enregistrées. Une fois la manipulation faite une première fois, vous n’avez plus besoin de la réitérer. Tout est déjà enregistré une première fois ! Le CDN sert de filtre et enregistre le résultat en fonction de la requête URL et de ses paramètres.

Tous les projets ne nécessitent pas de CDN. Par exemple, sur des projets d’applications mobiles impliquant peu de contenu, il n’est pas nécessaire de mettre en place de protocoles trop importants.

Lorsque le projet ne possède pas de CDN, nous vous conseillons d’enregistrer l’information en base de données : les vues. Ces vues sont mises à jour en fonction de l’actualisation des informations en base de données, ce qui permet de chercher directement l’information brute et de la renvoyer une fois qu’elle a été calculée et traitée.

  

Au niveau du front

Lorsque les développeurs ont besoin de ressources, ils font une requête auprès du CDN avec les informations nécessaires selon leur besoin. Par exemple, la langue de l’application mobile peut être différente selon le pays dans lequel l’utilisateur prend l’application en main. 

On va demander et attendre une réponse. Le but étant d’optimiser le processus afin d’éviter un nombre trop important de requêtes, un temps de chargement trop élevé ou trop d’attente. Les résultats  seront alors obtenus de manière bien plus rapide. On peut aussi optimiser le côté “mobile”. Aujourd’hui, on rencontre de nombreuses applications mobiles qui demandent un grand nombre d’informations dès la connexion : l’ensemble du contenu d’une application par exemple.

Selon la quantité de contenu proposé, la gestion de celui-ci doit être adaptée. Si l’application est légère en matière de contenu, le travail sera moins intense. A contrario, sur des projets bien plus importants, il sera important de mettre en place une certaine logique qui devra être respectée et rigoureuse afin d’éviter un nombre trop important de requêtes ou un temps d’attente trop long et d’assurer une sécurité absolue.

Ces facteurs sont spécifiques à chaque projet. Plus le projet est important, plus il aura besoin de sécurité et de rigueur.

 

Réduire la taille des images 

La gestion des images sur une application mobile est l’une des principales causes qui peuvent causer des crashs et autres bugs récurrents. Elles provoquent des problèmes de chargement et d’affichage (gestion de la mémoire). Les images sont des objets qui consomment d’importantes ressources auprès des serveurs. De manière générale, ce sont ces éléments qui prennent le plus de place sur votre produit. C’est d’ailleurs pour cette raison principale qu’il est crucial de prendre en compte le poids et la taille de vos images. 

Afin d’optimiser la taille de l’application, il est crucial d’optimiser la taille des images embarquées dans votre produit. Pour vous aider dans cette tâche, il existe des outils comme Tinypng. Pour optimiser le temps de chargement des images qui sont téléchargées à partir d'un serveur (images produits par exemple), il suffit d’ajouter un algorithme côté serveur pour redimensionner l'image à la taille donnée en paramètres et envoyer la taille dont on a besoin en paramètres.

Le temps de chargement d’une application mobile est un facteur clé pour assurer son bon fonctionnement dans plusieurs domaines : UX, satisfaction, activation et rétention utilisateurs. Si vous constatez, grâce aux retours de vos utilisateurs, que votre application rencontre des ralentissements, n’hésitez plus et contactez-nous ! Nos équipes de développeurs de Kreactive vous aideront en analysant votre actif technologique et en optimisant vos temps de chargement. Ils ont l’expertise requise pour améliorer ce problème pouvant nuire à l’Expérience Utilisateur.

 

Validation de l'envoi
MERCI, VOTRE DEMANDE À BIEN ÉTÉ ENVOYÉE.
Nous venons de vous envoyer le modèle de cahier des charges par e-mail.
Le formulaire n'a pas pu s'envoyer, veuillez essayer à nouveau

Validation de l'envoi
MERCI, VOTRE DEMANDE À BIEN ÉTÉ ENVOYÉE.
Nous venons de vous envoyer le modèle de cahier des charges par e-mail.
Le formulaire n'a pas pu s'envoyer, veuillez essayer à nouveau

Validation de l'envoi
MERCI, VOTRE DEMANDE À BIEN ÉTÉ ENVOYÉE.
Nous venons de vous envoyer le modèle de cahier des charges par e-mail.
Le formulaire n'a pas pu s'envoyer, veuillez essayer à nouveau
fleche gauche contenu precedentfleche droite contenu suivant

NOS DERNIERS ARTICLES