Réduisez la consommation réseau de vos applications mobiles

PAUG - 17/02/2016

Smart&Soft

2

Nos références clients dans tous les secteurs d’activité

Centré utilisateur Des applications

performantes et de qualité

Orienté performanceAssurer 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.

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

IntroductionAvez-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

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

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

1. Le cas de l’application BFMTV sur Android

Le processus de test :

1. Faire une installation “neuve” de l’application2. Lancer l’application

a. Passer le splashscreenb. Afficher la homec. descendre jusqu’en bas de la paged. fermer l’application

3. Recommencer le point 2

7

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

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

1. Le cas de l’application BFMTV sur Android

Le domaine http://api.nextradiotv.com :

10

1. Le cas de l’application BFMTV sur Android

Le domaine http://img.bfmtv.com :

11

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

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

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

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

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

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

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

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

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

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

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’application2. Lancer l’application

a. Passer le splashscreenb. Afficher la homec. descendre jusqu’en bas de la paged. fermer l’application

3. Recommencer le point 2

22

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

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

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

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

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

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

MERCI DE VOTRE ATTENTION !

Retrouvez nous sur les réseaux sociaux

29