SlideShare une entreprise Scribd logo
Make It Fast, Keep It Fast




                 OUAT Conf Nantes
                    30/11/2011

Stéphane RIOS - Fasterize - @stefounet
Q!"#q!"$ pr%&'!()*+$
A,"+-'
•  Mon parcours

• Un peu de Lean, d’Agile, voire de DevOps

• WebPerf
 • enjeux et contexte
 • technologies, règles, outils
 • fasterize
 • futur
N.('#,)" ...
• ZX Spectrum en 1982, VIC20, C64, consoles, etc ...

• (des études)

• Gopher, Veronica, www en mode 3270 en1993

• première page HTML en 1994 (NCSA Mosaic)
• serveur Web en 1994 sur windows 3.11

• Webnet (“webagency”) en 1996

• RueDuCommerce en 2000
C/'$$"!r -’*&("( "( -" 0$
•  démarrage à une époque où les ressources sont rares et
   limitées (on optimise au maximum ce dont on dispose)

• pages < 5ko, 16 couleurs
  premier site : intranet compta France Telecom, 90% des


• de temps
  toujours à traquer l’octet en trop, la requête qui met trop
R!"D!C*00"r&".&*0
•   “leader du eCommerce en France”
 • distribution classique (depuis aout 1999)
 • galerie marchande (août 2007)
•   370 M€ de volume d’affaire

• 8 millions de visiteurs / mois

• 100 millions de pages vues /mois
• plusieurs milliards de hits / mois

• pure player

• croissance rentable
S('r(!p “f*!r0)”
•  “vieille startup” (pas vraiment hackathon ...)

• d’abord CTO Adjoint puis CTO

• premier chantier : optimisation

• réécriture d’une bonne partie du site 3 frontaux jusqu'en
  2004

• RAM, disque”
  pas dans l'esprit : “on a qu'à rajouter des serveurs, CPU,


• optimisation à fond des ressources (meilleure scalabilité)
U+ p"! -" ("&/+)q!"
• 3 datacenters, 200 serveurs, 2 CDN

• Load balancing local & global (F5, LVS)

• MySQL
  Base de données SQL Server 2000 / 2005 / 2008 &


• Réplication dans tous les sens
• Coeur de réseau fibre optique éclairée

• PHP5, ColdFusion5

• Moteur de recherche : Sinequa Intuition

• Cache à tous les étages !
D! (r'1& !
V*#!0%(r)"
•  10 millions de users

• 20 millions d’offres

• des tables plusieurs centaines de millions d’enregistrements

• 5000 hits/s
• 15 millions de pages indexées dans Google

• chaque octet compte !
R%$!#('(
E( 'prè$ ?
•  la perf est un état d’esprit global (et peu de personnes
   l’ont)

• CTO c’est quand même la meilleure place

• le “one-again” (ie à l’arrache) ne tient pas dans la durée

• développer le moins possible

• mettre en place une usine de dev
• tester

• passer aux méthodes Agile !

• comprendre la technique et le business est un atout majeur
S#)-" q!) (!"
•   Lean


•   Agile


•   DevOps


•   Lean Startup
D%v"#*pp"0"+( A,)#"
•   Approche prédictive vs Approche adaptative (itération)

• 3 choses qu’on tient pour vrai :
 • le “client” sait ce qu’il veut
 • le développeur sait comment le construire
 • surtout rien ne change en cours de route !
•   mais nous devons plutôt vivre avec :
 • le client découvre ce qu’il veut
 • le développeur découvre comment le construire
 • le monde change !
C*û( -! &/'+,"0"+(
V'#"!r$
V'#"!r$
• Keep It Smart & Simple
V'#"!r$
• Keep It Smart & Simple
• Build quality in
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
• Transparency
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
• Transparency
• Embrace failure
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
• Transparency
• Embrace failure
• Automate all U can
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
• Transparency
• Embrace failure
• Automate all U can
• JFDI
V'#"!r$
• Keep It Smart & Simple
• Build quality in
• Eliminate waste, remove impediments

• Go fast / Fail Fast

• Measure all
• Respect people !
• Transparency
• Embrace failure
• Automate all U can
• JFDI Just Fucking Do It
Make It Fast, Keep It Fast




                   De la Webperf !
                       (enfin)
L"$ "+2"3


 De nombreuses études réalisées par Amazon [1],
Google[2],Yahoo[3], AOL[4], Bing[5] ou bien Shopzilla[6]
  ont montré que la performance Web avait un
impact direct et fort sur le business des sites Web
L"$ "+2"3
•   Sur le chiffre d’affaire [1] : chez Amazon,100 ms de temps
    de chargement en plus provoque une baisse de 1% de
    chiffre d’affaire

•   Sur le référencement naturel [7] : selon la communauté des
    webmasters, au delà de 4s, Google modifie son classement

• provoque une baisse de trafic d’environ 10% sur cette
  Sur le trafic : selon Yahoo, une page plus lente de 400ms
                [3]



    page
B)+,
•   p
AOL
• Les	
  pages	
  les	
  plus	
  lentes	
  sont	
  celles	
  qui	
  ont	
  le	
  moins	
  de	
  trafic
P!b
•   A user who has to endure an 8-second download delay
    spends only 1% of their total viewing time looking at the
    featured promotional space on a landing page.

    In contrast, a user who receives instantaneous page
    rendering spends 20% of viewing time within the
    promotional area.
P"r&"p()*+
•   L’ analyse des ondes cérébrales révèle que les internautes
    doivent se concentrer jusqu'à 50% de plus lors de
    l'utilisation de sites Web répondant mal.

•   Un internaute perçoit un site environ 15% plus lent qu’il
    n’est réellement. Quand il en parle, il annonce 35% de
    plus !

•   Ce sont les premiers éléments d’une page qui comptent le
    plus
P"r&"p()*+
                                     (!"#




                                     '$"#




"#()*+,-./0*12/#(+#0*+3#()*4*/(2/#
                                     '!"#




                                     &$"#




                                                                                                             &'"#
                                     &!"#




                                     %$"#
                                                                                        &&"#
                                                                    $%"#
                                     %!"#




                                      $"#

                                              !"#
                                      !"#
                                            &#)#(#*+,-./+*#         &#)#0#*+,-./+*#    &#)#1#*+,-./+*#      &#)#%!#*+,-./+*#

                                                              56*/,.-./0#(*/7#8.#0.-97#(.#:6*;,.-./0#
L"$ "+2"3
•    Les internautes ne veulent plus attendre !      [12]


              ,$-.#"-/01-2-"(3/4$'5$"./6"2'"1'5$6'/25$"
+"

*"

)"

("

'"

&"

%"

$"

#"
        !"#$%&'($#"     )"#$%&'($#"   *"#$%&'($#"            +"
!"
           #+++"           $!!("         $!!+"              $!#$"
Rè,#" -’*r
Rè,#" -’*r
•  10 Golden Principles for Building Successful Web
   Applications

• 1. Speed

• feature. Speed is the most important feature. If your
  “First and foremost, we believe that speed is more than a

   application is slow, people won’t use it.”
Rè,#" -’*r
•  10 Golden Principles for Building Successful Web
   Applications

• 1. Speed

• feature. Speed is the most important feature. If your
  “First and foremost, we believe that speed is more than a

   application is slow, people won’t use it.”

• Fred Wilson (Entrepreneur, Twitter, del.icio.us ..)
T*!$ G**,#)$%$ !
T*!$ G**,#)$%$ !
•   Google est (ultra)rapide
T*!$ G**,#)$%$ !
• Google est (ultra)rapide

• Amazon est rapide
T*!$ G**,#)$%$ !
• Google est (ultra)rapide

• Amazon est rapide

• Facebook est rapide
T*!$ G**,#)$%$ !
• Google est (ultra)rapide

• Amazon est rapide

• Facebook est rapide

• Un seul Internet
T*!$ G**,#)$%$ !
•  Google est (ultra)rapide

• Amazon est rapide

• Facebook est rapide

• Un seul Internet
• que votre site soit plus lent que la recherche Google ou
  Du point de vue des internautes, il n’y a pas de raison à ce

   que le site d'Amazon.
L" &*+(4("
•   Les performances d’un site Web dépendent               [13]   :
 • du temps de réponse du serveur (~20% du total)
 • du temps de chargement des pages HTML (~80% du total)
•   Les pages sont devenues (hyper)complexes

• Pourtant on a l’ADSL non ?
 • la latence n’est (presque) pas une une question de débit !
 • users don’t leave in datacenters !
!
                                               C*0p#4)(%
"#$$%!                              &'##!




                                      96 éléments, 12 domaines, 530 Ko
&!()(*(+,-!                         $%!()(*(+,-!
#!./*01+!
     2 éléments, 1 domaine, 10 Ko
                                    #&!./*01+-!
#'!21)/34,(-!                       56'!21)/34,(-!
C*0p#4)(%


DES PAGES DE PLUS EN PLUS COMPLEXES




  ~15ko       ~498ko        ~700Ko
2,3 objets   75 objets     83 objets
5)r- P'r(6
• Widget “sociaux”
 • facebook, google+, twitter
 • disqus, addthis
•   Pub
 • les pires ...
• Analytics
• Autre
 • retargeting
 • cross-selling
 • etc ...
W'("rf'##
W'("rf'## !
W'("rf'## ?
Or,'+)$'()*+
•   Les organisations sont complexes
 • les acteurs sont multiples
 • les sources de contenu sont multiples
 • pas prioritaire longtemps
• et surtout pas orientées pour générer de la perf
• Accélérer c’est possible pour tout le monde

• plus de travail !
  S’organiser pour aller vite constamment demande un peu


• VelocityConf ≠ SpeedConf
U+ &/'+()"r $'+$ 1+
L"$ ('b#"$ -" #' L*)
    1.   Make Fewer HTTP Requests
    2.   Use a Content Delivery Network
    3.   Add an Expires Header
    4.   Gzip Components
    5.   Put Stylesheets at the Top
    6.   Put Scripts at the Bottom
    7.   Avoid CSS Expressions
    8.   Make JavaScript and CSS External
    9.   Reduce DNS Lookups
    10. Minify JavaScript
    11. Avoid Redirects
    12. Remove Duplicate Scripts
    13. Configure ETags
    14. Make AJAX Cacheable
L" N*7"'! T"$('0"+(
•  Async Loading JS / CSS

• Sprites

• Lazy Loading

• SPDY
• Domain Sharding

• Cookieless domain

• prefetch / prerender

• dns prefetch
• Cache
E( #" 0*b)#" ?
•   C’est pire !
 • browser moins puissant
 • machines moins puissantes
 • le fonctionnement du réseau est différent
• Les règles sont soit complètement différentes, soit encore
  plus importantes

• Solution : un site mobile différent du site “desktop” !
 • problème de maintenance
 • les utilisateurs préfèrent le “vrai” site, ils attendent la même expérience
R%$!0%
•  Les organisations sont complexes

• Les règles sont complexes
  • Elle nécessite des expertises fortes et multiples (de TCP/IP à CSS3 !)
  • C’est un domaine en évolution constante (IE6 à Chrome 15 !)
•  C’est un chantier sans fin ...

• ... qui finit par ne plus être prioritaire
L"$ *!()#$
• Monitoring
 • IPLabel, Gomez, Keynote, ...
• Check “one shot”
 • Yslow
 • Page Speed
 • WebPageTest (webpagetest.org ou wpt.fasterize.com)
 • Dynatrace
•   Optimizers de composants
 • SpriteMe
 • SmushIt
 • Closure Compiler
L"$ 0%(r)q!"$
•  Note globale

• TTFB
• Start Render

• AFT

• Page Load Time
• Nb de requêtes

• Poids, complexité du DOM

• Time To First Click (© stefounet)
  • technique
  • business
DIY v$ A!(*0'("
DIY v$ A!(*0'("
WPOA
•   Software
• mod_pagespeed
• plugins pour certains CMS
•   Hardware
• Strangeloop
•   “Cloud”
• yottaa, torbit, strangeloop, cloudflare, blaze
• Fasterize !
F'$("r8"
•   Fasterize est un accélérateur de site Web en mode SaaS

• HTML et simplifie la mise en oeuvre de ces optimisations
  Fasterize intervient sur le temps de chargement des pages


• Une équipe de geeks

• Des fondateurs reconnus pour leur expérience
 • Stéphane RIOS, CEO
 • Vincent Voyer, expert Web Performance
•   Advisory Board : ex-CTO de Dailymotion, CEO de
    Viavoo, ...
N*(r" *ffr"
•   Une optimisation en temps réel du temps de chargement
    des pages HTML

• Une offre SaaS (Software as a Service)
 • sous forme d’abonnement mensuel
 • un tarif en fonction du nombre de pages vues / mois
•   Sans contraintes
 • pas de coûts d’investissements, pas d’engagement (SaaS)
 • intégration et évolutions transparentes (matérielle, logicielle, process),
• Transfert de compétences en option (audit, conseil)
C*00"+( ç' 0'r&/" ?
C*00"+( ç' 0'r&/" ?


      ,$-%'./$                                                                                           )*+
                                                                                                             le
                                                                                                        Go og



                   web                                            html




                         sc
                                   CSS
                                                 imag
                                                                                                        ('$#'
                           rip                               !"
                                                        e "!"!"!!!!""!""!"!
                               t                         ""!   """    !
                                                                              script     !""!
                                                                                              !"
                                                       !"" "!!"" !"!
                                                                    "                   !"!! !""!"!!
                                                          "       !                           !"
                                                      """ !!!"! !""                    """! """"!"!
                                         image           !
                                                     ""! !"!"! "!!!
                                                        !
                                                                                             "!
                                                                                      !""" !""!!""
                                                                                            !!
                                                    """ "!!!" !!""                   """! !"!"!!!
                                                                                           !"
                                                       "!!
                                                           "!! !"!!                 ""!! !"!!!""
                                                    Dat       "!"
                                                                  !
                                                                                          "!
                                                                                   """"! !!"!"!!
                                                              as                           !"!!
                                                                                                 "!"!
                                                                                       Data
                                                                                              s




Sans Fasterize : les pages sont lourdes et lentes à charger
C*00"+( ç' 0'r&/" ?

,$-%'./$
                        !""!!"!""!"!!
                      !""!!"!""!"!!
                        !"!!!"""""!"!
                     !""!!"!""!"!!
                       !"!!!"""""!"!
                        """!"!!""!!""
                     !"!!!"""""!"!
                       """!"!!""!!""
                        !"""!!!"!"!!!
                     """!"!!""!!""
                       !"""!!!"!"!!!
                         """!!"!"!!!""
                     !"""!!!"!"!!!
                       """!!"!"!!!""
                         ""!!"!!!"!"!!
                     """!!"!"!!!""
                       ""!!"!!!"!"!!
                         """"!!"!!"!"!
                     ""!!"!!!"!"!!
                       """"!!"!!"!"!

                        Data s
                        Data
                     """"!!"!!"!"!
                                           scrip t
                                            scrip
                                          scriptt
                                                          )*+
                       Datass




                                                           Google

                                    html
               web




                                                          !"#$%&'$#'
                                    CSS
                                    CSS          imag e
                                                  imag
                                                imagee
                                   CSS
C*00"+( ç' 0'r&/" ?

,$-%'./$
                                  !""!!"!""!"!!
                                !""!!"!""!"!!
                                  !"!!!"""""!"!
                               !""!!"!""!"!!
                                 !"!!!"""""!"!
                                  """!"!!""!!""
                               !"!!!"""""!"!
                                 """!"!!""!!""
                                  !"""!!!"!"!!!
                               """!"!!""!!""
                                 !"""!!!"!"!!!
                                   """!!"!"!!!""
                               !"""!!!"!"!!!
                                 """!!"!"!!!""
                                   ""!!"!!!"!"!!
                               """!!"!"!!!""
                                 ""!!"!!!"!"!!
                                   """"!!"!!"!"!
                               ""!!"!!!"!"!!
                                 """"!!"!!"!"!

                                  Data s
                                  Data
                               """"!!"!!"!"!
                                                     scrip t
                                                      scrip
                                                    scriptt
                                                                    )*+
                                 Datass




                                                                     Google

                                              html
                         web




                                                                    !"#$%&'$#'
                                              CSS
                                              CSS          imag e
                                                            imag
                                                          imagee
                                             CSS




           Compression
C*00"+( ç' 0'r&/" ?

,$-%'./$
                                    !""!!"!""!"!!
                                  !""!!"!""!"!!
                                    !"!!!"""""!"!
                                 !""!!"!""!"!!
                                   !"!!!"""""!"!
                                    """!"!!""!!""
                                 !"!!!"""""!"!
                                   """!"!!""!!""
                                    !"""!!!"!"!!!
                                 """!"!!""!!""
                                   !"""!!!"!"!!!
                                     """!!"!"!!!""
                                 !"""!!!"!"!!!
                                   """!!"!"!!!""
                                     ""!!"!!!"!"!!
                                 """!!"!"!!!""
                                   ""!!"!!!"!"!!
                                     """"!!"!!"!"!
                                 ""!!"!!!"!"!!
                                   """"!!"!!"!"!

                                    Data s
                                    Data
                                 """"!!"!!"!"!
                                                       scrip t
                                                        scrip
                                                      scriptt
                                                                      )*+
                                   Datass




                                                                       Google

                                                html
                           web




                                                                      !"#$%&'$#'
                                                CSS
                                                CSS          imag e
                                                              imag
                                                            imagee
                                               CSS




           Compression
           Concaténation
C*00"+( ç' 0'r&/" ?

,$-%'./$
                                            !""!!"!""!"!!
                                          !""!!"!""!"!!
                                            !"!!!"""""!"!
                                         !""!!"!""!"!!
                                           !"!!!"""""!"!
                                            """!"!!""!!""
                                         !"!!!"""""!"!
                                           """!"!!""!!""
                                            !"""!!!"!"!!!
                                         """!"!!""!!""
                                           !"""!!!"!"!!!
                                             """!!"!"!!!""
                                         !"""!!!"!"!!!
                                           """!!"!"!!!""
                                             ""!!"!!!"!"!!
                                         """!!"!"!!!""
                                           ""!!"!!!"!"!!
                                             """"!!"!!"!"!
                                         ""!!"!!!"!"!!
                                           """"!!"!!"!"!

                                            Data s
                                            Data
                                         """"!!"!!"!"!
                                                               scrip t
                                                                scrip
                                                              scriptt
                                                                              )*+
                                           Datass




                                                                               Google

                                                        html
                                   web




                                                                              !"#$%&'$#'
                                                        CSS
                                                        CSS          imag e
                                                                      imag
                                                                    imagee
                                                       CSS




               Compression
              Concaténation
           Optimisation du cache
C*00"+( ç' 0'r&/" ?

,$-%'./$
                                             !""!!"!""!"!!
                                           !""!!"!""!"!!
                                             !"!!!"""""!"!
                                          !""!!"!""!"!!
                                            !"!!!"""""!"!
                                             """!"!!""!!""
                                          !"!!!"""""!"!
                                            """!"!!""!!""
                                             !"""!!!"!"!!!
                                          """!"!!""!!""
                                            !"""!!!"!"!!!
                                              """!!"!"!!!""
                                          !"""!!!"!"!!!
                                            """!!"!"!!!""
                                              ""!!"!!!"!"!!
                                          """!!"!"!!!""
                                            ""!!"!!!"!"!!
                                              """"!!"!!"!"!
                                          ""!!"!!!"!"!!
                                            """"!!"!!"!"!

                                             Data s
                                             Data
                                          """"!!"!!"!"!
                                                                scrip t
                                                                 scrip
                                                               scriptt
                                                                               )*+
                                            Datass




                                                                                Google

                                                         html
                                    web




                                                                               !"#$%&'$#'
                                                         CSS
                                                         CSS          imag e
                                                                       imag
                                                                     imagee
                                                        CSS




               Compression
              Concaténation
           Optimisation du cache
           Réorganisation du code
C*00"+( ç' 0'r&/" ?

,$-%'./$
                                             !""!!"!""!"!!
                                           !""!!"!""!"!!
                                             !"!!!"""""!"!
                                          !""!!"!""!"!!
                                            !"!!!"""""!"!
                                             """!"!!""!!""
                                          !"!!!"""""!"!
                                            """!"!!""!!""
                                             !"""!!!"!"!!!
                                          """!"!!""!!""
                                            !"""!!!"!"!!!
                                              """!!"!"!!!""
                                          !"""!!!"!"!!!
                                            """!!"!"!!!""
                                              ""!!"!!!"!"!!
                                          """!!"!"!!!""
                                            ""!!"!!!"!"!!
                                              """"!!"!!"!"!
                                          ""!!"!!!"!"!!
                                            """"!!"!!"!"!

                                             Data s
                                             Data
                                          """"!!"!!"!"!
                                                                scrip t
                                                                 scrip
                                                               scriptt
                                                                               )*+
                                            Datass




                                                                                Google

                                                         html
                                    web




                                                                               !"#$%&'$#'
                                                         CSS
                                                         CSS          imag e
                                                                       imag
                                                                     imagee
                                                        CSS




               Compression
              Concaténation
           Optimisation du cache
           Réorganisation du code
                     ...
C*00"+( ç' 0'r&/" ?

     ,$-%'./$
                                                  !""!!"!""!"!!
                                                !""!!"!""!"!!
                                                  !"!!!"""""!"!
                                               !""!!"!""!"!!
                                                 !"!!!"""""!"!
                                                  """!"!!""!!""
                                               !"!!!"""""!"!
                                                 """!"!!""!!""
                                                  !"""!!!"!"!!!
                                               """!"!!""!!""
                                                 !"""!!!"!"!!!
                                                   """!!"!"!!!""
                                               !"""!!!"!"!!!
                                                 """!!"!"!!!""
                                                   ""!!"!!!"!"!!
                                               """!!"!"!!!""
                                                 ""!!"!!!"!"!!
                                                   """"!!"!!"!"!
                                               ""!!"!!!"!"!!
                                                 """"!!"!!"!"!

                                                  Data s
                                                  Data
                                               """"!!"!!"!"!
                                                                     scrip t
                                                                      scrip
                                                                    scriptt
                                                                                    )*+
                                                 Datass




                                                                                     Google

                                                              html
                                         web




                                                                                    !"#$%&'$#'
                                                              CSS
                                                              CSS          imag e
                                                                            imag
                                                                          imagee
                                                             CSS




                    Compression
                   Concaténation
                Optimisation du cache
                Réorganisation du code
                          ...
Avec Fasterize : des pages optimisées et rapides à charger
L"$ b%+%1&"$ b!$)+"$$
•  Augmentation du taux de transformation

• Augmentation du trafic
 • pages vues
 • temps passé par visite
•  Augmentation de la satisfaction utilisateur

• Amélioration de l’image
• Amélioration du référencement naturel
L"$ b%+%1&"$ IT
•  Des équipes IT focus sur le développement de nouvelles
   fonctionnalités (productivité)

• performances du site
  Le manque de ressources techniques ne pénalise pas les


• développements
  Un impact immédiat, sans attendre des semaines de


• Des économies de bande passante et de matériel
F*+&()*++'#)(%$
• Le moteur de Fasterize intervient à plusieurs niveaux
• Perception (start render)   •   Gestion de cache
 • async loading js              • optimisation des TTL
 • lazy loading images           • URL versionning
•   Optimisation de contenu     •   Réseau
 • minification JS / CSS          • domain sharding
 • concaténation JS / CSS        • cookie-less domains
 • compression (gzip, images)
M)$" "+ *"7r"
•  Pas de modification de code et d’infrastructure

• Pas de paramétrages spécifiques

• identique à la production (plateforme de staging)
  Possibilité de tester dans un environnement séparé mais


• Sans danger
 • plateforme hautement tolérante aux pannes, validée par des tests de
   charge, architecture distribuée

 • autoscaling (ajout de serveurs automatiquement en fonction de la charge)
 • coupe circuit via unde Fasterize,indépendantroutécas deles serveursgrave
   sur l’infrastructure
                        opérateur
                                     le trafic est
                                                  : en
                                                       vers
                                                            problème

    d’origine
M)$" "+ *"7r"
•   Le site Web dispose déjà d’un CDN ?
• configuration de l’origine des CDN en origin.monsite.com.fasterized.com
• c’est parti !
•   Le site Web ne dispose pas d’un CDN ?
• configuration de plusieurs CDN choisis par Fasterize
• configuration de l’origine des CDN
• c’est parti !
•   CDN = Content Delivery Network (Akamaï, Cotendo,
    CloudFront, etc ...)
M)$" "+ *"7r"
•  Possibilité de tester en live les résultats d’une optimisation
   pour le site entier

• Nécessite peu de préparatif et de configuration (DNS)

• Aucune préparation de la part du site testé
F!(!r
F!(!r
•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
    matérielle
F!(!r
•  Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
   matérielle

• Google Instant Pages
 • utilisation du prerendering
 • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
F!(!r
•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
    matérielle

• Google Instant Pages
 • utilisation du prerendering
 • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
•   Amazon Silk
 • dynamic split of rendering in the Cloud
F!(!r
•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
    matérielle

• Google Instant Pages
 • utilisation du prerendering
 • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
                                      !"#$%&'()*+&,(
•   Amazon Silk
 • dynamic split of rendering in the Cloud
           EC2      Kindle Fire
F!(!r
•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
    matérielle

• Google Instant Pages
 • utilisation du prerendering
 • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
                                            !"#$%&'()*+&,(
•   Amazon Silk
 • dynamic split of rendering in the Cloud
           EC2       EC2
                    Kindle Fire   Kindle Fire
F!(!r
•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération
    matérielle

• Google Instant Pages
 • utilisation du prerendering
 • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
                                            !"#$%&'()*+&,(
•   Amazon Silk
 • dynamic split of rendering in the Cloud
           EC2       EC2
                    Kindle Fire   Kindle Fire   EC2   Kindle Fire
C*+&#!$)*+
•   Cdiscount vs RueDuCommerce
C*+&#!$)*+
•   Cdiscount vs RueDuCommerce
C*+&#!$)*+ b*+!$
S*!r&"$
•   [1] http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html et https://sites.google.com/site/
    glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0

•   [2] Google, Bing : http://en.oreilly.com/velocity2009/public/schedule/detail/8523

•   [3 ]Yahoo! : http://www.slideshare.net/stoyan/yslow-20-presentation

•   [4] AOL: http://en.oreilly.com/velocity2009/public/schedule/detail/7579

•   [5] Bing : http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-
    business

•   [6] Shopzilla : http://en.oreilly.com/velocity2009/public/schedule/detail/7709

•   [7] http://www.seroundtable.com/page-load-time-google-ranking-factor-2011-12825.html et http://
    www.webmasterworld.com/google/4254879.htm

•   [8] http://www.useit.com/alertbox/response-times.html

•   [9] Stoyan Stefanov : http://www.phpied.com/psychology-of-performance/

•   [10] Adwords : http://adwords.google.com/support/aw/bin/answer.py?hl=en&answer=87144

•   [11] RueDuCommerce : http://www.journaldunet.com/ebusiness/commerce/rue-du-commerce-performant-
    a-noel.shtml

•   [12] http://blog.smartbear.com/post/09-10-14/5-10-15-seconds-How-Long-Will-You-Wait-For-a-Web-Page-
    to-Load/

•   [13] http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performance/
R%f%r"+&"$
•   Fred Wilson’s 10 Golden Principles of Successful Web Apps :
    http://thinkvitamin.com/web-apps/fred-wilsons-10-golden-
    principles-of-successful-web-apps/

•   http://agilesoftwaredevelopment.com/leanprinciples

• http://blog.davidsingleton.org/mobiletcp
• http://www.measureworks.nl/en/

• http://www.webperformancetoday.com/

• optimization-hub/
  http://www.strangeloopnetworks.com/web-performance-


• http://www.paperplanes.de/2011/7/25/
  web_operations_101_for_developers.html
L"&(!r"$
•   Implementing Lean Software Development : from Concept to Cash - Mary
    & Tom Poppendieck

•   Le But - Eliyahu M. Goldratt

•   Hors piste - Pierre Letourneur (ouvrage collectif)

•   Hors de la crise - W. Edwards Deming

•   Scrum And XP from the trenches - Henry Kniberg

•   Building Scalable Websites - Cal Henderson

•   High Performances WebSite - Steve Souders

•   Even Faster WebSite - Steve Souders & Al

•   L’art de démotiver ses collaborateurs et de saborder son entreprise -
    François Bocquet

•   Partageons ce qui nous départage - ouvrage collectif (Octo)
C*+('&($

• Je suis à votre disposition !
  • mail : s@fasterize.com
  • twitter : http://twitter.com/fasterize
  • site web : http://www.fasterize.com
  • linkedin : http://www.linkedin.com/company/fasterize
  • téléphone : +33 6 30 26 44 80
Web perf et rdc par Stephane Rios

Contenu connexe

Similaire à Web perf et rdc par Stephane Rios

La face cachée de la mesure : une opportunité pour votre amélioration continue
La face cachée de la mesure : une opportunité pour votre amélioration continueLa face cachée de la mesure : une opportunité pour votre amélioration continue
La face cachée de la mesure : une opportunité pour votre amélioration continue
Agile Tour Genève
 
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfo
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfoE-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfo
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfoThomas TONDER
 
Les secrets d’un taux de conversion de champion
Les secrets d’un taux de conversion de championLes secrets d’un taux de conversion de champion
Les secrets d’un taux de conversion de champion
altima°
 
Conférence transformation E-commerce Paris 2010
Conférence transformation E-commerce Paris 2010Conférence transformation E-commerce Paris 2010
Conférence transformation E-commerce Paris 2010altima°
 
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"Thomas TONDER
 
Emailing : Le défi Multi-Canal
Emailing : Le défi Multi-CanalEmailing : Le défi Multi-Canal
Emailing : Le défi Multi-Canal
Jonathan Loriaux
 
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
polenumerique33
 
BtoBIM2017_Conf_Maître d'ouvrage
BtoBIM2017_Conf_Maître d'ouvrageBtoBIM2017_Conf_Maître d'ouvrage
BtoBIM2017_Conf_Maître d'ouvrage
Novabuild
 
A13 big data et web sémantique
A13  big data et web sémantiqueA13  big data et web sémantique
A13 big data et web sémantique
Rencontres Nationales du etourisme institutionnel
 
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
Jun-Li Lu
 
Sct 2009 Presentation
Sct 2009 PresentationSct 2009 Presentation
Sct 2009 Presentation
JPStrategy
 
Le Crowdfunding pour les artistes et musiciens
Le Crowdfunding pour les artistes et musiciensLe Crowdfunding pour les artistes et musiciens
Le Crowdfunding pour les artistes et musiciens
Virginie BERGER
 
Mini CV MBA MCI Full Time 2014
Mini CV MBA MCI Full Time 2014Mini CV MBA MCI Full Time 2014
Mini CV MBA MCI Full Time 2014
alexandre stopnicki
 
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 20098020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
Benoit Grenier
 
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
Nadia Berg
 
道与禅
道与禅道与禅
道与禅
washng
 
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
Dimitris Psounis
 
Accurate set-up-mahir
Accurate set-up-mahirAccurate set-up-mahir
Accurate set-up-mahir
M Edy Amin
 
Dianova Portugal at Social Stock Exchange Project 2009
Dianova Portugal at Social Stock Exchange Project 2009Dianova Portugal at Social Stock Exchange Project 2009
Dianova Portugal at Social Stock Exchange Project 2009
Dianova
 

Similaire à Web perf et rdc par Stephane Rios (20)

La face cachée de la mesure : une opportunité pour votre amélioration continue
La face cachée de la mesure : une opportunité pour votre amélioration continueLa face cachée de la mesure : une opportunité pour votre amélioration continue
La face cachée de la mesure : une opportunité pour votre amélioration continue
 
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfo
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfoE-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfo
E-Metrics Paris 2011 - Libérer l'action pour faire bondir sa transfo
 
Les secrets d’un taux de conversion de champion
Les secrets d’un taux de conversion de championLes secrets d’un taux de conversion de champion
Les secrets d’un taux de conversion de champion
 
Conférence transformation E-commerce Paris 2010
Conférence transformation E-commerce Paris 2010Conférence transformation E-commerce Paris 2010
Conférence transformation E-commerce Paris 2010
 
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"
E-Commerce Paris 2010 : Optimisation Transfo "Petit mais costaud"
 
Emailing : Le défi Multi-Canal
Emailing : Le défi Multi-CanalEmailing : Le défi Multi-Canal
Emailing : Le défi Multi-Canal
 
Web-UX / Agile avec UX
Web-UX / Agile avec UXWeb-UX / Agile avec UX
Web-UX / Agile avec UX
 
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
Guide des AAP, AMI et actions du Programme Investissements d'Avenir (PIA) - m...
 
BtoBIM2017_Conf_Maître d'ouvrage
BtoBIM2017_Conf_Maître d'ouvrageBtoBIM2017_Conf_Maître d'ouvrage
BtoBIM2017_Conf_Maître d'ouvrage
 
A13 big data et web sémantique
A13  big data et web sémantiqueA13  big data et web sémantique
A13 big data et web sémantique
 
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
博士学位論文「マイクロブログにおける暗黙的な実体参照の解決および検索」
 
Sct 2009 Presentation
Sct 2009 PresentationSct 2009 Presentation
Sct 2009 Presentation
 
Le Crowdfunding pour les artistes et musiciens
Le Crowdfunding pour les artistes et musiciensLe Crowdfunding pour les artistes et musiciens
Le Crowdfunding pour les artistes et musiciens
 
Mini CV MBA MCI Full Time 2014
Mini CV MBA MCI Full Time 2014Mini CV MBA MCI Full Time 2014
Mini CV MBA MCI Full Time 2014
 
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 20098020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
8020 Ne Vendez Plus! DéJeuner ConféRence 7 Avril 2009
 
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
HISTOIRE ET PANORAMA DU WEB À DESTINATION DES PROFESSIONNELS DE L'IMAGE ET DE...
 
道与禅
道与禅道与禅
道与禅
 
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ20 ΚΑΡΤΕΣ ΜΑΘΗΜΑΤΟΣ 4.1 (ΕΚΤΥΠΩΣΗ)
 
Accurate set-up-mahir
Accurate set-up-mahirAccurate set-up-mahir
Accurate set-up-mahir
 
Dianova Portugal at Social Stock Exchange Project 2009
Dianova Portugal at Social Stock Exchange Project 2009Dianova Portugal at Social Stock Exchange Project 2009
Dianova Portugal at Social Stock Exchange Project 2009
 

Plus de Atlantic 2.0

Deck petits-ateliers-Gens de confiance(1)
Deck petits-ateliers-Gens de confiance(1)Deck petits-ateliers-Gens de confiance(1)
Deck petits-ateliers-Gens de confiance(1)
Atlantic 2.0
 
[Swna’16] Tiplat
[Swna’16] Tiplat[Swna’16] Tiplat
[Swna’16] Tiplat
Atlantic 2.0
 
[Swna’16] stomp boy
[Swna’16] stomp boy[Swna’16] stomp boy
[Swna’16] stomp boy
Atlantic 2.0
 
[Swna’16] bananads
[Swna’16] bananads[Swna’16] bananads
[Swna’16] bananads
Atlantic 2.0
 
[SWNA’16] Diggidee
[SWNA’16] Diggidee[SWNA’16] Diggidee
[SWNA’16] Diggidee
Atlantic 2.0
 
[SWNA’16] Chartit
[SWNA’16] Chartit[SWNA’16] Chartit
[SWNA’16] Chartit
Atlantic 2.0
 
[SWNA’16] Spark
[SWNA’16] Spark[SWNA’16] Spark
[SWNA’16] Spark
Atlantic 2.0
 
[SWNA’16] Enigmap
[SWNA’16] Enigmap[SWNA’16] Enigmap
[SWNA’16] Enigmap
Atlantic 2.0
 
[SWNA’16] Wheeldream
[SWNA’16] Wheeldream[SWNA’16] Wheeldream
[SWNA’16] Wheeldream
Atlantic 2.0
 
[SWNA’16] Cocoricoloc
[SWNA’16] Cocoricoloc[SWNA’16] Cocoricoloc
[SWNA’16] Cocoricoloc
Atlantic 2.0
 
[SWNA’16] Faim de service
[SWNA’16] Faim de service[SWNA’16] Faim de service
[SWNA’16] Faim de service
Atlantic 2.0
 
[SWNA’16] Bot mynight
[SWNA’16] Bot mynight[SWNA’16] Bot mynight
[SWNA’16] Bot mynight
Atlantic 2.0
 
[SWNA’16] Oye
[SWNA’16] Oye[SWNA’16] Oye
[SWNA’16] Oye
Atlantic 2.0
 
[SWNA’16] Apylink
[SWNA’16] Apylink[SWNA’16] Apylink
[SWNA’16] Apylink
Atlantic 2.0
 
[SWNA’16] Le bail éphémère
[SWNA’16] Le bail éphémère[SWNA’16] Le bail éphémère
[SWNA’16] Le bail éphémère
Atlantic 2.0
 
[SWNA’16] Lekte.co
[SWNA’16] Lekte.co[SWNA’16] Lekte.co
[SWNA’16] Lekte.co
Atlantic 2.0
 
[SWNA’16] Votum
[SWNA’16] Votum[SWNA’16] Votum
[SWNA’16] Votum
Atlantic 2.0
 
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir
ADW #8 : Performance web, mesurer et optimiser pour mieux convertirADW #8 : Performance web, mesurer et optimiser pour mieux convertir
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir
Atlantic 2.0
 
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
Atlantic 2.0
 
ADW #7 : La voix du client au service de la performance
ADW #7 : La voix du client au service de la performanceADW #7 : La voix du client au service de la performance
ADW #7 : La voix du client au service de la performance
Atlantic 2.0
 

Plus de Atlantic 2.0 (20)

Deck petits-ateliers-Gens de confiance(1)
Deck petits-ateliers-Gens de confiance(1)Deck petits-ateliers-Gens de confiance(1)
Deck petits-ateliers-Gens de confiance(1)
 
[Swna’16] Tiplat
[Swna’16] Tiplat[Swna’16] Tiplat
[Swna’16] Tiplat
 
[Swna’16] stomp boy
[Swna’16] stomp boy[Swna’16] stomp boy
[Swna’16] stomp boy
 
[Swna’16] bananads
[Swna’16] bananads[Swna’16] bananads
[Swna’16] bananads
 
[SWNA’16] Diggidee
[SWNA’16] Diggidee[SWNA’16] Diggidee
[SWNA’16] Diggidee
 
[SWNA’16] Chartit
[SWNA’16] Chartit[SWNA’16] Chartit
[SWNA’16] Chartit
 
[SWNA’16] Spark
[SWNA’16] Spark[SWNA’16] Spark
[SWNA’16] Spark
 
[SWNA’16] Enigmap
[SWNA’16] Enigmap[SWNA’16] Enigmap
[SWNA’16] Enigmap
 
[SWNA’16] Wheeldream
[SWNA’16] Wheeldream[SWNA’16] Wheeldream
[SWNA’16] Wheeldream
 
[SWNA’16] Cocoricoloc
[SWNA’16] Cocoricoloc[SWNA’16] Cocoricoloc
[SWNA’16] Cocoricoloc
 
[SWNA’16] Faim de service
[SWNA’16] Faim de service[SWNA’16] Faim de service
[SWNA’16] Faim de service
 
[SWNA’16] Bot mynight
[SWNA’16] Bot mynight[SWNA’16] Bot mynight
[SWNA’16] Bot mynight
 
[SWNA’16] Oye
[SWNA’16] Oye[SWNA’16] Oye
[SWNA’16] Oye
 
[SWNA’16] Apylink
[SWNA’16] Apylink[SWNA’16] Apylink
[SWNA’16] Apylink
 
[SWNA’16] Le bail éphémère
[SWNA’16] Le bail éphémère[SWNA’16] Le bail éphémère
[SWNA’16] Le bail éphémère
 
[SWNA’16] Lekte.co
[SWNA’16] Lekte.co[SWNA’16] Lekte.co
[SWNA’16] Lekte.co
 
[SWNA’16] Votum
[SWNA’16] Votum[SWNA’16] Votum
[SWNA’16] Votum
 
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir
ADW #8 : Performance web, mesurer et optimiser pour mieux convertirADW #8 : Performance web, mesurer et optimiser pour mieux convertir
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir
 
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
Atelier e-Commerce #6 : Comment construire sa stratégie digitale e-commerce ?
 
ADW #7 : La voix du client au service de la performance
ADW #7 : La voix du client au service de la performanceADW #7 : La voix du client au service de la performance
ADW #7 : La voix du client au service de la performance
 

Web perf et rdc par Stephane Rios

  • 1. Make It Fast, Keep It Fast OUAT Conf Nantes 30/11/2011 Stéphane RIOS - Fasterize - @stefounet
  • 3. A,"+-' • Mon parcours • Un peu de Lean, d’Agile, voire de DevOps • WebPerf • enjeux et contexte • technologies, règles, outils • fasterize • futur
  • 4.
  • 5. N.('#,)" ... • ZX Spectrum en 1982, VIC20, C64, consoles, etc ... • (des études) • Gopher, Veronica, www en mode 3270 en1993 • première page HTML en 1994 (NCSA Mosaic) • serveur Web en 1994 sur windows 3.11 • Webnet (“webagency”) en 1996 • RueDuCommerce en 2000
  • 6. C/'$$"!r -’*&("( "( -" 0$ • démarrage à une époque où les ressources sont rares et limitées (on optimise au maximum ce dont on dispose) • pages < 5ko, 16 couleurs premier site : intranet compta France Telecom, 90% des • de temps toujours à traquer l’octet en trop, la requête qui met trop
  • 7. R!"D!C*00"r&".&*0 • “leader du eCommerce en France” • distribution classique (depuis aout 1999) • galerie marchande (août 2007) • 370 M€ de volume d’affaire • 8 millions de visiteurs / mois • 100 millions de pages vues /mois • plusieurs milliards de hits / mois • pure player • croissance rentable
  • 8. S('r(!p “f*!r0)” • “vieille startup” (pas vraiment hackathon ...) • d’abord CTO Adjoint puis CTO • premier chantier : optimisation • réécriture d’une bonne partie du site 3 frontaux jusqu'en 2004 • RAM, disque” pas dans l'esprit : “on a qu'à rajouter des serveurs, CPU, • optimisation à fond des ressources (meilleure scalabilité)
  • 9. U+ p"! -" ("&/+)q!" • 3 datacenters, 200 serveurs, 2 CDN • Load balancing local & global (F5, LVS) • MySQL Base de données SQL Server 2000 / 2005 / 2008 & • Réplication dans tous les sens • Coeur de réseau fibre optique éclairée • PHP5, ColdFusion5 • Moteur de recherche : Sinequa Intuition • Cache à tous les étages !
  • 11. V*#!0%(r)" • 10 millions de users • 20 millions d’offres • des tables plusieurs centaines de millions d’enregistrements • 5000 hits/s • 15 millions de pages indexées dans Google • chaque octet compte !
  • 13. E( 'prè$ ? • la perf est un état d’esprit global (et peu de personnes l’ont) • CTO c’est quand même la meilleure place • le “one-again” (ie à l’arrache) ne tient pas dans la durée • développer le moins possible • mettre en place une usine de dev • tester • passer aux méthodes Agile ! • comprendre la technique et le business est un atout majeur
  • 14. S#)-" q!) (!" • Lean • Agile • DevOps • Lean Startup
  • 15. D%v"#*pp"0"+( A,)#" • Approche prédictive vs Approche adaptative (itération) • 3 choses qu’on tient pour vrai : • le “client” sait ce qu’il veut • le développeur sait comment le construire • surtout rien ne change en cours de route ! • mais nous devons plutôt vivre avec : • le client découvre ce qu’il veut • le développeur découvre comment le construire • le monde change !
  • 18. V'#"!r$ • Keep It Smart & Simple
  • 19. V'#"!r$ • Keep It Smart & Simple • Build quality in
  • 20. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments
  • 21. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast
  • 22. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all
  • 23. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people !
  • 24. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people ! • Transparency
  • 25. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people ! • Transparency • Embrace failure
  • 26. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people ! • Transparency • Embrace failure • Automate all U can
  • 27. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people ! • Transparency • Embrace failure • Automate all U can • JFDI
  • 28. V'#"!r$ • Keep It Smart & Simple • Build quality in • Eliminate waste, remove impediments • Go fast / Fail Fast • Measure all • Respect people ! • Transparency • Embrace failure • Automate all U can • JFDI Just Fucking Do It
  • 29. Make It Fast, Keep It Fast De la Webperf ! (enfin)
  • 30. L"$ "+2"3 De nombreuses études réalisées par Amazon [1], Google[2],Yahoo[3], AOL[4], Bing[5] ou bien Shopzilla[6] ont montré que la performance Web avait un impact direct et fort sur le business des sites Web
  • 31. L"$ "+2"3 • Sur le chiffre d’affaire [1] : chez Amazon,100 ms de temps de chargement en plus provoque une baisse de 1% de chiffre d’affaire • Sur le référencement naturel [7] : selon la communauté des webmasters, au delà de 4s, Google modifie son classement • provoque une baisse de trafic d’environ 10% sur cette Sur le trafic : selon Yahoo, une page plus lente de 400ms [3] page
  • 32. B)+, • p
  • 33. AOL • Les  pages  les  plus  lentes  sont  celles  qui  ont  le  moins  de  trafic
  • 34. P!b • A user who has to endure an 8-second download delay spends only 1% of their total viewing time looking at the featured promotional space on a landing page. In contrast, a user who receives instantaneous page rendering spends 20% of viewing time within the promotional area.
  • 35.
  • 36. P"r&"p()*+ • L’ analyse des ondes cérébrales révèle que les internautes doivent se concentrer jusqu'à 50% de plus lors de l'utilisation de sites Web répondant mal. • Un internaute perçoit un site environ 15% plus lent qu’il n’est réellement. Quand il en parle, il annonce 35% de plus ! • Ce sont les premiers éléments d’une page qui comptent le plus
  • 37. P"r&"p()*+ (!"# '$"# "#()*+,-./0*12/#(+#0*+3#()*4*/(2/# '!"# &$"# &'"# &!"# %$"# &&"# $%"# %!"# $"# !"# !"# &#)#(#*+,-./+*# &#)#0#*+,-./+*# &#)#1#*+,-./+*# &#)#%!#*+,-./+*# 56*/,.-./0#(*/7#8.#0.-97#(.#:6*;,.-./0#
  • 38.
  • 39. L"$ "+2"3 • Les internautes ne veulent plus attendre ! [12] ,$-.#"-/01-2-"(3/4$'5$"./6"2'"1'5$6'/25$" +" *" )" (" '" &" %" $" #" !"#$%&'($#" )"#$%&'($#" *"#$%&'($#" +" !" #+++" $!!(" $!!+" $!#$"
  • 41. Rè,#" -’*r • 10 Golden Principles for Building Successful Web Applications • 1. Speed • feature. Speed is the most important feature. If your “First and foremost, we believe that speed is more than a application is slow, people won’t use it.”
  • 42. Rè,#" -’*r • 10 Golden Principles for Building Successful Web Applications • 1. Speed • feature. Speed is the most important feature. If your “First and foremost, we believe that speed is more than a application is slow, people won’t use it.” • Fred Wilson (Entrepreneur, Twitter, del.icio.us ..)
  • 43.
  • 45. T*!$ G**,#)$%$ ! • Google est (ultra)rapide
  • 46. T*!$ G**,#)$%$ ! • Google est (ultra)rapide • Amazon est rapide
  • 47. T*!$ G**,#)$%$ ! • Google est (ultra)rapide • Amazon est rapide • Facebook est rapide
  • 48. T*!$ G**,#)$%$ ! • Google est (ultra)rapide • Amazon est rapide • Facebook est rapide • Un seul Internet
  • 49. T*!$ G**,#)$%$ ! • Google est (ultra)rapide • Amazon est rapide • Facebook est rapide • Un seul Internet • que votre site soit plus lent que la recherche Google ou Du point de vue des internautes, il n’y a pas de raison à ce que le site d'Amazon.
  • 50. L" &*+(4(" • Les performances d’un site Web dépendent [13] : • du temps de réponse du serveur (~20% du total) • du temps de chargement des pages HTML (~80% du total) • Les pages sont devenues (hyper)complexes • Pourtant on a l’ADSL non ? • la latence n’est (presque) pas une une question de débit ! • users don’t leave in datacenters !
  • 51. ! C*0p#4)(% "#$$%! &'##! 96 éléments, 12 domaines, 530 Ko &!()(*(+,-! $%!()(*(+,-! #!./*01+! 2 éléments, 1 domaine, 10 Ko #&!./*01+-! #'!21)/34,(-! 56'!21)/34,(-!
  • 52. C*0p#4)(% DES PAGES DE PLUS EN PLUS COMPLEXES ~15ko ~498ko ~700Ko 2,3 objets 75 objets 83 objets
  • 53.
  • 54. 5)r- P'r(6 • Widget “sociaux” • facebook, google+, twitter • disqus, addthis • Pub • les pires ... • Analytics • Autre • retargeting • cross-selling • etc ...
  • 58.
  • 59. Or,'+)$'()*+ • Les organisations sont complexes • les acteurs sont multiples • les sources de contenu sont multiples • pas prioritaire longtemps • et surtout pas orientées pour générer de la perf • Accélérer c’est possible pour tout le monde • plus de travail ! S’organiser pour aller vite constamment demande un peu • VelocityConf ≠ SpeedConf
  • 60.
  • 62. L"$ ('b#"$ -" #' L*) 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make AJAX Cacheable
  • 63. L" N*7"'! T"$('0"+( • Async Loading JS / CSS • Sprites • Lazy Loading • SPDY • Domain Sharding • Cookieless domain • prefetch / prerender • dns prefetch • Cache
  • 64. E( #" 0*b)#" ? • C’est pire ! • browser moins puissant • machines moins puissantes • le fonctionnement du réseau est différent • Les règles sont soit complètement différentes, soit encore plus importantes • Solution : un site mobile différent du site “desktop” ! • problème de maintenance • les utilisateurs préfèrent le “vrai” site, ils attendent la même expérience
  • 65. R%$!0% • Les organisations sont complexes • Les règles sont complexes • Elle nécessite des expertises fortes et multiples (de TCP/IP à CSS3 !) • C’est un domaine en évolution constante (IE6 à Chrome 15 !) • C’est un chantier sans fin ... • ... qui finit par ne plus être prioritaire
  • 66. L"$ *!()#$ • Monitoring • IPLabel, Gomez, Keynote, ... • Check “one shot” • Yslow • Page Speed • WebPageTest (webpagetest.org ou wpt.fasterize.com) • Dynatrace • Optimizers de composants • SpriteMe • SmushIt • Closure Compiler
  • 67. L"$ 0%(r)q!"$ • Note globale • TTFB • Start Render • AFT • Page Load Time • Nb de requêtes • Poids, complexité du DOM • Time To First Click (© stefounet) • technique • business
  • 70. WPOA • Software • mod_pagespeed • plugins pour certains CMS • Hardware • Strangeloop • “Cloud” • yottaa, torbit, strangeloop, cloudflare, blaze • Fasterize !
  • 71. F'$("r8" • Fasterize est un accélérateur de site Web en mode SaaS • HTML et simplifie la mise en oeuvre de ces optimisations Fasterize intervient sur le temps de chargement des pages • Une équipe de geeks • Des fondateurs reconnus pour leur expérience • Stéphane RIOS, CEO • Vincent Voyer, expert Web Performance • Advisory Board : ex-CTO de Dailymotion, CEO de Viavoo, ...
  • 72. N*(r" *ffr" • Une optimisation en temps réel du temps de chargement des pages HTML • Une offre SaaS (Software as a Service) • sous forme d’abonnement mensuel • un tarif en fonction du nombre de pages vues / mois • Sans contraintes • pas de coûts d’investissements, pas d’engagement (SaaS) • intégration et évolutions transparentes (matérielle, logicielle, process), • Transfert de compétences en option (audit, conseil)
  • 74. C*00"+( ç' 0'r&/" ? ,$-%'./$ )*+ le Go og web html sc CSS imag ('$#' rip !" e "!"!"!!!!""!""!"! t ""! """ ! script !""! !" !"" "!!"" !"! " !"!! !""!"!! " ! !" """ !!!"! !"" """! """"!"! image ! ""! !"!"! "!!! ! "! !""" !""!!"" !! """ "!!!" !!"" """! !"!"!!! !" "!! "!! !"!! ""!! !"!!!"" Dat "!" ! "! """"! !!"!"!! as !"!! "!"! Data s Sans Fasterize : les pages sont lourdes et lentes à charger
  • 75. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS
  • 76. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression
  • 77. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression Concaténation
  • 78. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression Concaténation Optimisation du cache
  • 79. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression Concaténation Optimisation du cache Réorganisation du code
  • 80. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression Concaténation Optimisation du cache Réorganisation du code ...
  • 81. C*00"+( ç' 0'r&/" ? ,$-%'./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&'$#' CSS CSS imag e imag imagee CSS Compression Concaténation Optimisation du cache Réorganisation du code ... Avec Fasterize : des pages optimisées et rapides à charger
  • 82. L"$ b%+%1&"$ b!$)+"$$ • Augmentation du taux de transformation • Augmentation du trafic • pages vues • temps passé par visite • Augmentation de la satisfaction utilisateur • Amélioration de l’image • Amélioration du référencement naturel
  • 83. L"$ b%+%1&"$ IT • Des équipes IT focus sur le développement de nouvelles fonctionnalités (productivité) • performances du site Le manque de ressources techniques ne pénalise pas les • développements Un impact immédiat, sans attendre des semaines de • Des économies de bande passante et de matériel
  • 84. F*+&()*++'#)(%$ • Le moteur de Fasterize intervient à plusieurs niveaux • Perception (start render) • Gestion de cache • async loading js • optimisation des TTL • lazy loading images • URL versionning • Optimisation de contenu • Réseau • minification JS / CSS • domain sharding • concaténation JS / CSS • cookie-less domains • compression (gzip, images)
  • 85.
  • 86.
  • 87. M)$" "+ *"7r" • Pas de modification de code et d’infrastructure • Pas de paramétrages spécifiques • identique à la production (plateforme de staging) Possibilité de tester dans un environnement séparé mais • Sans danger • plateforme hautement tolérante aux pannes, validée par des tests de charge, architecture distribuée • autoscaling (ajout de serveurs automatiquement en fonction de la charge) • coupe circuit via unde Fasterize,indépendantroutécas deles serveursgrave sur l’infrastructure opérateur le trafic est : en vers problème d’origine
  • 88. M)$" "+ *"7r" • Le site Web dispose déjà d’un CDN ? • configuration de l’origine des CDN en origin.monsite.com.fasterized.com • c’est parti ! • Le site Web ne dispose pas d’un CDN ? • configuration de plusieurs CDN choisis par Fasterize • configuration de l’origine des CDN • c’est parti ! • CDN = Content Delivery Network (Akamaï, Cotendo, CloudFront, etc ...)
  • 89. M)$" "+ *"7r" • Possibilité de tester en live les résultats d’une optimisation pour le site entier • Nécessite peu de préparatif et de configuration (DNS) • Aucune préparation de la part du site testé
  • 90. F!(!r
  • 91. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle
  • 92. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle • Google Instant Pages • utilisation du prerendering • déjà actif avec Chrome, sur les premiers résultats de la page de recherche
  • 93. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle • Google Instant Pages • utilisation du prerendering • déjà actif avec Chrome, sur les premiers résultats de la page de recherche • Amazon Silk • dynamic split of rendering in the Cloud
  • 94. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle • Google Instant Pages • utilisation du prerendering • déjà actif avec Chrome, sur les premiers résultats de la page de recherche !"#$%&'()*+&,( • Amazon Silk • dynamic split of rendering in the Cloud EC2 Kindle Fire
  • 95. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle • Google Instant Pages • utilisation du prerendering • déjà actif avec Chrome, sur les premiers résultats de la page de recherche !"#$%&'()*+&,( • Amazon Silk • dynamic split of rendering in the Cloud EC2 EC2 Kindle Fire Kindle Fire
  • 96. F!(!r • Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle • Google Instant Pages • utilisation du prerendering • déjà actif avec Chrome, sur les premiers résultats de la page de recherche !"#$%&'()*+&,( • Amazon Silk • dynamic split of rendering in the Cloud EC2 EC2 Kindle Fire Kindle Fire EC2 Kindle Fire
  • 97. C*+&#!$)*+ • Cdiscount vs RueDuCommerce
  • 98. C*+&#!$)*+ • Cdiscount vs RueDuCommerce
  • 100. S*!r&"$ • [1] http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html et https://sites.google.com/site/ glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0 • [2] Google, Bing : http://en.oreilly.com/velocity2009/public/schedule/detail/8523 • [3 ]Yahoo! : http://www.slideshare.net/stoyan/yslow-20-presentation • [4] AOL: http://en.oreilly.com/velocity2009/public/schedule/detail/7579 • [5] Bing : http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online- business • [6] Shopzilla : http://en.oreilly.com/velocity2009/public/schedule/detail/7709 • [7] http://www.seroundtable.com/page-load-time-google-ranking-factor-2011-12825.html et http:// www.webmasterworld.com/google/4254879.htm • [8] http://www.useit.com/alertbox/response-times.html • [9] Stoyan Stefanov : http://www.phpied.com/psychology-of-performance/ • [10] Adwords : http://adwords.google.com/support/aw/bin/answer.py?hl=en&answer=87144 • [11] RueDuCommerce : http://www.journaldunet.com/ebusiness/commerce/rue-du-commerce-performant- a-noel.shtml • [12] http://blog.smartbear.com/post/09-10-14/5-10-15-seconds-How-Long-Will-You-Wait-For-a-Web-Page- to-Load/ • [13] http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performance/
  • 101. R%f%r"+&"$ • Fred Wilson’s 10 Golden Principles of Successful Web Apps : http://thinkvitamin.com/web-apps/fred-wilsons-10-golden- principles-of-successful-web-apps/ • http://agilesoftwaredevelopment.com/leanprinciples • http://blog.davidsingleton.org/mobiletcp • http://www.measureworks.nl/en/ • http://www.webperformancetoday.com/ • optimization-hub/ http://www.strangeloopnetworks.com/web-performance- • http://www.paperplanes.de/2011/7/25/ web_operations_101_for_developers.html
  • 102. L"&(!r"$ • Implementing Lean Software Development : from Concept to Cash - Mary & Tom Poppendieck • Le But - Eliyahu M. Goldratt • Hors piste - Pierre Letourneur (ouvrage collectif) • Hors de la crise - W. Edwards Deming • Scrum And XP from the trenches - Henry Kniberg • Building Scalable Websites - Cal Henderson • High Performances WebSite - Steve Souders • Even Faster WebSite - Steve Souders & Al • L’art de démotiver ses collaborateurs et de saborder son entreprise - François Bocquet • Partageons ce qui nous départage - ouvrage collectif (Octo)
  • 103. C*+('&($ • Je suis à votre disposition ! • mail : s@fasterize.com • twitter : http://twitter.com/fasterize • site web : http://www.fasterize.com • linkedin : http://www.linkedin.com/company/fasterize • téléphone : +33 6 30 26 44 80