Web UX - Performance Web

Download Web UX - Performance Web

Post on 05-Dec-2014

5.486 views

Category:

Technology

5 download

Embed Size (px)

DESCRIPTION

L'utilisateur n'aime pas attendre. Sa perception de la vitesse d'un site Web a donc une influence sur son comportement. Cette perception peut tre oriente positivement en travaillant intelligemment l'optimisation des performances ct client du site Web. Le premier rflexe quand on parle de performances Web est de se tourner vers des tests de monte en charge et des optimisations ct serveur, alors que l'optimisation des performances ct client peut tre plus simple, plus efficace, et plus rentable. Nous aborderons dans cette confrence les diffrents aspects de l'optimisation ct client des performances Web, en attirant l'attention sur par exemple les tlchargements bloquants, les manires optimales d'inclure le code JavaScript et CSS, et leur impact sur les performances perues par les internautes. Voir sur Lanyrd : http://lanyrd.com/2011/webux/sddff/

TRANSCRIPT

<ul><li> 1. Performance Web Nicolas Hoizey Co-fondateur &amp; directeur technique Clever Age @nhoizey </li> <li> 2. Le visage du Web change </li> <li> 3. Les dbits augmentent* Fibre opDque 100 Mbps * Pour certains privilgis </li> <li> 4. les pages grossissent </li> <li> 5. Mais les apparences sont trompeuses </li> <li> 6. Le Web ne Dre pas prot du dbit </li> <li> 7. La mobilit prend de l ampleur Bande passante faible, variable et instable Faiblesses intrinsques des navigateurs mobiles Faible puissance de calcul pour le rendu Faible puissance de calcul pour le JavaScript Taille rduite du cache </li> <li> 8. L u;lisateur n aime pas a</li><li> 9. Etude Akamai en 2009 47% des clients e-commerce veulent la page en 2s 4s en 2006 8s en 1999 </li> <li> 10. Exprience pour CA au Glasgow Caledonian University Site peu performant ConcentraDon +50% AgitaDon, stress </li> <li> 11. Amazon.com Page +100 ms CA -1% En 2006 </li> <li> 12. Microso_ Bing Page +1s CA -2,8% </li> <li> 13. Google Search Page +0,4 s Recherches par uDlisateur -0,76% Aprs arrt de l exprience Toujours -0,21% Pas de retour la normale ! </li> <li> 14. Plus que la performance relle, cest sa percep;on qui compte ! </li> <li> 15. La percepDon de la vitesse relle espre perue +15% mmorise +35% @stoyanstefanov </li> <li> 16. Avec un site plus rapide Les visiteurs reviennent Ils regardent plus de pages chaque visite AmlioraDon de la sa;sfac;on uDlisateur Meilleur taux de conversion Plus de chire d aaires Economies d infrastructure (hardware et BP) Meilleur posi;onnement chez Google </li> <li> 17. La cascade, base de travail </li> <li> 18. FNAC.fr </li> <li> 19. FNAC.fr Serveur 5% Client 95% </li> <li> 20. FNAC.fr hnp://cas.im/wpt-fnac-110202 </li> <li> 21. DcomposiDon d une requte Connexion Anente de TCP la rponse DNS Chargement de la rponse </li> <li> 22. DcomposiDon d une requte Requte DNS Etablissement de la connexion Envoi de la requte du client vers le serveur Calcul de la page ct serveur Pour ce qui est dynamique Envoi de la rponse du serveur vers le client Calcul du rendu HTML + CSS Traitements dynamiques JavaScript, expressions CSS </li> <li> 23. FNAC.fr Document Complete ~ 7,7s Start Render ~ 1,8s </li> <li> 24. Amazon.fr hnp://cas.im/wpt-amazon-110202 Document Complete ~ 4,3s Start Render ~ 1,75s </li> <li> 25. FNAC.fr vs Amazon.fr </li> <li> 26. Le Start render n est pas un indicateur susant </li> <li> 27. FNAC.fr vs Amazon.fr </li> <li> 28. FNAC.fr vs Amazon.fr </li> <li> 29. FNAC.fr vs Amazon.fr </li> <li> 30. FNAC.fr vs Amazon.fr </li> <li> 31. Above the Fold Time The fold Linralement, le pli La ligne de onaison du site AFT (tentaDve de dterminer) quand toute la parDe visible du site est ache Un dlai cl foncDon du dbit Une classicaDon pixels dynamiques / staDques A uDliser avec prcauDon </li> <li> 32. W3C : Resource Timing InstrumentaDon intgre aux navigateurs Travaux de Microso_ et Google Working Dra_ depuis le 24 mai 2011 ! hnp://www.w3.org/TR/2011/WD-resource-Dming-20110524/ </li> <li> 33. Que mesurer ? Chargement sans cache, premire visite Important pour capter de nouveaux visiteurs Chargement avec cache opDmal, nouvelle visite sur une mme page LuDlisateur sanend rcuprer la page instantanment Chargement avec cache parDel, en cours de navigaDon 96% des pages vues </li> <li> 34. Quelques ou;ls </li> <li> 35. Quelques ouDls Dirents types d ouDls VricaDon de la cascade Audit de suivi de bonnes praDques et recommandaDons OpDmisaDon AnenDon, ce ne sont que des ouDls La percep;on humaine et le bon sens doivent rester de rigueur </li> <li> 36. webpagetest.org </li> <li> 37. webpagetest.org La rfrence WebPagetest : Projet AOL mis en open source De IE6 IE9, Chrome en cours Des serveurs partout dans le monde Direntes bandes passantes Largement paramtrable Rsultats dtaills et expliqus Enregistrement vido ExprimentaDon AFT </li> <li> 38. Les navigateurs IE9 Developer Tools Chrome + Speed Tracer Webkit Developer Tools Firefox + Firebug </li> <li> 39. Yahoo! YSlow Extension de Firebug dveloppe par Yahoo! hnp://developer.yahoo.com/yslow/ Analyse la page et dtermine l usage des bonnes praDques 23 critres Donne un grade de A F Donne des recommandaDons Voyages-sncf.com </li> <li> 40. Google Pagespeed Dirents ouDls dvelopps par Google hnp://code.google.com/intl/fr/speed/page- speed/ Une extension pour Firebug, similaire Yslow Analyse la page et donne une note Donne des recommandaDons </li> <li> 41. Google Pagespeed Online </li> <li> 42. Google Webmaster Tools </li> <li> 43. Et les autres </li> <li> 44. OuDls dopDmisaDon Les architectes et dveloppeurs ! Beaucoup d arDsanat IdenDer les faiblesses Prioriser les acDons Trouver les ouDls Industrialiser </li> <li> 45. Google mod_pagespeed Un module pour Apache, automaDsant l applicaDon de certaines bonnes praDques hnp://code.google.com/intl/fr/speed/page- speed/docs/module.html 15 ltres Seulement 9 acDfs par dfaut Les 6 autres uDliser avec prudence </li> <li> 46. Microso_ Doloto Download time opDmizer hnp://research.microso_.com/en-us/projects/doloto/ OuDl ddi aux applicaDons uDlisant beaucoup de code JavaScript / Ajax Processus opraDonnel Analyse des uDlisaDons du code Dcoupage des foncDons entre code ncessaire au lancement et code uDlis ultrieurement Chargement dynamique selon les besoins </li> <li> 47. Au travail ! </li> <li> 48. Eviter les requtes inuDles Eviter les redirecDons Pas derreur 404 dans les ressources lies Pas de ressources lies non uDlises </li> <li> 49. Rduire la latence Rduire la latence rseau Rapprocher le client du serveur CDN Content Delivery Network PerDnent en cas de public internaDonal </li> <li> 50. Rduire le nombre de requtes DNS Limiter le nombre de domaines uDliss Chaque domaine implique une requte DNS </li> <li> 51. Rduire le nombre de requtes Exploiter le cache du navigateur Congurer le serveur pour indiquer la date de prempDon des ressources Le navigateur ne demandera la ressource que si elle a expir </li> <li> 52. Rduire le nombre de requtes Concatner les codes JavaScript et CSS 6 JS -&gt; 1 JS </li> <li> 53. Rduire le nombre de requtes Combiner les images sous forme de sprites AnenDon laccessibilit </li> <li> 54. Rduire le nombre de requtes Passez tout de suite au slide suivant Intgrer du JS ou CSS au HTML Uniquement si gain de performance consquent A rserver aux landing pages Fait perdre la mise en cache des JS ou CSS externes Intgrer des images au CSS, JS ou HTML UDlisaDon des data:uri Encodage en base64 </li> <li>...</li></ul>