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.

Accélération des pages Web : les bases en exemple

1,529 views

Published on

Il y a plusieurs centaines de techniques pour accélérer ses pages côté client, mais à travers ce retour d'expérience nous allons voir qu'en ayant simplement appliqué les bases on a pu diviser les temps d'affichage utilisateur par 5.

Présenté à la soirée Webperf de novembre 2013

Published in: Technology
  • Be the first to comment

Accélération des pages Web : les bases en exemple

  1. 1. Les soirées Performance Auto-organisées Irrégulières Ateliers ou conférences
  2. 2. La WebPerf en France @WebPerfParis @webperf_fr Google Group : performance-web http://www.webperf-france.net/ diigo web performance
  3. 3. Bonjour, je m’appelle Jean-Pierre l l l l l 13 ans de Web PHP, JavaScript, HTML5, CSS Ex : ● startups, Yahoo!, houra.fr Expert frontend indépendant Veilleur : ● braincracking.org ● @theystolemynick
  4. 4. Performance Web ? Les 14 premiers commandements http://developer.yahoo.com/pe rformance/rules.html
  5. 5. Performances Web ? Performances classiques : – – Tenir la charge Haute disponibilité Performances Frontend : – Accélérer l'affichage d'une page
  6. 6. Passer des règles aux outils Règles ● ● ● ● ● Yahoo! Best Practices (35 règles) Google PageSpeed (31 règles) Test Opquast (41 règles) … Jusqu'à 400+ pratiques ● Outils ● Analyse réseau ● Profiling ● Bonnes pratiques ● Monitoring ● RUM ● Intégration continue
  7. 7. Combien coûte une seconde ?
  8. 8. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
  9. 9. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
  10. 10. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
  11. 11. Combien coûte une seconde ? Search l l l l Bing : 1 s = - 3 % de CA Yahoo! : 1 s = + 10 % de rebond Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
  12. 12. Combien coûte une seconde ? Mobile l 1 s = -10% de pages vues l Après 4 s : 60% d'abandon / 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
  13. 13. Chantier Webperf Retour d'expérience client
  14. 14. Chantier Webperf ● Fixer des objectifs ● Mesurer pour l'utilisateur ● Coder ! ● Surveiller
  15. 15. Objectifs L'utilisateur type (Chine, IE 8) ● accède à la fonctionnalité (Focus champs tracking) ● en moins de 5 secondes Les visiteurs distants ● voient la HP ● en moins de 2 secondes (Brésil, Australie) (textes et image principale)
  16. 16. Objectifs - HP
  17. 17. Objectifs - tracking
  18. 18. Objectifs Pages trop simples ! Chargement déjà très satisfaisant JP =>
  19. 19. Mesurer Mesures de vrais utilisateurs Temps longs confirmés ! (Cool, j'ai du travail)
  20. 20. Utilisateurs 10 000 Km Serveurs 6 000 Km 9 600 Km 16 000 Km 6000 Km marseillais
  21. 21. Utilisateurs 200 ms (H.K.) 280 ms 100 ms 200 ms 380 ms 150 ms 800 ms ! Serveurs marseillais
  22. 22. Mesure synthétique ● Installation WebPageTest ● Simulation stable ● Contention réseau ● Navigateurs réels ● Environnements de Dev, integ, preprod, prod…
  23. 23. Mesure synthétique ● Le problème devient visible de tous ● Le développement peut commencer
  24. 24. Les solutions universelles La configuration du serveur HTTP ● Configuration du keep-alive – – – ● KeepAlive On KeepAliveTimeout 5 Timeout 10 Activation de la compression (gzip, deflate)
  25. 25. Les solutions universelles Gérer le cache client
  26. 26. Le cache utilisateur ● « vide ton cache » Sans cache : ● ● Phases de recette interne Environnements de développement Cache agressif : ● Cache utilisateur ● Chaîne de cache réseau
  27. 27. Le cache utilisateur Comment invalider un cache client ? Méthode standard : – Header eTag ou Last-Modified Méthode performante : – – – – Cache long URL change avec la version du fichier Maîtrise totale des URL Processus de compilation
  28. 28. Le cache utilisateur À surveiller automatiquement
  29. 29. Gains Sur la page Tracking souvent visitée Chargement ÷ 5
  30. 30. Les solutions universelles ● Déblayer le chemin critique Le serveur a renvoyé la page WTF ?_ ? L'utilisateur voit quelque chose
  31. 31. Le chemin critique Chemin critique 1er rendu
  32. 32. Le chemin critique ● Redirections ● CSS ● Polices ● JavaScript
  33. 33. Le chemin critique ● Redirections ● 1 max ● Jamais côté client ● Surtout sur mobile
  34. 34. Le chemin critique CSS ● Regrouper (2 max) ● Minifier
  35. 35. Le chemin critique JavaScript ● Minifier ● Regrouper (ou pas) ● 5 manières de le charger
  36. 36. Le chemin critique Polices ● Limiter en poids ● Limiter en nombre ● Asynchrones
  37. 37. Le chemin critique Beaucoup de stratégies possibles. Globalement, cibler: HTML + CSS + JS + Fonts En 6 requêtes MAX
  38. 38. Le chemin critique Résultat HP, après « Bundling » ● 1er Rendu : - 4 secondes ● Onload : - 5 secondes
  39. 39. Surveiller Maintenir la performance dans le temps WPT Monitor https://github.com/jpvincent/WPT-server
  40. 40. Outils d'analyse Pour les enfants : ySlow PageSpeed
  41. 41. Outils d'analyse Pour les guerriers : WebPageTest
  42. 42. Conclusion ● ● Il y a plusieurs centaines de techniques. Les techniques principales font déjà gagner beaucoup. ● S'équiper en outils pour les autres. ● Avoir des process pour maintenir la qualité.
  43. 43. Questions ? Viens jouer : ● Braincracking.org ● @theystolemynick
  44. 44. S'auto-former En anglais l l l l http://www.perfplanet.com/ http ://developer.yahoo.com/performan ce/rules.html https:// developers.google.com/speed/docs/ best-practices/rules_intro http:// www.webpagetest.org/forums En français l l l l l l l http ://checklists.opquast.com/webperf/ https://groups.google.com/forum/?fr omgroups#!forum/performance-web @webperf_fr et @WebperfParis https://github.com/edas/webperf-book http://braincracking.org
  45. 45. Crédits l l l http://www.flickr.com/photos/themonnie/2495892146 http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/ http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/

×