Jean-Pierre Vincent, expert en performance mobile, souligne l'importance d'une expérience de navigation rapide, citant des données sur l'usage mobile en France et les exigences des utilisateurs concernant les temps de chargement. Il décrit les techniques pour optimiser la performance, telles que la réduction des requêtes et la gestion du cache, tout en discutant des défis liés au design web réactif. La conclusion met en avant que bien que les techniques classiques soient généralement efficaces, elles nécessitent d'être adaptées aux besoins actuels des utilisateurs.

1. La performance sur
mobiles
Jean-pierre VINCENT

2. Qui ça ?
Jean-pierre VINCENT
braincracking.org
@theystolemynick
12 ans de Web
Consultant, formateur, auteur

3. Importance ?
● 32 millions de forfaits data
● +80% de volume
● 10% du trafic sur sites standards

4. Usage ?
● Maison, travail, déplacement,
magasin...
● Mails, recherche, réseau social...
● Infos produits, chercher un
endroit, voyages, news
http://services.google.com/fh/files/blogs/our_mobile_planet_france_fr.pdf

5. Exigences
● 1S = -10% de pages vues
● 60% attendent 4s max
● les sites se chargent en 12s
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster/

6. Débits théoriques

7. Vraie moyenne
+ 25% de perte ?

8. Quelle différence ?
http://bit.ly/S2ZYll

9. La volatilité

10. Objectifs
● Affichage rapide :
• News
• Comparateurs
• Voyage
• Vidéo
● Interface fluide
• Applications
• Formulaires
• Recherches

11. Comment tester
✗ Émulateurs
• Connexion sans faille
• Charger une page : 50% plus
rapide
• Exécution JS : 90% plus rapide

12. Comment tester
Mobile perf bookmarklet
http://stevesouders.com/mobileperf/mobileperfbkm.php

13. Comment tester
Wifi => tcpdump => .pcap => .har
=> HAR viewer
http://code.google.com/p/pcaphar/wiki/CaptureMobileTraffics

14. Comment tester
http://webpagetest.org/

15. Comment tester
Wifi sur mobile
+
● Proxy Charles
● Trickle (Linux)
● Network Link Conditioner (OSX 10.6)
● Slowy app (OSX 10.5)

16. Comment debug
● Stoyan Icy
● Chrome iOS
● SocketBug

17. Comment debug
● Opera Dragonfly
● Firefox Remote Debugger
● Chrome Remote Debugging
● IOS 6 : enfin natif

18. Charger

19. Théorie 1/2
● Réduire le nombre de requêtes
● Gérer le cache navigateur
● Gzip
● Scripts en bas de page
● JS et CSS dans des fichiers externes
● Moins de domaines par page
● Minifier
● Pas de redirection
http://developer.yahoo.com/performance/rules.html

20. Théorie 2/2
● Preload / postload components
● Reduce DOM size
● Domain sharding
● Reduce cookie size
● Optimize images
● CSS Sprites
http://developer.yahoo.com/performance/rules.html

21. http://bit.ly/Tcqxt8

22. Départ
Départ :
● Start render : 5s
● Render article : 7s
http://www.webpagetest.org/video/compare.php?tests=121019_CG_b761ca40c0644ff4b15f96c1b90fe712-r:1-c:0

23. À vous

24. TODO
● Concaténer CS
● (pas de police)
● (pas de redirection)
● Tester sans JS

25. TODO
http://www.webpagetest.org/result/121031_ef8a9887f8a90150e8a50873c574d48f/

26. TODO
Travail sur le JavaScript
● Concaténer par modules
● Nuke document.write()
● Exécution asynchrone
● Chargement et exécution au scroll
• Pubs invisibles
• Widgets
https://github.com/jpvincent/LazyLoadLight - https://github.com/jpvincent/onAreaVisible

27. Gérer le cache
● La base :
• Gestion fine des URL
• Headers correctement mis
● Aller plus loin :
• Détourner localStorage
• Utiliser appCache Manifest

28. Moins de requêtes
La base
● Sprites ● CSS3
● Icônes unicode ● Base64
Aller plus loin
● Inline JS/CSS ● SPDY, HTTP2
● WebSocket
● Sacrifice de fonctionnalités

29. Le poids
La base
● Gzip, minify
● Compression des images
● Lazy load
Aller plus loin
● Se passer des grosses librairies
● HMTL5 History

30. Se méfier
● Domain sharding : fini
● Scripts en bas de page : inutile
● Tout inline ou tout external ?
● CDN : insignifiant
● Render côté client

31. Responsive Web Design
Critiqué :
● Trop de choses chargées
● Difficile à maintenir
Site dédié mobile :
● Permet de se lâcher
● Contenu minimal approprié à
l'usage
● Seule le V de MVC est à refaire

32. Conclusion
Les techniques classiques :
● Marchent globalement bien
● Peuvent être dangereuses
● Ne vont pas encore assez loin
Débat ?