Initiation WebPerf : Comprendre et optimiser la vitesse d'affichage Front-End

Conférence donnée à la Ferme du Web (en 2011).
Comprendre, Mesurer et améliorer les performances Web de son site.

Transcript

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 1. Comprendre 2. Mesurer 3. 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é Source : http://www.webperformancetoday.com/ 2011/04/20/desktop-vs-mobile-web-page-load- speed/ Web 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é }  « Any pause before responding to a simple question "does this dress make me look big ?" qualifies the inevitable response "absolutely not" as less certain. » 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 } Fully Loaded } 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 sur http://www.browserscope.org
13. Cuzillon Tester des combinaisons Js/Css/image/iframe … http://stevesouders.com/cuzillion/
14. 2) Mesurer les performances web :
15. Waterfall Charts Exemple généré avec Webpagetest
16. Mesurer les performances ? En local :
17. Onglet Réseau : •  Waterfall complet •  Filtres par type de fichier •  Détails des requêtes •  http://www.firebug.net Firebug (Plugin Firefox)
18. Onglet Yslow de Firebug : •  Best practices Webperf •  Yslow Score Yslow (Plugin Firebug)
19. •  Best Pratices Webperf •  PageSpeed Score / Yslow Rank PageSpeed / Yslow
20. Payant. Fonctionne avec IE et Firefox Windows only … HTTPWatch
21. Windows only Pas lié à un navigateur : capture le traffic web Waterfall Charts http://www.fiddler2.com/ Fiddler
22. Dynatrace Ajax Windows uniquement (IE/FF) Très précis pour le javascript Beaucoup de possibilités Version premium payante http://ajax.dynatrace.com/
23. Chrome Speed Tracer Sur la version de dév de Chrome Reflow/Repaint Très précis mais complexe Adapté aux applications « Ajax »
24. Mesurer les performances ? A distance :
25. WebPageTest.org •  La référence incontestable dans le domaine. •  Crée par @patmeenan (désormais chez Google) http://www.lafermeduweb.net/tutorial/web- page-test-auditez-les-performances-de-votre- site-web-42.html
26. WebPageTest.org •  Waterfall charts très complet (et paramétrable) •  Graphique par connexion Http •  Multi Browser : •  IE (6/7/8/9) + Dynatrace, Chrome 11, Chrome Frame 11 IE 6 •  Génération de vidéo •  Comparaison visuelle et vidéo entre plusieurs tests •  Grand choix de location : Paris / Dulles / Londres / HongKong … •  Scripting (navigation / clic / formulaire …) •  Blocking : permet de bloquer la pub, les Js, des scripts tiers, des domaines etc … •  Résultâts ultra-complets (par type de ressources, par domaine) •  Screenshots des tests •  Intégration pagespeed, yslow et différent conseils pour optimiser la page testée
27. Comparaison Vidéo WebPageTest.org
28. Blaze.io Mobile •  Iphone 4.3 •  Android 2.2, 2.3 •  Vidéo + Waterfall … •  Accessible via l’onglet Mobile de WebPageTest •  http://www.blaze.io/mobile/
29. W3C Validator Mobile Respect des standards Priorisation des erreurs rencontrées http://validator.w3.org/mobile/
30. ShowSlow •  Peut être installé sur son serveur •  Implémente PageSpeed / Yslow et Webpagetest •  Pratique pour l’automation (Selenium IDE / Selenium RC / Firebug / Netexport …) •  http://www.showslow.com
31. Yottaa.com •  Cloud •  Yottaa Optimizer •  Waterfall + Time To Title •  http://www.yottaa.com
32. Mesurer les performances Voir aussi : }  Pingdom, Yottaa,Gxmetric… }  WebPageTest Monitoring }  ShowSlow + Automation (Selenium RC) + Firebug + NetExport }  PageSpeed Online }  …
33. 3) Comment améliorer les performances ? Quelques pistes:
34. Diminuer le nombre de requêtes HTTP
35. Sprites CSS Regrouper plusieurs images en une seule, et les positionner via CSS
36. Images => CSS https://github.com/bluesmoon/ pngtocss Remplacer les images de dégradé (pngtocss) et les bords arrondis par des équivalents CSS 3
37. Regroupement CSS et Js intelligent Regrouper les multiples Js et Css en fonction du rubriquage de votre site.
38. 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
39. Javascript : Optimisation et blocage Utilisez FireBug / Speed Tracer / Dynatrace pour optimiser votre code Javascript. Eviter les scripts Js Inline 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>
40. 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);
41. 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.
42. CookieLess Domain Utilisez des domaines sans cookie pour délivrer les contenus statiques.
43. Domain Sharding Pour une meilleure parallélisation, utilisez plusieurs domaines pour délivrer les contenus statiques
44. Lazyloading Ne charger certains contenus que lorsque l’utilisateur peut le visualiser.
45. 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.
46. 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 : Css Compressor (PHP) https://github.com/codenothing/css-compressor/
47. Compression des images Jpg/Png OptiPng / Jpegtran / Pngcrush / Smush.it / ImageMagick …
48. Widgets ou scripts Tiers Attention à l’intégration des widgets Facebook, Twitter, ou tags Adsense & co … Lazyload / Cron … http://stevesouders.com/p3pc/
49. Commentaires conditionnels IE Paralleliser les CSS sur IE en cas de commentaires conditionnels dans le <head> <!--[if IE]><![endif]--> => 0,2s gagnée sur le StartRender http://webforscher.wordpress.com/ 2010/05/20/ie-6-slowing-down-ie-8/
50. Feuille de style Print Ajouter la CSS print dans la CSS globale avec : @media print { … }
51. Pour continuer :
52. 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
53. HTTP Archive : le site Statistiques diverses sur les performances Web récoltées via les mesures publiques WebPageTest http://www.httparchive.org
54. Pour continuer } Nouvelle métrique : Above the Fold Time (AFT) sur WPT. } Google Analytics (mesures des performances) } Service d’optimization : Strangeloop / Yottaa / Blaze.io / CloudFlare / Torbit … } Audit de performances
55. Conclusion/Thanks to }  Webperf Guru’s : Stoyan Stefanov / 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 }  Even Faster Websites (Livre) }  High Performance Websites (Livre) }  …
56. Follow me on Twitter @kenny_dee