Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

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

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

3. Sommaire Introduction Comprendre Mesurer Améliorer 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 ? Référencement Satisfaction internautes Contenu important visible plus rapidement Diminuer les coûts d'hébergement / BP Bonnes pratiques de désign / intégration QOS

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 base Start Render Document Complete FullyLoaded Request Bytes In

11. Comment fonctionnent nos navigateurs ? Latence (Round Trip Time) Connexions simultanées 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 généré avec Webpagetest

16. Mesurer les performances ? En local :

18. Filtres par type de fichier

19. Détails des requêtes

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

22. Yslow ScoreYslow (Plugin Firebug)

24. PageSpeed Score / Yslow RankPageSpeed /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) Très précis pour le javascript Beaucoup de possibilités Version premium payante http://ajax.dynatrace.com/

28. Chrome Speed Tracer Sur la version de dév de Chrome Reflow/Repaint Très précis mais complexe Adapté aux applications « Ajax »

29. Mesurer les performances ? A distance :

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

44. Android 2.2, 2.3

45. Vidéo + Waterfall …

46. Accessible via l’onglet Mobile de WebPageTest

49. Implémente PageSpeed / Yslow et Webpagetest

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

52. YottaaOptimizer

53. Waterfall + Time To Title

55. 3)Comment améliorer les performances ? Quelques pistes:

56. Diminuer le nombre de requêtes HTTP

57. Sprites CSS Regrouper plusieurs images en une seule, et les positionner via CSS

58. Images => CSS Remplacer les images de dégradé (pngtocss)et les bords arrondis par des équivalents CSS 3 https://github.com/bluesmoon/pngtocss

59. Regroupement CSS et Js intelligent Regrouper les multiples Js et Css en fonction du rubriquage de votre site.

60. Cache HTTP / Expires Définir une durée de cache pour chaque élément de vos sites : Ex : ExpiresByType dans la conf Apache http://httpd.apache.org/docs/2.0/mod/mod_expires.html

61. Javascript : Optimisation et blocage Utilisez FireBug / Speed Tracer / Dynatrace pour optimiser votre code Javascript. Eviter les scripts JsInline autant que possible ou regroupez les en fin de page. Utilisez des sélecteurs efficaces. Evitez les balises <script> dans le <head>, et préférez les avant le </body>

62. Javascript externe : Asynchrone Charger les scripts qui le permettent en Asynchrone afin de ne pas bloquer le chargement des autres éléments. var e = document.createElement('script’);e.async= true;e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js’;document.getElementById('fb-root').appendChild(e);

63. Optimisation et positionnement CSS Utilisez PageSpeed pour modifier les sélecteurs non optimisés. Réduisez la taille de vos feuilles de style au maximum.

64. CookieLess Domain Utilisez des domaines sans cookie pour délivrer les contenus statiques.

65. Domain Sharding Pour une meilleure parallélisation, utilisez plusieurs domaines pour délivrer les contenus statiques

66. Lazyloading Ne charger certains contenus que lorsque l’utilisateur peut le visualiser.

67. Compression Gzip / Keep-Alive Gzip permet de gagner 70% sur la taille des éléments de la page. Le keep-alive permet l’établissement de connexions permanentes.

68. Compression CSS et Javascript Pour le JS : Closure Compiler, YUICompressor http://code.google.com/intl/fr-FR/closure/compiler/ , http://developer.yahoo.com/yui/compressor/ Pour les CSS : CssCompressor (PHP) https://github.com/codenothing/css-compressor/

69. Compression des images Jpg/Png OptiPng / Jpegtran / Pngcrush / Smush.it / ImageMagick …

70. Widgets ou scripts Tiers Attention à l’intégration des widgets Facebook, Twitter, ou tags Adsense & co …Lazyload / Cron … http://stevesouders.com/p3pc/

71. Commentaires conditionnels IE Paralleliser les CSS sur IE en cas de commentairesconditionnels dans le <head>  => 0,2s gagnée sur le StartRender http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/

72. Feuille de style Print Ajouter la CSS print dans la CSS globale avec : @media print { … }

73. Pour continuer :

74. HTTP Archive : le standard Viewer : http://code.google.com/p/harviewer/ Format : http://groups.google.com/group/http-archive-specification Supporté par : http://groups.google.com/group/http-archive-specification/web/har-adopters?hl=en

75. HTTP Archive : le site Statistiques diverses sur les performances Web récoltées via les mesures publiques WebPageTest http://www.httparchive.org

76. Pour continuer Nouvelle métrique : Abovethe Fold Time (AFT) sur WPT. Google Analytics (mesures des performances) Service d’optimization : Strangeloop / Yottaa / Blaze.io / CloudFlare / Torbit … Audit de performances

77. Conclusion/Thanks to WebperfGuru’s : StoyanStefanov / Steve Souders Webperf Fr : Eric Daspet @edasfr, Vincent Voyer @zeroload & many more Le Webperf Group Fr : https://groups.google.com/group/performance-web?hl=fr #webperf sur Twitter EvenFasterWebsites (Livre) High Performance Websites (Livre) …

78. Follow me on Twitter @kenny_dee

Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

Ähnlich wie Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End (20)

Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End