Web UX - Performance Web

6 839 vues

Publié le

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 orientée positivement en travaillant intelligemment l'optimisation des performances côté client du site Web.

Le premier réflexe quand on parle de performances Web est de se tourner vers des tests de montée en charge et des optimisations côté serveur, alors que l'optimisation des performances côté client peut être plus simple, plus efficace, et plus rentable.

Nous aborderons dans cette conférence les différents aspects de l'optimisation côté client des performances Web, en attirant l'attention sur – par exemple – les téléchargements bloquants, les manières optimales d'inclure le code JavaScript et CSS, et leur impact sur les performances perçues par les internautes.

Voir sur Lanyrd : http://lanyrd.com/2011/webux/sddff/

Publié dans : Technologie
3 commentaires
8 j’aime
Statistiques
Remarques
  • @bricef A propos du lien entre la performance du site d’Amazon et l’impact sur le CA de ce dernier, il semble que la source soit une étude menée en 2006 par l'université de Stanford : https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-29.ppt
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • C'est Greg Linden, un ex-Amazon.com qui a donné l'info : http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/amazon-100ms-faster-1-revenue-increase/
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • On parle beaucoup de cette étude amazon sur le CA, quelle en est la source exacte?
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
6 839
Sur SlideShare
0
Issues des intégrations
0
Intégrations
812
Actions
Partages
0
Téléchargements
80
Commentaires
3
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web UX - Performance Web

  1. 1. Performance  Web  Nicolas  Hoizey  Co-­‐fondateur  &  directeur  technique  Clever  Age  @nhoizey  
  2. 2. Le  visage  du  Web  change  
  3. 3. Les  débits  augmentent*…   Fibre  opDque   100  Mbps   *  Pour  certains  privilégiés  
  4. 4. …les  pages  grossissent  
  5. 5. Mais  les  apparences   sont  trompeuses  
  6. 6. Le  Web  ne  Dre  pas  profit  du  débit  
  7. 7. La  mobilité  prend  de  l ampleur  •  Bande  passante  faible,  variable  et  instable  •  Faiblesses  intrinsèques  des  navigateurs   mobiles   –  Faible  puissance  de  calcul  pour  le  rendu   –  Faible  puissance  de  calcul  pour  le  JavaScript   –  Taille  réduite  du  cache  
  8. 8. L u;lisateur  n aime  pas   a<endre  
  9. 9. Etude  Akamai  en  2009  47%  des  clients  e-­‐commerce   veulent  la  page  en  2s   4s  en  2006   8s  en  1999  
  10. 10. Expérience  pour  CA  au  Glasgow  Caledonian  University   Site  peu  performant     ConcentraDon  +50%   AgitaDon,  stress  
  11. 11. Amazon.com  Page  +100  ms   CA  -­‐1%   En  2006  
  12. 12. Microso_  Bing  Page  +1s      CA  -­‐2,8%  
  13. 13. Google  Search   Page  +0,4  s  Recherches  par  uDlisateur  -­‐0,76%     Après  arrêt  de  l expérience   Toujours  -­‐0,21%   Pas  de  retour  à  la  «  normale  »  !  
  14. 14. Plus  que  la  performance  réelle,  c’est  sa  percep;on  qui  compte  !  
  15. 15. La  percepDon  de  la  vitesse   réelle   espérée   perçue   +15%  mémorisée   +35%   @stoyanstefanov  
  16. 16. Avec  un  site  plus  rapide  •  Les  visiteurs  reviennent  •  Ils  regardent  plus  de  pages  à  chaque  visite  •  AmélioraDon  de  la  sa;sfac;on  uDlisateur  •  Meilleur  taux  de  conversion  •  Plus  de  chiffre  d affaires  •  Economies  d infrastructure  (hardware  et  BP)  •  Meilleur  posi;onnement  chez  Google  
  17. 17. La  cascade,  base  de  travail  
  18. 18. FNAC.fr  
  19. 19. FNAC.fr  Serveur  5%   Client  95%  
  20. 20. FNAC.fr   hnp://cas.im/wpt-­‐fnac-­‐110202    
  21. 21. DécomposiDon  d une  requête   Connexion   Anente  de   TCP   la  réponse   DNS   Chargement   de  la  réponse  
  22. 22. DécomposiDon  d une  requête  •  Requête  DNS  •  Etablissement  de  la  connexion  •  Envoi  de  la  requête  du  client  vers  le  serveur  •  Calcul  de  la  page  côté  serveur   –  Pour  ce  qui  est  dynamique  •  Envoi  de  la  réponse  du  serveur  vers  le  client  •  Calcul  du  rendu   –  HTML  +  CSS  •  Traitements  dynamiques   –  JavaScript,  expressions  CSS  
  23. 23. FNAC.fr   Document   Complete   ~  7,7s   Start   Render   ~  1,8s  
  24. 24. Amazon.fr   hnp://cas.im/wpt-­‐amazon-­‐110202     Document   Complete   ~  4,3s   Start   Render   ~  1,75s  
  25. 25. FNAC.fr  vs  Amazon.fr  
  26. 26. Le  «  Start  render  »  n est  pas   un  indicateur  suffisant  
  27. 27. FNAC.fr  vs  Amazon.fr  
  28. 28. FNAC.fr  vs  Amazon.fr  
  29. 29. FNAC.fr  vs  Amazon.fr  
  30. 30. FNAC.fr  vs  Amazon.fr  
  31. 31. Above  the  Fold  Time  •  The  fold   –  Linéralement,  «  le  pli  »   –  La  «  ligne  de  flonaison  »  du  site  •  AFT   –  (tentaDve  de  déterminer)  quand   toute  la  parDe  visible  du  site  est   affichée   –  Un  délai  clé  foncDon  du  débit   –  Une  classificaDon  pixels   dynamiques  /  staDques  •  A  uDliser  avec  précauDon  
  32. 32. W3C  :  Resource  Timing  •  InstrumentaDon  intégrée  aux  navigateurs   –  Travaux  de  Microso_  et  Google  •  Working  Dra_  depuis  le  24  mai  2011  !   –  hnp://www.w3.org/TR/2011/WD-­‐resource-­‐Dming-­‐20110524/  
  33. 33. Que  mesurer  ?  •  Chargement  sans  cache,  première  visite   –  Important  pour  capter  de  nouveaux  visiteurs  •  Chargement  avec  cache  opDmal,  nouvelle  visite  sur  une   même  page   –  L’uDlisateur  s’anend  à  récupérer  la  page  instantanément  •  Chargement  avec  cache  parDel,  en  cours  de  navigaDon   –  96%  des  pages  vues  
  34. 34. Quelques  ou;ls  
  35. 35. Quelques  ouDls  •  Différents  types  d ouDls   –  VérificaDon  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  
  36. 36. webpagetest.org  
  37. 37. webpagetest.org  •  La  référence   –  WebPagetest  :  Projet  AOL  mis  en  open  source   –  De  IE6  à  IE9,  Chrome  en  cours   –  Des  serveurs  partout  dans  le  monde     –  Différentes  bandes  passantes   –  Largement  paramétrable   –  Résultats  détaillés  et  expliqués   –  Enregistrement  vidéo   –  ExpérimentaDon  AFT  
  38. 38. Les  navigateurs   IE9  Developer  Tools   Chrome  +  Speed  Tracer  Webkit  Developer  Tools   Firefox  +  Firebug  
  39. 39. Yahoo!  YSlow  •  Extension  de  Firebug  développée   par  Yahoo!   –  hnp://developer.yahoo.com/yslow/  •  Analyse  la  page  et  détermine   l usage  des  bonnes  praDques   –  23  critères   –  Donne  un  «  grade  »  de  A  à  F   –  Donne  des  recommandaDons   Voyages-­‐sncf.com  
  40. 40. Google  Pagespeed  •  Différents  ouDls  développés  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  
  41. 41. Google  Pagespeed  Online  
  42. 42. Google  Webmaster  Tools  
  43. 43. Et  les  autres…  
  44. 44. OuDls  d’opDmisaDon  •  Les  architectes  et  développeurs  !  •  Beaucoup  d arDsanat   –  IdenDfier  les  faiblesses   –  Prioriser  les  acDons   –  Trouver  les  ouDls   –  Industrialiser  
  45. 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  filtres   –  Seulement  9  acDfs  par  défaut   –  Les  6  autres  à  uDliser  avec  prudence  
  46. 46. Microso_  Doloto  •  Download  time  opDmizer   –  hnp://research.microso_.com/en-­‐us/projects/doloto/  •  OuDl  dédié  aux  applicaDons  uDlisant  beaucoup   de  code  JavaScript  /  Ajax  •  Processus  opéraDonnel   –  Analyse  des  uDlisaDons  du  code   –  Découpage  des  foncDons  entre  code  nécessaire  au   lancement  et  code  uDlisé  ultérieurement   –  Chargement  dynamique  selon  les  besoins  
  47. 47. Au  travail  !  
  48. 48. Eviter  les  requêtes  inuDles  •  Eviter  les  redirecDons  •  Pas  d’erreur  404  dans  les  ressources  liées  •  Pas  de  ressources  liées  non  uDlisées  
  49. 49. Réduire  la  latence  •  Réduire  la  latence  réseau     –  Rapprocher  le  client  du  serveur   –  CDN   •  Content  Delivery  Network   –  PerDnent  en  cas  de  public  internaDonal  
  50. 50. Réduire  le  nombre  de  requêtes  DNS  •  Limiter  le  nombre  de  domaines  uDlisés   –  Chaque  domaine  implique  une  requête  DNS  
  51. 51. Réduire  le  nombre  de  requêtes  •  Exploiter  le  cache  du  navigateur   –  Configurer  le  serveur  pour  indiquer  la  date  de   pérempDon  des  ressources   –  Le  navigateur  ne  demandera  la  ressource  que  si   elle  a  expiré  
  52. 52. Réduire  le  nombre  de  requêtes  •  Concaténer  les  codes  JavaScript  et  CSS   6  JS  -­‐>  1  JS  
  53. 53. Réduire  le  nombre  de  requêtes  •  Combiner  les  images  sous  forme  de  sprites    •  AnenDon  à  l’accessibilité  
  54. 54. Réduire  le  nombre  de  requêtes  •  Passez  tout  de  suite  au  slide  suivant…  •  Intégrer  du  JS  ou  CSS  au  HTML   –  Uniquement  si  gain  de  performance  conséquent   •  A  réserver  aux  «  landing  pages  »   –  Fait  perdre  la  mise  en  cache  des  JS  ou  CSS   externes  •  Intégrer  des  images  au  CSS,  JS  ou  HTML   –  UDlisaDon  des  data:uri   –  Encodage  en  base64  
  55. 55. Réduire  le  poids  des  requêtes  •  Compresser  tout   –  Gzip   –  Gain  de  50  à  80%  !  •  Minifier  les  sources  HTML,  JavaScript  et  CSS   –  Suppression  des  caractères  inuDles,  blancs,   commentaires,  opDmisaDon  de  la  syntaxe  
  56. 56. Réduire  le  poids  des  requêtes  •  Réduire  le  poids  des  images   –  Suppression  des  métadonnées  inuDles  (EXIF,  IPTC)   –  Choix  des  bons  formats   •  GIF   •  JPEG  :  quelle  compression  ?   •  PNG  :  quel  format  ?  8,  24,  32   –  Jusqu à  90%  de  gain  !  
  57. 57. Réduire  le  poids  des  requêtes  •  Eviter  les  cookies  inuDles   –  Les  cookies  alourdissent  les  requêtes  vers  le   serveur  •  Si  possible,  servir  les  ressources  staDques   depuis  un  domaine  sans  aucun  cookie  
  58. 58. RéparDr  sur  plusieurs  domaines  •  Les  navigateurs  ont  une  limite  de   téléchargements  simultanés  PAR  DOMAINE   –  2  requêtes  selon  HTTP/1.1   –  6  à  8  en  praDque  dans  tous  les  navigateurs  en   dernières  versions   –  AnenDon,  2  dans  IE6  &  IE7  •  Mise  en  place  de  plusieurs  domaines   –  «  Domain  sharding  »  
  59. 59. RéparDr  sur  plusieurs  domaines  •  Téléchargements  en  parallèle  •  Si  trop  de  domaines   –  Trop  de  requêtes  DNS  •  Consensus  pour  2  à  4  domaines  selon  usages  
  60. 60. OpDmiser  le  rendu  du  navigateur  •  Ordonnancer  le  chargement  des  ressources   –  HTML  et  CSS  au  plus  vite   •  OpDmisaDon  du  «  start  render  »   •  Eviter  le  «  reflow  »  avec  des  CSS  tardives   •  Flush  de  HTML  parDel   –  JavaScript  le  plus  tard  possible   •  Le  JS  bloque  le  chargement  pendant  son  exécuDon   –  Différer  le  chargement  des  ressources  qui  ne  sont   pas  uDles  au  départ   •  «  lazy  loading  »  
  61. 61. OpDmiser  le  rendu  du  navigateur  •  Nenoyer  les  CSS  et  JS  du  code  inuDle  •  Tenir  compte  des  performances   –  des  CSS   –  de  JavaScript   –  des  frameworks  JavaScript  
  62. 62. AnenDon  aux  ressources  externes  •  Ressources  provenant  de  Ders   –  OuDls  de  staDsDques   –  Régies  publicitaires   –  Widgets  de  partenaires  •  hnp://stevesouders.com/p3pc/  
  63. 63. Il  faut  pra;quer  pour   progresser  !  
  64. 64. Profiter  du  webperf  contest  •  WebPerf  Contest  2010   –  Concours  internaDonal   •  hnp://webperf-­‐contest.com/   •  Novembre  2010   –  ObjecDf   •  OpDmisaDon  d une  page  Web   •  Fournie  par  la  FNAC   •  hnp://entries.webperf-­‐contest.com/   base-­‐fnac-­‐_w/index.html  
  65. 65. Profiter  du  webperf  contest  •  Bilans  très  instrucDfs   –  hnp://braincracking.org/2011/01/10/concours-­‐ webperf-­‐2010-­‐les-­‐bases/   –  hnp://www.yterium.net/Ma-­‐parDcipaDon-­‐au-­‐ Webperf  
  66. 66. Avant  Start  Render        :  2.441  s  Document  Complete    :  11.028  s  Fully  Loaded        :  17.261  s   Après   Start  Render        :  1.639  s   Document  Complete    :  1.214  s   Fully  Loaded        :  6.083  s    
  67. 67. Une  veille  permanente  •  Dans  la  vraie  vie   –  Evénements  du  Web  Perf  User  Group   hnp://cas.im/webperf-­‐user-­‐group  •  Sur  Diigo   –  Groupe  Web  Performance   hnp://groups.diigo.com/group/web-­‐performance  •  Sur  Twiner   –  Suivre  le  compte  @webperf_fr  
  68. 68. A  vous  de  jouer  !  Illustrations : hnp://iwdrm.tumblr.com/  &  hnp://fromme-­‐toyou.tumblr.com/  
  69. 69. Clever Age! cFondée en 2001 par des managers expérimentés, Clever Age est aujourdhui un acteurincontournable dans le domaine du conseil et de la réalisation de projets. Lidée directrice qui aconduit à cette création et qui prévaut aujourdhui encore est lindépendance, aussi bien vis-à-visdes éditeurs que des investisseurs.
  70. 70. Chiffres clefs90 collaborateurs!sur 4 agencesCroissance régulière! et rentableG3+!Banque de France
  71. 71. Références internet et e-CommerceRezulteo LVMH – DIOR PCD Fnac Market Place!http://www.rezulteo-pneu.fr/ http://beauty.dior.com/ http://goo.gl/vzZA ! M6 Groupe MACSF http://www.groupem6.fr/! Nouvelles Frontières http://www.macsf.fr http://www.m6mobile.fr/ http://www.nouvelles-frontieres.fr/
  72. 72. Références internet et e-Commerce Vet Affaires Atelier BNP Paribas Mondial Assistance US! http://www.vetaffaires.fr/ http://www.atelier.net/ http://www.mondial-assistance.us ! Aéroport de Bordeaux Saint Gobain! Siplec – Groupe E. Leclerchttp://www.bordeaux.aeroport.fr/ http://www.saint-gobain.com/ http://www.siplec.com/
  73. 73. Applications mobiles
  74. 74. Conseil en architecture techniqueChoix dune solution Portail / CMS pour lensemble des projetsinternet / extranet / intranet du groupeConseil fonctionnel et technique pour la réalisation!dune application de gestion des sinistres (assurances) puisréalisation de lapplication (JEE / EJB / Symfony)Mission Accompagnement POC et Processus e-Commercedans le cadre du chantier de refonte du site internet APECAccompagnement dans la définition et la mise en oeuvre dunearchitecture SOA dans le cadre de la refonte globale (Back-office et end-user)Choix dune architecture Portail / CMS / eCommerce pour legroupe et ses filiales

×