Your SlideShare is downloading. ×
0
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

872

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 …

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
872
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Les soirées Performance Auto-organisées Irrégulières Ateliers ou conférences
  • 2. La WebPerf en France @WebPerfParis @webperf_fr Google Group : performance-web http://www.webperf-france.net/ diigo web performance
  • 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. Performance Web ? Les 14 premiers commandements http://developer.yahoo.com/pe rformance/rules.html
  • 5. Performances Web ? Performances classiques : – – Tenir la charge Haute disponibilité Performances Frontend : – Accélérer l'affichage d'une page
  • 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. Combien coûte une seconde ?
  • 8. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
  • 9. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
  • 10. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
  • 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. 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. Chantier Webperf Retour d'expérience client
  • 14. Chantier Webperf ● Fixer des objectifs ● Mesurer pour l'utilisateur ● Coder ! ● Surveiller
  • 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. Objectifs - HP
  • 17. Objectifs - tracking
  • 18. Objectifs Pages trop simples ! Chargement déjà très satisfaisant JP =>
  • 19. Mesurer Mesures de vrais utilisateurs Temps longs confirmés ! (Cool, j'ai du travail)
  • 20. Utilisateurs 10 000 Km Serveurs 6 000 Km 9 600 Km 16 000 Km 6000 Km marseillais
  • 21. Utilisateurs 200 ms (H.K.) 280 ms 100 ms 200 ms 380 ms 150 ms 800 ms ! Serveurs marseillais
  • 22. Mesure synthétique ● Installation WebPageTest ● Simulation stable ● Contention réseau ● Navigateurs réels ● Environnements de Dev, integ, preprod, prod…
  • 23. Mesure synthétique ● Le problème devient visible de tous ● Le développement peut commencer
  • 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. Les solutions universelles Gérer le cache client
  • 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. 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. Le cache utilisateur À surveiller automatiquement
  • 29. Gains Sur la page Tracking souvent visitée Chargement ÷ 5
  • 30. Les solutions universelles ● Déblayer le chemin critique Le serveur a renvoyé la page WTF ?_ ? L'utilisateur voit quelque chose
  • 31. Le chemin critique Chemin critique 1er rendu
  • 32. Le chemin critique ● Redirections ● CSS ● Polices ● JavaScript
  • 33. Le chemin critique ● Redirections ● 1 max ● Jamais côté client ● Surtout sur mobile
  • 34. Le chemin critique CSS ● Regrouper (2 max) ● Minifier
  • 35. Le chemin critique JavaScript ● Minifier ● Regrouper (ou pas) ● 5 manières de le charger
  • 36. Le chemin critique Polices ● Limiter en poids ● Limiter en nombre ● Asynchrones
  • 37. Le chemin critique Beaucoup de stratégies possibles. Globalement, cibler: HTML + CSS + JS + Fonts En 6 requêtes MAX
  • 38. Le chemin critique Résultat HP, après « Bundling » ● 1er Rendu : - 4 secondes ● Onload : - 5 secondes
  • 39. Surveiller Maintenir la performance dans le temps WPT Monitor https://github.com/jpvincent/WPT-server
  • 40. Outils d'analyse Pour les enfants : ySlow PageSpeed
  • 41. Outils d'analyse Pour les guerriers : WebPageTest
  • 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. Questions ? Viens jouer : ● Braincracking.org ● @theystolemynick
  • 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. 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/

×