1. Initiation WebPerf
Comprendre et optimiser la vitesse daffichage Front-End

2. Qui suis-je ?
Kenny DITS : Responsable Etude et Dveloppement chez M6Web
Twitter: @kenny_dee

3. Sommaire
Introduction
Comprendre
Mesurer
Amliorer
Conclusion / Questions

4. Les performances Web :
Introduction

5. Etats des lieux
Perf Back-End
15% du temps pass
3% du temps pass
Perf Front-End
85% du temps pass
97% du temps pass
Web
Source : http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
Mobile

6. Pourquoi ?
Rfrencement
Satisfaction internautes
Contenu important visible plus rapidement
Diminuer les cots d'hbergement / BP
Bonnes pratiques de dsign / intgration
QOS

7. Crdibilit
Anypause beforeresponding to a simple question "doesthisdressmake me look big ?" qualifies the inevitableresponse"absolutelynot" as lesscertain.
Source : http://radar.oreilly.com/2011/04/why-speed-matters.html

8. Speed Matters !
Tout le monde est concern !

9. 1)Comprendre les performances Web

10. Les mtriques de base
Start Render
Document Complete
FullyLoaded
Request
Bytes In

11. Comment fonctionnent nos navigateurs ?
Latence (Round Trip Time)
Connexions simultanes par domaine
Fonctionnement CSS / JS

Voir BrowserScope.org

12. BrowserScope
Comparatif navigateurs surhttp://www.browserscope.org

13. Cuzillon
Tester des combinaisons Js/Css/image/iframe http://stevesouders.com/cuzillion/

14. 2)Mesurer les performances web :

15. WaterfallCharts
Exemple gnr avec Webpagetest

16. Mesurer les performances ?
En local :

17. Onglet Rseau :

• Waterfall complet
• 18. Filtres par type de fichier
• 19. Dtails des requtes
• 20. http://www.firebug.net

Firebug (Plugin Firefox)

21. Onglet Yslow de Firebug :

• Best practices Webperf
• 22. Yslow Score

Yslow (Plugin Firebug)

23.

• Best PraticesWebperf
• 24. PageSpeed Score / Yslow Rank

PageSpeed /Yslow

25. Payant.
Fonctionne avec IE et Firefox
Windows only
HTTPWatch

26. Windows only
Pas li un navigateur : capture le traffic web
WaterfallCharts
http://www.fiddler2.com/
Fiddler

27. Dynatrace Ajax
Windows uniquement (IE/FF)
Trs prcis pour le javascript
Beaucoup de possibilits
Version premium payante
http://ajax.dynatrace.com/

28. Chrome Speed Tracer
Sur la version de dv de Chrome
Reflow/Repaint
Trs prcis mais complexe
Adapt aux applications Ajax

29. Mesurer les performances ?
A distance :

30. WebPageTest.org

• La rfrence incontestable dans le domaine.
• 31. Cre par @patmeenan (dsormais chez Google)http://www.lafermeduweb.net/tutorial/web-page-test-auditez-les-performances-de-votre-site-web-42.html