• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web UX - Performance Web
 

Web UX - Performance Web

on

  • 5,194 views

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'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/

Statistics

Views

Total Views
5,194
Views on SlideShare
4,502
Embed Views
692

Actions

Likes
8
Downloads
68
Comments
2

19 Embeds 692

http://lanyrd.com 252
http://www.buzz-and-play.com 141
http://flavors.me 137
http://blog.piaction.com 43
http://gasteroprod.com 40
http://www.scoop.it 32
http://agregat.flavors.me 17
http://www.linkedin.com 5
https://twitter.com 4
http://coderwall.com 4
url_unknown 3
http://feeds.feedburner.com 3
http://twitter.com 2
http://blog.pia-conseil.com 2
http://doc.nicolaspaic.fr 2
http://paper.li 2
http://de.flavors.me 1
http://gasteroprod.dev 1
http://fr.flavors.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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/
    Are you sure you want to
    Your message goes here
    Processing…
  • On parle beaucoup de cette étude amazon sur le CA, quelle en est la source exacte?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web UX - Performance Web Web UX - Performance Web Presentation Transcript

    • Performance  Web  Nicolas  Hoizey  Co-­‐fondateur  &  directeur  technique  Clever  Age  @nhoizey  
    • Le  visage  du  Web  change  
    • Les  débits  augmentent*…   Fibre  opDque   100  Mbps   *  Pour  certains  privilégiés  
    • …les  pages  grossissent  
    • Mais  les  apparences   sont  trompeuses  
    • Le  Web  ne  Dre  pas  profit  du  débit  
    • 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  
    • L u;lisateur  n aime  pas   a<endre  
    • Etude  Akamai  en  2009  47%  des  clients  e-­‐commerce   veulent  la  page  en  2s   4s  en  2006   8s  en  1999  
    • Expérience  pour  CA  au  Glasgow  Caledonian  University   Site  peu  performant     ConcentraDon  +50%   AgitaDon,  stress  
    • Amazon.com  Page  +100  ms   CA  -­‐1%   En  2006  
    • Microso_  Bing  Page  +1s      CA  -­‐2,8%  
    • 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  »  !  
    • Plus  que  la  performance  réelle,  c’est  sa  percep;on  qui  compte  !  
    • La  percepDon  de  la  vitesse   réelle   espérée   perçue   +15%  mémorisée   +35%   @stoyanstefanov  
    • 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  
    • La  cascade,  base  de  travail  
    • FNAC.fr  
    • FNAC.fr  Serveur  5%   Client  95%  
    • FNAC.fr   hnp://cas.im/wpt-­‐fnac-­‐110202    
    • DécomposiDon  d une  requête   Connexion   Anente  de   TCP   la  réponse   DNS   Chargement   de  la  réponse  
    • 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  
    • FNAC.fr   Document   Complete   ~  7,7s   Start   Render   ~  1,8s  
    • Amazon.fr   hnp://cas.im/wpt-­‐amazon-­‐110202     Document   Complete   ~  4,3s   Start   Render   ~  1,75s  
    • FNAC.fr  vs  Amazon.fr  
    • Le  «  Start  render  »  n est  pas   un  indicateur  suffisant  
    • FNAC.fr  vs  Amazon.fr  
    • FNAC.fr  vs  Amazon.fr  
    • FNAC.fr  vs  Amazon.fr  
    • FNAC.fr  vs  Amazon.fr  
    • 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  
    • 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/  
    • 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  
    • Quelques  ou;ls  
    • 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  
    • webpagetest.org  
    • 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  
    • Les  navigateurs   IE9  Developer  Tools   Chrome  +  Speed  Tracer  Webkit  Developer  Tools   Firefox  +  Firebug  
    • 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  
    • 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  
    • Google  Pagespeed  Online  
    • Google  Webmaster  Tools  
    • Et  les  autres…  
    • OuDls  d’opDmisaDon  •  Les  architectes  et  développeurs  !  •  Beaucoup  d arDsanat   –  IdenDfier  les  faiblesses   –  Prioriser  les  acDons   –  Trouver  les  ouDls   –  Industrialiser  
    • 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  
    • 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  
    • Au  travail  !  
    • 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  
    • 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  
    • Réduire  le  nombre  de  requêtes  DNS  •  Limiter  le  nombre  de  domaines  uDlisés   –  Chaque  domaine  implique  une  requête  DNS  
    • 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é  
    • Réduire  le  nombre  de  requêtes  •  Concaténer  les  codes  JavaScript  et  CSS   6  JS  -­‐>  1  JS  
    • Réduire  le  nombre  de  requêtes  •  Combiner  les  images  sous  forme  de  sprites    •  AnenDon  à  l’accessibilité  
    • 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  
    • 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  
    • 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  !  
    • 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  
    • 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  »  
    • 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  
    • 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  »  
    • OpDmiser  le  rendu  du  navigateur  •  Nenoyer  les  CSS  et  JS  du  code  inuDle  •  Tenir  compte  des  performances   –  des  CSS   –  de  JavaScript   –  des  frameworks  JavaScript  
    • AnenDon  aux  ressources  externes  •  Ressources  provenant  de  Ders   –  OuDls  de  staDsDques   –  Régies  publicitaires   –  Widgets  de  partenaires  •  hnp://stevesouders.com/p3pc/  
    • Il  faut  pra;quer  pour   progresser  !  
    • 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  
    • 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  
    • 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    
    • 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  
    • A  vous  de  jouer  !  Illustrations : hnp://iwdrm.tumblr.com/  &  hnp://fromme-­‐toyou.tumblr.com/  
    • 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.
    • Chiffres clefs90 collaborateurs!sur 4 agencesCroissance régulière! et rentableG3+!Banque de France
    • 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/
    • 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/
    • Applications mobiles
    • 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