Performance Web - retour d'expérience par Jean-Pierre Vincent

Faire en sorte que ses pages s'affichent plus vite dans toutes les situations, c'est une spécialité de développeur Web parfois techniquement très complexe.
À travers ce retour d'expérience sur un gros site international, on va voir qu'avec peu de techniques et beaucoup de méthode, on peut améliorer sensiblement l'expérience utilisateurs.

Transcript

1. Performances Web Retour d'expérience client
2. Bonjour, je m’appelle Jean-Pierre l 13 ans de Web l PHP, JavaScript, HTML5, CSS l Ex : • startups, Yahoo!, houra.fr l Expert frontend indépendant l Veilleur : • braincracking.org • @theystolemynick
3. Performances Web ? Performances classiques : – Tenir la charge – Haute disponibilité – 80 % pour l'admin Performances Frontend : – Accélérer l'affichage d'une page – 80 % pour le développeur
4. La perception du temps • 0 - 100 ms : réaction instantanée • 100 - 300 ms : réaction lente • 300 ms – 1 s : la machine travaille • 1 s – 10 s : perte d'attention • + 10s : parti …
5. Combien coûte une seconde ?
6. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
7. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
8. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
9. Combien coûte une seconde ? Search l Bing : 1 s = l - 3 % de CA l Yahoo! : 1 s = l + 10 % de rebond Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
10. 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
11. Performances Web Retour d'expérience client
12. 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é.
13. Objectifs - HP
14. Objectifs - tracking
15. Objectifs Pages trop simples ! Chargement déjà très satisfaisant JP =>
16. Mesurer - RUM Mesures de vrais utilisateurs Temps longs confirmés ! (Cool, j'ai du travail)
17. Utilisateurs 10 000 Km 6 000 Km 9 600 Km 16 000 Km 6000 Km Serveurs marseillais
18. Utilisateurs 200 ms (H.K.) 280 ms 100 ms 200 ms 380 ms 150 ms 800 ms ! Serveurs marseillais
19. Chantier Webperf • Fixer des objectifs • Mesurer pour l'utilisateur • Coder ! • Surveiller
20. Objectifs L'utilisateur type (Chine, IE 8) • accède à la fonctionnalité (Focus champs tracking) • en moins de 5 secondes Les visiteurs distants (Brésil, Australie) • voient la HP (textes et image principale) • en moins de 5 secondes
21. Mesure synthétique • Installation WebPageTest • Simulation stable • Contention réseau • Navigateurs réels • Environnements de Dev, integ, preprod, prod…
22. • Le problème devient visible de tous • Le développement peut commencer Mesure synthétique
23. Les solutions universelles La configuration du serveur HTTP • Configuration du keep-alive – KeepAlive On – KeepAliveTimeout 5 – Timeout 10 • Activation de la compression (gzip, deflate) – 80 % du poids des JS / CSS / HTML
24. Les solutions universelles Gérer le cache client
25. Gains Sur la page Tracking souvent visitée Chargement ÷ 5
26. Les solutions universelles • Déblayer le chemin critique WTF ?_? Le serveur a renvoyé la page L'utilisateur voit quelque chose
27. Le chemin critique Chemin critique 1er rendu
28. Le chemin critique • Redirections • CSS • Polices • JavaScript
29. Le chemin critique Beaucoup de stratégies possibles. Globalement, cibler: HTML + CSS + JS + Fonts En 6 requêtes MAX
30. Le chemin critique Résultat HP, après « Bundling » • 1er Rendu : - 4 secondes • Onload : - 5 secondes
31. Futur - CDN Origine Origine Origine CDN CDN CDN
32. Futur - images • 45 % du poids à gagner • Outils : compilation d'outils avec ImageOptim
33. 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
34. Outils d'analyse Pour les enfants : ySlow PageSpeed
35. Outils d'analyse Pour les guerriers : WebPageTest
36. Surveiller Maintenir la performance dans le temps WPT Monitor https://github.com/jpvincent/WPT-server
37. 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é.
38. Questions ? Viens jouer : • Braincracking.org • @theystolemynick
39. S'auto-former En anglais En français l http://www.perfplanet.com/ l http ://developer.yahoo.com/performan ce/rules.html l https:// developers.google.com/speed/docs/ best-practices/rules_intro l http:// www.webpagetest.org/forums l http ://checklists.opquast.com/webperf/ l https://groups.google.com/forum/?fr omgroups#!forum/performance-web l @webperf_fr l et l @WebperfParis l https://github.com/edas/webperf-book l http://braincracking.org
40. Crédits l http://www.flickr.com/photos/themonnie/2495892146 l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/ l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/