Ce document aborde la compréhension et l'optimisation des performances web front-end, mettant en avant l'importance de la vitesse d'affichage pour le référencement et la satisfaction des utilisateurs. Il propose des méthodes pour mesurer et améliorer ces performances, en utilisant divers outils et bonnes pratiques, telles que la réduction des requêtes HTTP et l'optimisation du JavaScript. La conclusion souligne l'importance de l'audit régulier et des services d'optimisation pour maintenir de bonnes performances web.

1. Initiation WebPerfComprendre et optimiser la vitesse d’affichage Front-End

2. Qui suis-je ?Kenny DITS : Responsable Etude et Développement chez M6WebTwitter: @kenny_dee

3. SommaireIntroductionComprendreMesurerAméliorerConclusion / Questions

4. Les performances Web :Introduction

5. Etats des lieuxPerf Back-End15% du temps passé3% du temps passéPerf Front-End85% du temps passé97% du temps passéWebSource : http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/Mobile

6. Pourquoi ?RéférencementSatisfaction internautesContenu important visible plus rapidementDiminuer les coûts d'hébergement / BPBonnes pratiques de désign / intégrationQOS

7. Crédibilité« 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 métriques de baseStart RenderDocument CompleteFullyLoadedRequestBytes In

11. Comment fonctionnent nos navigateurs ?Latence (Round Trip Time)Connexions simultanées par domaineFonctionnement CSS / JS…Voir BrowserScope.org

12. BrowserScopeComparatif navigateurs surhttp://www.browserscope.org

13. CuzillonTester des combinaisons Js/Css/image/iframe …http://stevesouders.com/cuzillion/

14. 2)Mesurer les performances web :

15. WaterfallChartsExemple généré avec Webpagetest

16. Mesurer les performances ?En local :

17. Onglet Réseau :Waterfall complet

18. Filtres par type de fichier

19. Détails des requêtes

20. http://www.firebug.netFirebug (Plugin Firefox)

21. Onglet Yslow de Firebug :Best practices Webperf

22. Yslow ScoreYslow (Plugin Firebug)

23. Best PraticesWebperf

24. PageSpeed Score / Yslow RankPageSpeed /Yslow

25. Payant.Fonctionne avec IE et FirefoxWindows only …HTTPWatch

26. Windows onlyPas lié à un navigateur : capture le traffic webWaterfallChartshttp://www.fiddler2.com/Fiddler

27. Dynatrace AjaxWindows uniquement (IE/FF)Très précis pour le javascriptBeaucoup de possibilitésVersion premium payantehttp://ajax.dynatrace.com/

28. Chrome Speed TracerSur la version de dév de ChromeReflow/RepaintTrès précis mais complexeAdapté aux applications « Ajax »

29. Mesurer les performances ?A distance :

30. WebPageTest.orgLa référence incontestable dans le domaine.

31. Crée par @patmeenan (désormais chez Google)http://www.lafermeduweb.net/tutorial/web-page-test-auditez-les-performances-de-votre-site-web-42.htmlWebPageTest.orgWaterfallcharts très complet (et paramétrable)

32. Graphique par connexion Http

33. Multi Browser :

34. IE (6/7/8/9) + Dynatrace, Chrome 11, Chrome Frame 11 IE 6

35. Génération de vidéo

36. Comparaison visuelle et vidéo entre plusieurs tests

37. Grand choix de location : Paris / Dulles / Londres / HongKong …

38. Scripting (navigation / clic / formulaire …)

39. Blocking : permet de bloquer la pub, les Js, des scripts tiers, des domaines etc …

40. Résultâts ultra-complets (par type de ressources, par domaine)

41. Screenshots des tests

42. Intégration pagespeed, yslow et différent conseils pour optimiser la page testée Comparaison Vidéo WebPageTest.org

43. Blaze.ioMobileIphone 4.3

44. Android 2.2, 2.3

45. Vidéo + Waterfall …

46. Accessible via l’onglet Mobile de WebPageTest

47. http://www.blaze.io/mobile/W3C Validator MobileRespect des standardsPriorisation des erreurs rencontréeshttp://validator.w3.org/mobile/

48. ShowSlowPeut être installé sur son serveur

49. Implémente PageSpeed / Yslow et Webpagetest

50. Pratique pour l’automation (Selenium IDE / Selenium RC / Firebug / Netexport …)

51. http://www.showslow.comYottaa.comCloud