Your SlideShare is downloading. ×
0
La performance sur     mobiles              Jean-pierre VINCENT
Qui ça ?       Jean-pierre VINCENTbraincracking.org@theystolemynick12 ans de WebConsultant, formateur, auteur
Importance ?● 32 millions de forfaits data● +80% de volume● 10% du trafic sur sites standards
Usage ?● Maison, travail, déplacement,magasin...● Mails, recherche, réseau social...● Infos produits, chercher unendroit, ...
Exigences●   1S = -10% de pages vues●   60% attendent 4s max●   les sites se chargent en 12shttp://www.themediabriefing.co...
Débits théoriques
Vraie moyenne + 25% de perte ?
Quelle différence ?   http://bit.ly/S2ZYll
La volatilité
Objectifs● Affichage rapide :   • News   • Comparateurs   • Voyage   • Vidéo● Interface fluide   • Applications   • Formul...
Comment tester✗ Émulateurs  • Connexion sans faille  • Charger une page : 50% plus  rapide  • Exécution JS : 90% plus rapide
Comment tester        Mobile perf bookmarklethttp://stevesouders.com/mobileperf/mobileperfbkm.php
Comment tester Wifi => tcpdump => .pcap => .har=> HAR viewerhttp://code.google.com/p/pcaphar/wiki/CaptureMobileTraffics
Comment tester  http://webpagetest.org/
Comment tester Wifi sur mobile +● Proxy Charles● Trickle (Linux)● Network Link Conditioner (OSX 10.6)● Slowy app (OSX 10.5)
Comment debug●   Stoyan Icy●   Chrome iOS●   SocketBug
Comment debug● Opera Dragonfly● Firefox Remote Debugger● Chrome Remote Debugging●   IOS 6 : enfin natif
Charger
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 fi...
Théorie 2/2● Preload / postload components● Reduce DOM size● Domain sharding● Reduce cookie size● Optimize images● CSS Spr...
http://bit.ly/Tcqxt8
Départ Départ :● Start render : 5s● Render article : 7s http://www.webpagetest.org/video/compare.php?tests=121019_CG_b761c...
À vous
TODO● Concaténer CS● (pas de police)● (pas de redirection)● Tester sans JS
TODOhttp://www.webpagetest.org/result/121031_ef8a9887f8a90150e8a50873c574d48f/
TODO Travail sur le JavaScript● Concaténer par modules● Nuke document.write()● Exécution asynchrone● Chargement et exécuti...
Gérer le cache● La base :   • Gestion fine des URL   • Headers correctement mis● Aller plus loin :   • Détourner localStor...
Moins de requêtes La base● Sprites          ● CSS3● Icônes unicode   ● Base64 Aller plus loin● Inline JS/CSS      ● SPDY, ...
Le poids La base● Gzip, minify● Compression des images● Lazy load Aller plus loin● Se passer des grosses librairies● HMTL5...
Se méfier● Domain sharding : fini● Scripts en bas de page : inutile● Tout inline ou tout external ?● CDN : insignifiant● R...
Responsive Web Design Critiqué :● Trop de choses chargées● Difficile à maintenir Site dédié mobile :● Permet de se lâcher●...
ConclusionLes techniques classiques :● Marchent globalement bien● Peuvent être dangereuses● Ne vont pas encore assez loin ...
Upcoming SlideShare
Loading in...5
×

Les performances Web mobile

950

Published on

Slides support de la conférence sur les performances Web sur mobile, donnée pendant les ateliers Paris Web 2012

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
950
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Les performances Web mobile"

  1. 1. La performance sur mobiles Jean-pierre VINCENT
  2. 2. Qui ça ? Jean-pierre VINCENTbraincracking.org@theystolemynick12 ans de WebConsultant, formateur, auteur
  3. 3. Importance ?● 32 millions de forfaits data● +80% de volume● 10% du trafic sur sites standards
  4. 4. Usage ?● Maison, travail, déplacement,magasin...● Mails, recherche, réseau social...● Infos produits, chercher unendroit, voyages, news http://services.google.com/fh/files/blogs/our_mobile_planet_france_fr.pdf
  5. 5. Exigences● 1S = -10% de pages vues● 60% attendent 4s max● les sites se chargent en 12shttp://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. 6. Débits théoriques
  7. 7. Vraie moyenne + 25% de perte ?
  8. 8. Quelle différence ? http://bit.ly/S2ZYll
  9. 9. La volatilité
  10. 10. Objectifs● Affichage rapide : • News • Comparateurs • Voyage • Vidéo● Interface fluide • Applications • Formulaires • Recherches
  11. 11. Comment tester✗ Émulateurs • Connexion sans faille • Charger une page : 50% plus rapide • Exécution JS : 90% plus rapide
  12. 12. Comment tester Mobile perf bookmarklethttp://stevesouders.com/mobileperf/mobileperfbkm.php
  13. 13. Comment tester Wifi => tcpdump => .pcap => .har=> HAR viewerhttp://code.google.com/p/pcaphar/wiki/CaptureMobileTraffics
  14. 14. Comment tester http://webpagetest.org/
  15. 15. Comment tester Wifi sur mobile +● Proxy Charles● Trickle (Linux)● Network Link Conditioner (OSX 10.6)● Slowy app (OSX 10.5)
  16. 16. Comment debug● Stoyan Icy● Chrome iOS● SocketBug
  17. 17. Comment debug● Opera Dragonfly● Firefox Remote Debugger● Chrome Remote Debugging● IOS 6 : enfin natif
  18. 18. Charger
  19. 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. 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. 21. http://bit.ly/Tcqxt8
  22. 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. 23. À vous
  24. 24. TODO● Concaténer CS● (pas de police)● (pas de redirection)● Tester sans JS
  25. 25. TODOhttp://www.webpagetest.org/result/121031_ef8a9887f8a90150e8a50873c574d48f/
  26. 26. TODO Travail sur le JavaScript● Concaténer par modules● Nuke document.write()● Exécution asynchrone● Chargement et exécution au scroll • Pubs invisibles • Widgetshttps://github.com/jpvincent/LazyLoadLight - https://github.com/jpvincent/onAreaVisible
  27. 27. Gérer le cache● La base : • Gestion fine des URL • Headers correctement mis● Aller plus loin : • Détourner localStorage • Utiliser appCache Manifest
  28. 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. 29. Le poids La base● Gzip, minify● Compression des images● Lazy load Aller plus loin● Se passer des grosses librairies● HMTL5 History
  30. 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. 31. Responsive Web Design Critiqué :● Trop de choses chargées● Difficile à maintenir Site dédié mobile :● Permet de se lâcher● Contenu minimal approprié àlusage● Seule le V de MVC est à refaire
  32. 32. ConclusionLes techniques classiques :● Marchent globalement bien● Peuvent être dangereuses● Ne vont pas encore assez loin Débat ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×