Améliorer les performances WebLes optimisations côté client8 février 2011Nicolas HOIZEY            nhoizey@clever-age.comD...
LA	  PERFORMANCE	  PAIE	  
Amazon.com	  Page	  +100	  ms	     CA	  -­‐1%	                           En	  2006	  
Microso:	  Bing	  Page	  +1s	  	  	  CA	  -­‐2,8%	  
Google	  Search	            Page	  +0,4	  s	  Recherches	  par	  uFlisateur	  -­‐0,76%	     Après	  arrêt	  de	  l’expérie...
Les	  débits	  augmentent*…	      Fibre	  opFque	        100	  Mbps	                             *	  Pour	  certains	  pri...
…mais	  le	  Web	  n’en	  Fre	  pas	  profit	  
…et	  les	  pages	  grossissent	  
La	  mobilité	  prend	  de	  l’ampleur	  •  Bande	  passante	  faible	  et	  variable	  •  Faiblesses	  intrinsèques	  des...
Avec	  un	  site	  plus	  rapide	  •    Les	  visiteurs	  reviennent	  •    Ils	  regardent	  plus	  de	  pages	  à	  chaq...
Sujet	  d’ampleur	  croissante,	  frémissements	  en	  France	  •  WebPerf	  Contest	  2010	     –  Concours	  internaFona...
LA	  CASCADE,	  BASE	  DE	  TRAVAIL	  
FNAC.fr	  
FNAC.fr	  Serveur	  5%	                              Client	  95%	  
DécomposiFon	  d’une	  requête	                       Connexion	     Adente	  de	                          TCP	        la	...
FNAC.fr	                hdp://cas.im/wpt-­‐fnac-­‐110202	  
Amazon.fr	     hdp://cas.im/wpt-­‐amazon-­‐110202	  
LE	  «	  START	  RENDER	  »	  N’EST	  PAS	  TOUT	  !	  
FNAC.fr	  vs	  Amazon.fr	  hdp://www.youtube.com/watch?v=TUxB7JIcXvo	  
OUTILS	  D’AUDIT	  DANS	  LES	  NAVIGATEURS	  
IE9	  Developer	  Tools	  
Firefox	  +	  Firebug	  
Webkit	  Developer	  Tools	  
Chrome	  +	  Speed	  Tracer	  
RéférenFels	  de	  bonnes	  praFques	  •  FoncFonnalités	  ajoutées	  aux	  navigateurs	     –  Yahoo!	  YSlow	     –  Goo...
Yahoo!	  YSlow	  •  Extension	  de	  Firebug	  développée	     par	  Yahoo!	      –  hdp://developer.yahoo.com/yslow/	  • ...
Google	  Pagespeed	  •  Différents	  ouFls	  développés	  par	  Google	      –  hdp://code.google.com/intl/fr/speed/page-­‐...
OUTILS	  D’AUDIT	  EN	  LIGNE	  
webpagetest.org	  
webpagetest.org	  •  La	  référence	      –  WebPagetest	  :	  Projet	  AOL	  mis	  en	  open	  source	      –  De	  IE6	 ...
Google	  Webmaster	  Tools	  
OUTILS	  D’OPTIMISATION	  
Les	  architectes	  et	  développeurs	  !	  •  Beaucoup	  d’arFsanat	     –  IdenFfier	  les	  faiblesses	     –  Prioriser...
Microso:	  Doloto	  •  Download	  time	  opFmizer	      –  hdp://research.microso:.com/en-­‐us/projects/doloto/	  •  OuFl	...
Google	  mod_pagespeed	  •  Un	  module	  pour	  Apache,	  automaFsant	     l’applicaFon	  de	  certaines	  bonnes	  praFq...
GAGNONS	  DU	  TEMPS	  !	  
Eviter	  les	  requêtes	  inuFles	  •  Eviter	  les	  redirecFons	  •  Pas	  d’erreur	  404	  dans	  les	  ressources	  li...
Réduire	  la	  latence	  •  Réduire	  la	  latence	  réseau	  	      –  Rapprocher	  le	  client	  du	  serveur	      –  C...
Réduire	  le	  nombre	  de	  requêtes	  DNS	  •  Limiter	  le	  nombre	  de	  domaines	  uFlisés	     –  Chaque	  domaine	...
Réduire	  le	  nombre	  de	  requêtes	  •  Exploiter	  le	  cache	  du	  navigateur	      –  Configurer	  le	  serveur	  po...
Réduire	  le	  nombre	  de	  requêtes	  •  Concaténer	  les	  codes	  sources	  JavaScript	  et	  CSS	                    ...
Réduire	  le	  nombre	  de	  requêtes	  •  Combiner	  les	  images	  sous	  forme	  de	  sprites	  
Réduire	  le	  poids	  des	  requêtes	  •  Compresser	  tout	      –  Gzip	      –  Gain	  de	  50	  à	  80%	  !	  •  Mini...
Réduire	  le	  poids	  des	  requêtes	  •  Réduire	  le	  poids	  des	  images	      –  Suppression	  des	  métadonnées	  ...
Réduire	  le	  poids	  des	  requêtes	  •  Eviter	  les	  cookies	  inuFles	      –  Les	  cookies	  alourdissent	  les	  ...
RéparFFon	  des	  ressources	  sur	               plusieurs	  domaines	  •  Les	  navigateurs	  ont	  une	  limite	  de	  ...
RéparFFon	  des	  ressources	  sur	              plusieurs	  domaines	  •  Téléchargements	  en	  parallèle	  •  Si	  trop...
OpFmiser	  le	  rendu	  du	  navigateur	  •  Ordonnancer	  le	  chargement	  des	  ressources	     –  HTML	  et	  CSS	  au...
OpFmiser	  le	  rendu	  du	  navigateur	  •  Nedoyer	  les	  CSS	  et	  JS	  du	  code	  inuFle	  •  Tenir	  compte	  des	...
AdenFon	  aux	  ressources	  externes	  •  Ressources	  provenant	  de	  Fers	     –  OuFls	  de	  staFsFques	     –  Régi...
PRATIQUER	  
Profiter	  du	  webperf	  contest	  •  Bilan	  très	  instrucFf	      –  hdp://braincracking.org/2011/01/10/concours-­‐    ...
Avant	  Start	  Render	   	   	     	  :	  2.441	  s	  Document	  Complete	          	  :	  11.028	  s	  Fully	  Loaded	  ...
Une	  veille	  permanente	  •  Dans	  la	  vraie	  vie	      –  Evénements	  du	  Web	  Perf	  User	  Group	         hdp:/...
Clever Age!                                              cFondée en 2001 par des managers expérimentés, Clever Age est auj...
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://...
Références internet et e-CommerceVet Affaires                         Atelier BNP Paribas                      Mondial Ass...
Applications mobiles
Conseil en architecture techniqueChoix dune solution Portail / CMS pour lensemble des projetsinternet / extranet / intrane...
Améliorer les performances Web - Les optimisations côté client
Améliorer les performances Web - Les optimisations côté client
Prochain SlideShare
Chargement dans…5
×

Améliorer les performances Web - Les optimisations côté client

7 793 vues

Publié le

Quand on parle d'optimiser les performances d'un site Web, le premier réflexe est de se tourner vers des tests de montée en charge et des optimisations côté serveur. Bien que celles-ci ne soient pas à négliger, si on se limite aux actions « server side » on risque de passer à côté d'une série de points à surveiller et à améliorer côté client.

Dans cette session, nous introduirons les différents aspects de l'optimisation « client side » des performances Web, en attirant votre attention sur – par exemple – les téléchargements bloquants, les manières optimales d'inclure des codes JavaScript, le placement optimal des CSS (internes ou externes, …) ainsi que des différentes et particularités des différents navigateurs, et leur impact sur les performances perçues par les internautes.

Publié dans : Technologie
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 793
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 207
Actions
Partages
0
Téléchargements
139
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Améliorer les performances Web - Les optimisations côté client

  1. 1. Améliorer les performances WebLes optimisations côté client8 février 2011Nicolas HOIZEY nhoizey@clever-age.comDirecteur technique twitter.com/nhoizeyClever Age http://www.clever-age.com/ 2
  2. 2. LA  PERFORMANCE  PAIE  
  3. 3. Amazon.com  Page  +100  ms   CA  -­‐1%   En  2006  
  4. 4. Microso:  Bing  Page  +1s      CA  -­‐2,8%  
  5. 5. Google  Search   Page  +0,4  s  Recherches  par  uFlisateur  -­‐0,76%   Après  arrêt  de  l’expérience   Toujours  -­‐0,21%   Pas  de  retour  à  la  «  normale  »  !  
  6. 6. Les  débits  augmentent*…   Fibre  opFque   100  Mbps   *  Pour  certains  privilégiés  
  7. 7. …mais  le  Web  n’en  Fre  pas  profit  
  8. 8. …et  les  pages  grossissent  
  9. 9. La  mobilité  prend  de  l’ampleur  •  Bande  passante  faible  et  variable  •  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  
  10. 10. Avec  un  site  plus  rapide  •  Les  visiteurs  reviennent  •  Ils  regardent  plus  de  pages  à  chaque  visite  •  Meilleur  taux  de  conversion  •  Plus  de  chiffre  d’affaires  •  AmélioraFon  de  la  sa?sfac?on  uFlisateur  •  Economies  d’infrastructure  (hardware  et  BP)  •  Meilleur  posi?onnement  chez  Google  
  11. 11. Sujet  d’ampleur  croissante,  frémissements  en  France  •  WebPerf  Contest  2010   –  Concours  internaFonal   •  hdp://webperf-­‐contest.com/   •  Novembre  2010   –  ObjecFf   •  OpFmisaFon  d’une  page  Web   •  Fournie  par  la  FNAC   •  hdp://entries.webperf-­‐contest.com/   base-­‐fnac-­‐:w/index.html  
  12. 12. LA  CASCADE,  BASE  DE  TRAVAIL  
  13. 13. FNAC.fr  
  14. 14. FNAC.fr  Serveur  5%   Client  95%  
  15. 15. DécomposiFon  d’une  requête   Connexion   Adente  de   TCP   la  réponse   DNS   Chargement   de  la  réponse  
  16. 16. FNAC.fr   hdp://cas.im/wpt-­‐fnac-­‐110202  
  17. 17. Amazon.fr   hdp://cas.im/wpt-­‐amazon-­‐110202  
  18. 18. LE  «  START  RENDER  »  N’EST  PAS  TOUT  !  
  19. 19. FNAC.fr  vs  Amazon.fr  hdp://www.youtube.com/watch?v=TUxB7JIcXvo  
  20. 20. OUTILS  D’AUDIT  DANS  LES  NAVIGATEURS  
  21. 21. IE9  Developer  Tools  
  22. 22. Firefox  +  Firebug  
  23. 23. Webkit  Developer  Tools  
  24. 24. Chrome  +  Speed  Tracer  
  25. 25. RéférenFels  de  bonnes  praFques  •  FoncFonnalités  ajoutées  aux  navigateurs   –  Yahoo!  YSlow   –  Google  Pagespeed  
  26. 26. Yahoo!  YSlow  •  Extension  de  Firebug  développée   par  Yahoo!   –  hdp://developer.yahoo.com/yslow/  •  Analyse  la  page  et  détermine   l’usage  des  bonnes  praFques   –  23  critères   –  Donne  un  «  grade  »  de  A  à  F   –  Donne  des  recommandaFons   Voyages-­‐sncf.com  
  27. 27. Google  Pagespeed  •  Différents  ouFls  développés  par  Google   –  hdp://code.google.com/intl/fr/speed/page-­‐ speed/  •  Une  extension  pour  Firebug,  similaire  à  Yslow   –  Analyse  la  page  et   donne  une  note   –  Donne  des   recommandaFons  
  28. 28. OUTILS  D’AUDIT  EN  LIGNE  
  29. 29. webpagetest.org  
  30. 30. webpagetest.org  •  La  référence   –  WebPagetest  :  Projet  AOL  mis  en  open  source   –  De  IE6  à  IE9  preview  7   –  Des  serveurs  partout  dans  le  monde     –  Différentes  bandes  passantes   –  Largement  paramétrable   –  Résultats  détaillés  et  expliqués   –  Enregistrement  vidéo  
  31. 31. Google  Webmaster  Tools  
  32. 32. OUTILS  D’OPTIMISATION  
  33. 33. Les  architectes  et  développeurs  !  •  Beaucoup  d’arFsanat   –  IdenFfier  les  faiblesses   –  Prioriser  les  acFons   –  Trouver  les  ouFls   –  Industrialiser  
  34. 34. Microso:  Doloto  •  Download  time  opFmizer   –  hdp://research.microso:.com/en-­‐us/projects/doloto/  •  OuFl  dédié  aux  applicaFons  uFlisant  beaucoup  de   code  JavaScript  /  Ajax  •  Processus  opéraFonnel   –  Analyse  des  uFlisaFons  du  code   –  Découpage  des  foncFons  entre  code  nécessaire  au   lancement  et  code  uFlisé  ultérieurement   –  Chargement  dynamique  selon  les  besoins  
  35. 35. Google  mod_pagespeed  •  Un  module  pour  Apache,  automaFsant   l’applicaFon  de  certaines  bonnes  praFques   –  hdp://code.google.com/intl/fr/speed/page-­‐ speed/docs/module.html   –  15  filtres   –  Seulement  9  acFfs  par  défaut   –  Les  6  autres  à  uFliser  avec  prudence  
  36. 36. GAGNONS  DU  TEMPS  !  
  37. 37. Eviter  les  requêtes  inuFles  •  Eviter  les  redirecFons  •  Pas  d’erreur  404  dans  les  ressources  liées  •  Pas  de  ressources  liées  non  uFlisées  
  38. 38. Réduire  la  latence  •  Réduire  la  latence  réseau     –  Rapprocher  le  client  du  serveur   –  CDN   •  Content  Delivery  Network   –  PerFnent  en  cas  de  public  internaFonal  
  39. 39. Réduire  le  nombre  de  requêtes  DNS  •  Limiter  le  nombre  de  domaines  uFlisés   –  Chaque  domaine  implique  une  requête  DNS  
  40. 40. Réduire  le  nombre  de  requêtes  •  Exploiter  le  cache  du  navigateur   –  Configurer  le  serveur  pour  indiquer  la  date  de   pérempFon  des  ressources   –  Le  navigateur  ne  demandera  la  ressource  que  si   elle  a  expiré  
  41. 41. Réduire  le  nombre  de  requêtes  •  Concaténer  les  codes  sources  JavaScript  et  CSS   6  JS  -­‐>  1  JS  
  42. 42. Réduire  le  nombre  de  requêtes  •  Combiner  les  images  sous  forme  de  sprites  
  43. 43. 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  inuFles,  blancs,   commentaires,  opFmisaFon  de  la  syntaxe  
  44. 44. Réduire  le  poids  des  requêtes  •  Réduire  le  poids  des  images   –  Suppression  des  métadonnées  inuFles  (EXIF,  IPTC)   –  Choix  des  bons  formats   •  GIF   •  JPEG  :  quelle  compression  ?   •  PNG  :  quel  format  ?  8,  24,  32   –  Jusqu’à  90%  de  gain  !  
  45. 45. Réduire  le  poids  des  requêtes  •  Eviter  les  cookies  inuFles   –  Les  cookies  alourdissent  les  requêtes  vers  le   serveur  •  Si  possible,  servir  les  ressources  staFques   depuis  un  domaine  sans  aucun  cookie  
  46. 46. RéparFFon  des  ressources  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  praFque  dans  tous  les  navigateurs  en   dernières  versions   –  AdenFon,  2  dans  IE6  &  IE7  •  Mise  en  place  de  plusieurs  domaines   –  «  Domain  sharding  »  
  47. 47. RéparFFon  des  ressources  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  
  48. 48. OpFmiser  le  rendu  du  navigateur  •  Ordonnancer  le  chargement  des  ressources   –  HTML  et  CSS  au  plus  vite   •  OpFmisaFon  du  «  start  render  »   •  Eviter  le  «  reflow  »  avec  des  CSS  tardives   •  Flush  de  HTML  parFel   –  JavaScript  le  plus  tard  possible   •  Le  JS  bloque  le  chargement  pendant  son  exécuFon   –  Différer  le  chargement  des  ressources  qui  ne  sont   pas  uFles  au  départ   •  «  lazy  loading  »  
  49. 49. OpFmiser  le  rendu  du  navigateur  •  Nedoyer  les  CSS  et  JS  du  code  inuFle  •  Tenir  compte  des  performances   –  des  CSS   –  de  JavaScript   –  des  frameworks  JavaScript  
  50. 50. AdenFon  aux  ressources  externes  •  Ressources  provenant  de  Fers   –  OuFls  de  staFsFques   –  Régies  publicitaires   –  Widgets  de  partenaires  •  hdp://stevesouders.com/p3pc/  
  51. 51. PRATIQUER  
  52. 52. Profiter  du  webperf  contest  •  Bilan  très  instrucFf   –  hdp://braincracking.org/2011/01/10/concours-­‐ webperf-­‐2010-­‐les-­‐bases/   –  hdp://www.yterium.net/Ma-­‐parFcipaFon-­‐au-­‐ Webperf  
  53. 53. 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    
  54. 54. Une  veille  permanente  •  Dans  la  vraie  vie   –  Evénements  du  Web  Perf  User  Group   hdp://cas.im/webperf-­‐user-­‐group  •  Sur  Diigo   –  Groupe  Web  Performance   hdp://groups.diigo.com/group/web-­‐performance  •  Sur  Twider   –  Suivre  le  compte  @webperf_fr  
  55. 55. 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.
  56. 56. Chiffres clefs90 collaborateurs!sur 4 agencesCroissance régulière! et rentableG3+!Banque de France
  57. 57. 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 GroupeMACSF http://www.groupem6.fr/! Nouvelles Frontièreshttp://www.macsf.fr http://www.m6mobile.fr/ http://www.nouvelles-frontieres.fr/
  58. 58. Références internet et e-CommerceVet Affaires Atelier BNP Paribas Mondial Assistance US!http://www.vetaffaires.fr/ http://www.atelier.net/ http://www.mondial-assistance.usAéroport de Bordeaux Saint Gobain! Siplec – Groupe E. Leclerchttp://www.bordeaux.aeroport.fr/ http://www.saint-gobain.com/ http://www.siplec.com/
  59. 59. Applications mobiles
  60. 60. 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

×