Le but de cette présentation est de sensibiliser les développeurs au fait que les applications mobiles, de nos jours, consomment de plus en plus de données et que ce n'est pas une fatalité. En se basant sur un cas concret, l'application BFMTV sur Android, nous reviendrons sur la manière d'optimiser et réduire grandement la consommation réseau d'une application mobile. Nous verrons comment nous sommes arrivés à passer d'une consommation de plus de 10MB à l'ouverture de l'application à une consommation inférieure à 1MB.

1. Réduisez la consommation réseau de vos
applications mobiles
PAUG - 17/02/2016

2. Smart&Soft
2
Nos références clients dans tous les secteurs d’activité
Centré utilisateur
Des applications
performantes
et de qualité
Orienté performance
Assurer la pérennité de vos
applications avec des outils dédiés
Smart&Soft conçoit, réalise et pilote des applications mobiles pour smartphones, tablettes, montres et TV
connectées.

3. Qui suis-je ?
Ludovic Roland
Responsable du pôle Android.
Ingénieur en développement logiciel Android,
Windows Phone / Store et Windows 10.
ludovic@smartnsoft.com
@ludovicroland
3

4. Introduction
Avez-vous déjà mesuré la consommation réseau de votre application ?
Vous est-il déjà arrivé de tomber de votre chaise en branchant un Wireshark ou un Charles à la sortie
d’un terminal, qu’il s’agisse d’un téléphone ou d’une tablette ?
Découvrez comment optimiser la consommation réseau de vos applications tout en en mesurant
l'impact.
4

5. 1. Le cas de l’application
BFMTV sur Android
2. Comment optimiser la
consommation réseau d’une
application mobile ?
3. Des impacts qu’on ne
soupçonne pas toujours...
5

6. 1. Le cas de l’application BFMTV sur Android
“Quand nous avons récupéré l’application BFMTV sur Android, celle-ci n’était pas du tout
optimisée”
Comment le prouver ?
Lancement d’une version de l’application et écoute des requêtes réseaux à travers un outil
permettant de sniffer les requêtes web :
● Charles : https://www.charlesproxy.com/
● Wireshark : https://www.wireshark.org/
● mitmproxy : https://mitmproxy.org/
6

7. 1. Le cas de l’application BFMTV sur Android
Le processus de test :
1. Faire une installation “neuve” de l’application
2. Lancer l’application
a. Passer le splashscreen
b. Afficher la home
c. descendre jusqu’en bas de la page
d. fermer l’application
3. Recommencer le point 2
7

8. 1. Le cas de l’application BFMTV sur Android
Au premier lancement de l’application, on remarque beaucoup d’appels web :
● analytics
● publicités
● API et domaines “internes” :
○ http://api.nextradiotv.com
○ http://img.bfmtv.com
○ http://www.bfmtv.com
8

9. 1. Le cas de l’application BFMTV sur Android
● Constat : difficulté d’optimisation des appels web relatifs aux fonctionnalités de type “analytics”
et “publicités” (utilisation de SDK tierces)
● Focus : consommation des données en relation avec l’API de l’application et les domaines
“internes” :
● http://api.nextradiotv.com
● http://img.bfmtv.com
9

10. 1. Le cas de l’application BFMTV sur Android
Le domaine http://api.nextradiotv.com :
10

11. 1. Le cas de l’application BFMTV sur Android
Le domaine http://img.bfmtv.com :
11

12. 1. Le cas de l’application BFMTV sur Android
Beaucoup de données sont redemandées et notamment des images alors que seulement 2
minutes séparent les deux lancements !
Lancement 1 Lancement 2
api.nextradiotv.com 233,18 KB (15 requêtes) 230,47 KB (8 requêtes)
img.bftmtv.com 10,47 MB (95 requêtes) 9,87 MB (81 requêtes)
Total 10,7 MB 10,1 MB
12

13. 1. Le cas de l’application BFMTV sur Android
Quand je lance l’application, je consomme en moyenne 10 MB de données sans compter… :
● la publicité
● les remontés des SDK tiers (analytics, bug trackers, etc.)
● la navigation sur les autres pages
Très faibles économies de data entre 2 lancements proches (moins de 1 MB) !
13

14. 1. Le cas de l’application
BFMTV sur Android
2. Comment optimiser la
consommation réseau d’
une application mobile ?
3. Des impacts qu’on ne
soupçonne pas toujours...
14

15. 2. Comment optimiser la consommation réseau d’une application mobile ?
On ne peut malheureusement pas agir partout…
● SDK tiers pour la publicité
● SDK tiers pour les analytics
● SDK tiers pour les remontées d’incidents
… si ce n’est sensibiliser les équipes marketing.
On ne peut agir que sur les données que l’on intègre, dans notre cas :
● la consommation des API
● la consommation des images
15

16. 2. Comment optimiser la consommation réseau d’une application mobile ?
Optimiser la consommation des API et des images
Réfléchir à une politique de mise en cache des données :
● cache mémoire
● base de données
● temps de rétention
Réfléchir à une politique de “nettoyage” :
● quand vider les données en cache ?
● que conserver dans le cache ?
16

17. 2. Comment optimiser la consommation réseau d’une application mobile ?
Optimiser la consommation des API et des images
Réfléchir au format des données des web-services :
● privilégier le JSON au XML
17

18. 2. Comment optimiser la consommation réseau d’une application mobile ?
Optimiser la consommation des API et des images
Utiliser correctement vos bibliothèques tierces :
● OkHttp
● Restsharp
● Picasso
mais… potentielles limitations techniques :
● se basent sur les entêtes HTTP des réponses
● obligation de consommer des API “propres”
● cache mémoire versus cache en base de données
● mise en cache d’images transformées ?
18

19. 2. Comment optimiser la consommation réseau d’une application mobile ?
Optimiser la consommation des API et des images
Utiliser une solution maison :
● droid4me permet une gestion fine de la politique de mise en cache et “nettoyage” :
○ temps de rétention
○ considération ou non des paramètres GET
○ cache mémoire
○ cache base de données
○ possibilité de prendre la main à n’importe quelle étape du “cycle de vie”
19

20. 2. Comment optimiser la consommation réseau d’une application mobile ?
Optimisations spécifiques aux images
Utilisation d’un service de retaille d’images :
● rePictuR permet de :
○ demander des images à la taille exacte
○ point de focus
○ crop
○ choix du format
○ etc.
20

21. 2. Comment optimiser la consommation réseau d’une application mobile ?
Illustration des bénéfices sur l’application BFMTV
Mise en place des bonnes pratiques :
● mise en place d’une stratégie de cache des appels réseaux
● mise en place d’une stratégie de cache des images
● mise en place d’un service de retaille
21

22. 2. Comment optimiser la consommation réseau d’une application mobile ?
Illustration des bénéfices sur l’application BFMTV
Le processus de test après mise en place des bonnes pratiques :
1. Faire une installation “neuve” de l’application
2. Lancer l’application
a. Passer le splashscreen
b. Afficher la home
c. descendre jusqu’en bas de la page
d. fermer l’application
3. Recommencer le point 2
22

23. 2. Comment optimiser la consommation réseau d’une application mobile ?
Illustration des bénéfices sur l’application BFMTV
Le domaine http://api.nextradiotv.com :
23

24. 2. Comment optimiser la consommation réseau d’une application mobile ?
Illustration des bénéfices sur l’application BFMTV
Le domaine http://img.bfmtv.com :
24

25. 2. Comment optimiser la consommation réseau d’une application mobile ?
Beaucoup d’économies de données :
● au premier lancement
● au second lancement
Lancement 1 Lancement 2
api.nextradiotv.com 64,29 KB (5 requêtes) 55,91 KB (3 requêtes)
img.bftmtv.com 987,95 KB (38 requêtes) 0 MB (0 requête)
Total 1 MB 0 MB
25

26. 1. Le cas de l’application
BFMTV sur Android
2. Comment optimiser la
consommation réseau d’une
application mobile ?
3. Des impacts qu’on ne
soupçonne pas toujours...
26

27. 3. Des impacts qu’on ne soupçonne pas toujours...
De meilleures performances :
● empreinte mémoire réduite :
○ moins de données dans la mémoire vive
● batterie sauvegardée :
○ utilisation moindre du réseau internet
○ sollicitation moindre du CPU / GPU pour décoder les images
27

28. Conclusion
● consommation des données réduite
● plus rapide
● empreinte mémoire réduite
● batterie sauvegardée
● pensez à auditer la consommation réseau de vos applications régulièrement !
28

29. MERCI DE VOTRE ATTENTION !
Retrouvez nous sur les réseaux sociaux
29