1.
Initiation WebPerf<br />Comprendre et optimiser la vitesse d’affichage Front-End<br />

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

3.
Sommaire<br />Introduction<br />Comprendre<br />Mesurer<br />Améliorer<br />Conclusion / Questions<br />

4.
Les performances Web :<br />Introduction<br />

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

6.
Pourquoi ?<br />Référencement<br />Satisfaction internautes<br />Contenu important visible plus rapidement<br />Diminuer les coûts d'hébergement / BP<br />Bonnes pratiques de désign / intégration<br />QOS<br />

7.
Crédibilité<br />« Anypause beforeresponding to a simple question "doesthisdressmake me look big ?" qualifies the inevitableresponse"absolutelynot" as lesscertain. »<br />Source : http://radar.oreilly.com/2011/04/why-speed-matters.html<br />

8.
Speed Matters !<br />Tout le monde est concerné !<br />

9.
1)Comprendre les performances Web<br />

10.
Les métriques de base<br />Start Render<br />Document Complete<br />FullyLoaded<br />Request<br />Bytes In<br />

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

12.
BrowserScope<br />Comparatif navigateurs surhttp://www.browserscope.org<br />

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

14.
2)Mesurer les performances web :<br />

15.
WaterfallCharts<br />Exemple généré avec Webpagetest<br />

16.
Mesurer les performances ?<br />En local :<br />

17.
Onglet Réseau :<br /><ul><li>Waterfall complet

18.
Filtres par type de fichier

19.
Détails des requêtes

20.
http://www.firebug.net</li></ul>Firebug (Plugin Firefox)<br />

21.
Onglet Yslow de Firebug :<br /><ul><li>Best practices Webperf

22.
Yslow Score</li></ul>Yslow (Plugin Firebug)<br />

23.
<ul><li>Best PraticesWebperf

24.
PageSpeed Score / Yslow Rank</li></ul>PageSpeed /Yslow<br />

25.
Payant.<br />Fonctionne avec IE et Firefox<br />Windows only …<br />HTTPWatch<br />

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

27.
Dynatrace Ajax<br />Windows uniquement (IE/FF)<br />Très précis pour le javascript<br />Beaucoup de possibilités<br />Version premium payante<br />http://ajax.dynatrace.com/<br />

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

29.
Mesurer les performances ?<br />A distance :<br />

30.
WebPageTest.org<br /><ul><li>La 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.html</li></li></ul><li>WebPageTest.org<br /><ul><li>Waterfallcharts 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 </li></li></ul><li>Comparaison Vidéo WebPageTest.org<br />

43.
Blaze.ioMobile<br /><ul><li>Iphone 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/</li></li></ul><li>W3C Validator Mobile<br />Respect des standards<br />Priorisation des erreurs rencontrées<br />http://validator.w3.org/mobile/<br />

48.
ShowSlow<br /><ul><li>Peut ê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.com</li></li></ul><li>Yottaa.com<br /><ul><li>Cloud

52.
YottaaOptimizer

53.
Waterfall + Time To Title

54.
http://www.yottaa.com</li></li></ul><li>Mesurer les performances <br />Voir aussi: <br />Pingdom, Yottaa,Gxmetric… <br />WebPageTest Monitoring<br />ShowSlow+ Automation (Selenium RC) + Firebug+ NetExport<br />PageSpeed Online<br />…<br />

55.
3)Comment améliorer les performances ?<br />Quelques pistes:<br />

56.
Diminuer le nombre de requêtes HTTP<br />

57.
Sprites CSS<br />Regrouper plusieurs images en une seule, et les positionner via CSS<br />

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

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

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

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

62.
Javascript externe : Asynchrone<br />Charger les scripts qui le permettent en Asynchrone afin de ne pas bloquer le chargement des autres éléments.<br />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);<br />

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

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

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

66.
Lazyloading<br />Ne charger certains contenus que lorsque l’utilisateur peut le visualiser.<br />

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

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

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

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

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

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

73.
Pour continuer :<br />

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

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

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

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

78.
Follow me on Twitter<br />@kenny_dee <br />