Slide 1

Slide 1 text

Performance  Web   Nicolas  Hoizey   Co-­‐fondateur  &  directeur  technique  Clever  Age   @nhoizey  

Slide 2

Slide 2 text

Le  visage  du  Web  change  

Slide 3

Slide 3 text

Les  débits  augmentent*…   Fibre  opDque   100  Mbps   *  Pour  certains  privilégiés  

Slide 4

Slide 4 text

…les  pages  grossissent  

Slide 5

Slide 5 text

Mais  les  apparences   sont  trompeuses  

Slide 6

Slide 6 text

Le  Web  ne  Dre  pas  profit  du  débit  

Slide 7

Slide 7 text

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  

Slide 8

Slide 8 text

L`u;lisateur  n`aime  pas   a

Slide 9

Slide 9 text

Etude  Akamai  en  2009   47%  des  clients  e-­‐commerce   veulent  la  page  en  2s   4s  en  2006   8s  en  1999  

Slide 10

Slide 10 text

Expérience  pour  CA  au   Glasgow  Caledonian  University   Site  peu  performant     ConcentraDon  +50%   AgitaDon,  stress  

Slide 11

Slide 11 text

Amazon.com   Page  +100  ms   CA  -­‐1%   En  2006  

Slide 12

Slide 12 text

Microso_  Bing   Page  +1s      CA  -­‐2,8%  

Slide 13

Slide 13 text

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  »  !  

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Plus  que  la  performance  réelle,   c’est  sa  percep;on  qui  compte  !  

Slide 17

Slide 17 text

La  percepDon  de  la  vitesse   réelle   espérée   perçue   mémorisée   @stoyanstefanov   +15%   +35%  

Slide 18

Slide 18 text

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  

Slide 19

Slide 19 text

La  cascade,  base  de  travail  

Slide 20

Slide 20 text

FNAC.fr  

Slide 21

Slide 21 text

FNAC.fr   Serveur  5%   Client  95%  

Slide 22

Slide 22 text

FNAC.fr   hnp://cas.im/wpt-­‐fnac-­‐110202    

Slide 23

Slide 23 text

DécomposiDon  d`une  requête   DNS   Connexion   TCP   Anente  de   la  réponse   Chargement   de  la  réponse  

Slide 24

Slide 24 text

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  

Slide 25

Slide 25 text

FNAC.fr   Start   Render   ~  1,8s   Document   Complete   ~  7,7s  

Slide 26

Slide 26 text

hnp://cas.im/wpt-­‐amazon-­‐110202     Amazon.fr   Start   Render   ~  1,75s   Document   Complete   ~  4,3s  

Slide 27

Slide 27 text

FNAC.fr  vs  Amazon.fr  

Slide 28

Slide 28 text

Le  «  Start  render  »  n`est  pas   un  indicateur  suffisant  

Slide 29

Slide 29 text

FNAC.fr  vs  Amazon.fr  

Slide 30

Slide 30 text

FNAC.fr  vs  Amazon.fr  

Slide 31

Slide 31 text

FNAC.fr  vs  Amazon.fr  

Slide 32

Slide 32 text

FNAC.fr  vs  Amazon.fr  

Slide 33

Slide 33 text

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  

Slide 34

Slide 34 text

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/  

Slide 35

Slide 35 text

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  

Slide 36

Slide 36 text

Quelques  ou;ls  

Slide 37

Slide 37 text

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  

Slide 38

Slide 38 text

webpagetest.org  

Slide 39

Slide 39 text

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  

Slide 40

Slide 40 text

Firefox  +  Firebug   Webkit  Developer  Tools   Chrome  +  Speed  Tracer   IE9  Developer  Tools   Les  navigateurs  

Slide 41

Slide 41 text

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  

Slide 42

Slide 42 text

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  

Slide 43

Slide 43 text

Google  Pagespeed  Online  

Slide 44

Slide 44 text

Google  Webmaster  Tools  

Slide 45

Slide 45 text

Et  les  autres…  

Slide 46

Slide 46 text

OuDls  d’opDmisaDon   •  Les  architectes  et  développeurs  !   •  Beaucoup  d`arDsanat   – IdenDfier  les  faiblesses   – Prioriser  les  acDons   – Trouver  les  ouDls   – Industrialiser  

Slide 47

Slide 47 text

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  

Slide 48

Slide 48 text

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  

Slide 49

Slide 49 text

Au  travail  !  

Slide 50

Slide 50 text

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  

Slide 51

Slide 51 text

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  

Slide 52

Slide 52 text

Réduire  le  nombre  de  requêtes  DNS   •  Limiter  le  nombre  de  domaines  uDlisés   – Chaque  domaine  implique  une  requête  DNS  

Slide 53

Slide 53 text

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é  

Slide 54

Slide 54 text

Réduire  le  nombre  de  requêtes   •  Concaténer  les  codes  JavaScript  et  CSS   6  JS  -­‐>  1  JS  

Slide 55

Slide 55 text

Réduire  le  nombre  de  requêtes   •  Combiner  les  images  sous  forme  de  sprites     •  AnenDon  à  l’accessibilité  

Slide 56

Slide 56 text

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  

Slide 57

Slide 57 text

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  

Slide 58

Slide 58 text

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  !  

Slide 59

Slide 59 text

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  

Slide 60

Slide 60 text

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  »  

Slide 61

Slide 61 text

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  

Slide 62

Slide 62 text

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  »  

Slide 63

Slide 63 text

OpDmiser  le  rendu  du  navigateur   •  Nenoyer  les  CSS  et  JS  du  code  inuDle   •  Tenir  compte  des  performances   – des  CSS   – de  JavaScript   – des  frameworks  JavaScript  

Slide 64

Slide 64 text

AnenDon  aux  ressources  externes   •  Ressources  provenant  de  Ders   – OuDls  de  staDsDques   – Régies  publicitaires   – Widgets  de  partenaires   •  hnp://stevesouders.com/p3pc/  

Slide 65

Slide 65 text

Il  faut  pra;quer  pour   progresser  !  

Slide 66

Slide 66 text

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  

Slide 67

Slide 67 text

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  

Slide 68

Slide 68 text

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    

Slide 69

Slide 69 text

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  

Slide 70

Slide 70 text

A  vous  de  jouer  !   Illustrations : hnp://iwdrm.tumblr.com/  &  hnp://fromme-­‐toyou.tumblr.com/  

Slide 71

Slide 71 text

Clever Age! c Fondée en 2001 par des managers expérimentés, Clever Age est aujourd'hui un acteur incontournable dans le domaine du conseil et de la réalisation de projets. L'idée directrice qui a conduit à cette création et qui prévaut aujourd'hui encore est l'indépendance, aussi bien vis-à-vis des éditeurs que des investisseurs.

Slide 72

Slide 72 text

Chiffres clefs G3+! Banque de France 90 collaborateurs! sur 4 agences Croissance régulière! et rentable

Slide 73

Slide 73 text

Rezulteo http://www.rezulteo-pneu.fr/ ! MACSF http://www.macsf.fr LVMH – DIOR PCD http://beauty.dior.com/ M6 Groupe http://www.groupem6.fr/! http://www.m6mobile.fr/ Fnac Market Place! http://goo.gl/vzZA Nouvelles Frontières http://www.nouvelles-frontieres.fr/ Références internet et e-Commerce

Slide 74

Slide 74 text

Vet Affaires http://www.vetaffaires.fr/ ! Aéroport de Bordeaux http://www.bordeaux.aeroport.fr/ Atelier BNP Paribas http://www.atelier.net/ Saint Gobain! http://www.saint-gobain.com/ Mondial Assistance US! http://www.mondial-assistance.us Siplec – Groupe E. Leclerc http://www.siplec.com/ Références internet et e-Commerce

Slide 75

Slide 75 text

Applications mobiles

Slide 76

Slide 76 text

Choix d'une solution Portail / CMS pour l'ensemble des projets internet / extranet / intranet du groupe Conseil fonctionnel et technique pour la réalisation! d'une application de gestion des sinistres (assurances) puis réalisation de l'application (JEE / EJB / Symfony) Mission Accompagnement POC et Processus e-Commerce dans le cadre du chantier de refonte du site internet APEC Accompagnement dans la définition et la mise en oeuvre d'une architecture SOA dans le cadre de la refonte globale (Back- office et end-user) Choix d'une architecture Portail / CMS / eCommerce pour le groupe et ses filiales Conseil en architecture technique