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

7,970 views

Published on

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.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,970
On SlideShare
0
From Embeds
0
Number of Embeds
1,198
Actions
Shares
0
Downloads
140
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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

×