Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Les performances Web mobile

1,796 views

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
  • Be the first to comment

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 ?

×