0
Make It Fast, Keep It Fast                 OUAT Conf Nantes                    30/11/2011Stéphane RIOS - Fasterize - @stef...
Q!"#q!"$ pr%&!()*+$
A,"+-•  Mon parcours• Un peu de Lean, d’Agile, voire de DevOps• WebPerf • enjeux et contexte • technologies, règles, outil...
N.(#,)" ...• ZX Spectrum en 1982, VIC20, C64, consoles, etc ...• (des études)• Gopher, Veronica, www en mode 3270 en1993• ...
C/$$"!r -’*&("( "( -" 0$•  démarrage à une époque où les ressources sont rares et   limitées (on optimise au maximum ce do...
R!"D!C*00"r&".&*0•   “leader du eCommerce en France” • distribution classique (depuis aout 1999) • galerie marchande (août...
S(r(!p “f*!r0)”•  “vieille startup” (pas vraiment hackathon ...)• d’abord CTO Adjoint puis CTO• premier chantier : optimis...
U+ p"! -" ("&/+)q!"• 3 datacenters, 200 serveurs, 2 CDN• Load balancing local & global (F5, LVS)• MySQL  Base de données S...
D! (r1& !
V*#!0%(r)"•  10 millions de users• 20 millions d’offres• des tables plusieurs centaines de millions d’enregistrements• 500...
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...
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 “clie...
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• R...
V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• R...
V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• R...
V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• R...
V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• R...
V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• R...
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 mont...
L"$ "+2"3•   Sur le chiffre d’affaire [1] : chez Amazon,100 ms de temps    de chargement en plus provoque une baisse de 1%...
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   ...
P"r&"p()*+•   L’ analyse des ondes cérébrales révèle que les internautes    doivent se concentrer jusquà 50% de plus lors ...
P"r&"p()*+                                     (!"#                                     $"#"#()*+,-./0*12/#(+#0*+3#()*4*/(...
L"$ "+2"3•    Les internautes ne veulent plus attendre !      [12]              ,$-.#"-/01-2-"(3/4$5$"./6"2"15$6/25$"+"*")...
Rè,#" -’*r
Rè,#" -’*r•  10 Golden Principles for Building Successful Web   Applications• 1. Speed• feature. Speed is the most importa...
Rè,#" -’*r•  10 Golden Principles for Building Successful Web   Applications• 1. Speed• feature. Speed is the most importa...
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...
L" &*+(4("•   Les performances d’un site Web dépendent               [13]   : • du temps de réponse du serveur (~20% du to...
!                                               C*0p#4)(%"#$$%!                              &##!                         ...
C*0p#4)(%DES PAGES DE PLUS EN PLUS COMPLEXES  ~15ko       ~498ko        ~700Ko2,3 objets   75 objets     83 objets
5)r- Pr(6• Widget “sociaux” • facebook, google+, twitter • disqus, addthis•   Pub • les pires ...• Analytics• Autre • reta...
W("rf##
W("rf## !
W("rf## ?
Or,+)$()*+•   Les organisations sont complexes • les acteurs sont multiples • les sources de contenu sont multiples • pas ...
U+ &/+()"r $+$ 1+
L"$ (b#"$ -" # L*)    1.   Make Fewer HTTP Requests    2.   Use a Content Delivery Network    3.   Add an Expires Header  ...
L" N*7"! T"$(0"+(•  Async Loading JS / CSS• Sprites• Lazy Loading• SPDY• Domain Sharding• Cookieless domain• prefetch / pr...
E( #" 0*b)#" ?•   C’est pire ! • browser moins puissant • machines moins puissantes • le fonctionnement du réseau est diff...
R%$!0%•  Les organisations sont complexes• Les règles sont complexes  • Elle nécessite des expertises fortes et multiples ...
L"$ *!()#$• Monitoring • IPLabel, Gomez, Keynote, ...• Check “one shot” • Yslow • Page Speed • WebPageTest (webpagetest.or...
L"$ 0%(r)q!"$•  Note globale• TTFB• Start Render• AFT• Page Load Time• Nb de requêtes• Poids, complexité du DOM• Time To F...
DIY v$ A!(*0("
DIY v$ A!(*0("
WPOA•   Software• mod_pagespeed• plugins pour certains CMS•   Hardware• Strangeloop•   “Cloud”• yottaa, torbit, strangeloo...
F$("r8"•   Fasterize est un accélérateur de site Web en mode SaaS• HTML et simplifie la mise en oeuvre de ces optimisations...
N*(r" *ffr"•   Une optimisation en temps réel du temps de chargement    des pages HTML• Une offre SaaS (Software as a Servi...
C*00"+( ç 0r&/" ?
C*00"+( ç 0r&/" ?      ,$-%./$                                                                                           )...
C*00"+( ç 0r&/" ?,$-%./$                        !""!!"!""!"!!                      !""!!"!""!"!!                        !"...
C*00"+( ç 0r&/" ?,$-%./$                                  !""!!"!""!"!!                                !""!!"!""!"!!      ...
C*00"+( ç 0r&/" ?,$-%./$                                    !""!!"!""!"!!                                  !""!!"!""!"!!  ...
C*00"+( ç 0r&/" ?,$-%./$                                            !""!!"!""!"!!                                         ...
C*00"+( ç 0r&/" ?,$-%./$                                             !""!!"!""!"!!                                        ...
C*00"+( ç 0r&/" ?,$-%./$                                             !""!!"!""!"!!                                        ...
C*00"+( ç 0r&/" ?     ,$-%./$                                                  !""!!"!""!"!!                              ...
L"$ b%+%1&"$ b!$)+"$$•  Augmentation du taux de transformation• Augmentation du trafic • pages vues • temps passé par visit...
L"$ b%+%1&"$ IT•  Des équipes IT focus sur le développement de nouvelles   fonctionnalités (productivité)• performances du...
F*+&()*++#)(%$• Le moteur de Fasterize intervient à plusieurs niveaux• Perception (start render)   •   Gestion de cache • ...
M)$" "+ *"7r"•  Pas de modification de code et d’infrastructure• Pas de paramétrages spécifiques• identique à la production ...
M)$" "+ *"7r"•   Le site Web dispose déjà d’un CDN ?• configuration de l’origine des CDN en origin.monsite.com.fasterized.c...
M)$" "+ *"7r"•  Possibilité de tester en live les résultats d’une optimisation   pour le site entier• Nécessite peu de pré...
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 prere...
F!(!r•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération    matérielle• Google Instant Pages • utilisation du pre...
F!(!r•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération    matérielle• Google Instant Pages • utilisation du pre...
F!(!r•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération    matérielle• Google Instant Pages • utilisation du pre...
F!(!r•   Browser : disparition d’IE6/IE7/IE8, HTML5, accélération    matérielle• Google Instant Pages • utilisation du pre...
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/    glind...
R%f%r"+&"$•   Fred Wilson’s 10 Golden Principles of Successful Web Apps :    http://thinkvitamin.com/web-apps/fred-wilsons...
L"&(!r"$•   Implementing Lean Software Development : from Concept to Cash - Mary    & Tom Poppendieck•   Le But - Eliyahu ...
C*+(&($• Je suis à votre disposition !  • mail : s@fasterize.com  • twitter : http://twitter.com/fasterize  • site web : h...
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Web perf et rdc par Stephane Rios
Upcoming SlideShare
Loading in...5
×

Web perf et rdc par Stephane Rios

877

Published on

Stephane Rios, ex-CTO de Rue du Commerce et CEO/CTO à Fasterize, présentait à la Cantine numérique de Nantes son parcours, sa vision et les enjeux de la Web Performance.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web perf et rdc par Stephane Rios"

  1. 1. Make It Fast, Keep It Fast OUAT Conf Nantes 30/11/2011Stéphane RIOS - Fasterize - @stefounet
  2. 2. Q!"#q!"$ pr%&!()*+$
  3. 3. A,"+-• Mon parcours• Un peu de Lean, d’Agile, voire de DevOps• WebPerf • enjeux et contexte • technologies, règles, outils • fasterize • futur
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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 jusquen 2004• RAM, disque” pas dans lesprit : “on a quà rajouter des serveurs, CPU,• optimisation à fond des ressources (meilleure scalabilité)
  8. 8. 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 !
  9. 9. D! (r1& !
  10. 10. 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 !
  11. 11. R%$!#((
  12. 12. 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
  13. 13. S#)-" q!) (!"• Lean• Agile• DevOps• Lean Startup
  14. 14. 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 !
  15. 15. C*û( -! &/+,"0"+(
  16. 16. V#"!r$
  17. 17. V#"!r$• Keep It Smart & Simple
  18. 18. V#"!r$• Keep It Smart & Simple• Build quality in
  19. 19. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments
  20. 20. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast
  21. 21. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all
  22. 22. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• Respect people !
  23. 23. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• Respect people !• Transparency
  24. 24. V#"!r$• Keep It Smart & Simple• Build quality in• Eliminate waste, remove impediments• Go fast / Fail Fast• Measure all• Respect people !• Transparency• Embrace failure
  25. 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• Automate all U can
  26. 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• JFDI
  27. 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 Just Fucking Do It
  28. 28. Make It Fast, Keep It Fast De la Webperf ! (enfin)
  29. 29. 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 unimpact direct et fort sur le business des sites Web
  30. 30. 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
  31. 31. B)+,• p
  32. 32. AOL• Les  pages  les  plus  lentes  sont  celles  qui  ont  le  moins  de  trafic
  33. 33. 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.
  34. 34. 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 lutilisation 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
  35. 35. P"r&"p()*+ (!"# $"#"#()*+,-./0*12/#(+#0*+3#()*4*/(2/# !"# &$"# &"# &!"# %$"# &&"# $%"# %!"# $"# !"# !"# &#)#(#*+,-./+*# &#)#0#*+,-./+*# &#)#1#*+,-./+*# &#)#%!#*+,-./+*# 56*/,.-./0#(*/7#8.#0.-97#(.#:6*;,.-./0#
  36. 36. L"$ "+2"3• Les internautes ne veulent plus attendre ! [12] ,$-.#"-/01-2-"(3/4$5$"./6"2"15$6/25$"+"*")"(""&"%"$"#" !"#$%&($#" )"#$%&($#" *"#$%&($#" +"!" #+++" $!!(" $!!+" $!#$"
  37. 37. Rè,#" -’*r
  38. 38. 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.”
  39. 39. 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 ..)
  40. 40. T*!$ G**,#)$%$ !
  41. 41. T*!$ G**,#)$%$ !• Google est (ultra)rapide
  42. 42. T*!$ G**,#)$%$ !• Google est (ultra)rapide• Amazon est rapide
  43. 43. T*!$ G**,#)$%$ !• Google est (ultra)rapide• Amazon est rapide• Facebook est rapide
  44. 44. T*!$ G**,#)$%$ !• Google est (ultra)rapide• Amazon est rapide• Facebook est rapide• Un seul Internet
  45. 45. 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 dAmazon.
  46. 46. 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 !
  47. 47. ! C*0p#4)(%"#$$%! &##! 96 éléments, 12 domaines, 530 Ko&!()(*(+,-! $%!()(*(+,-!#!./*01+! 2 éléments, 1 domaine, 10 Ko #&!./*01+-!#!21)/34,(-! 56!21)/34,(-!
  48. 48. C*0p#4)(%DES PAGES DE PLUS EN PLUS COMPLEXES ~15ko ~498ko ~700Ko2,3 objets 75 objets 83 objets
  49. 49. 5)r- Pr(6• Widget “sociaux” • facebook, google+, twitter • disqus, addthis• Pub • les pires ...• Analytics• Autre • retargeting • cross-selling • etc ...
  50. 50. W("rf##
  51. 51. W("rf## !
  52. 52. W("rf## ?
  53. 53. 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
  54. 54. U+ &/+()"r $+$ 1+
  55. 55. 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
  56. 56. L" N*7"! T"$(0"+(• Async Loading JS / CSS• Sprites• Lazy Loading• SPDY• Domain Sharding• Cookieless domain• prefetch / prerender• dns prefetch• Cache
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. DIY v$ A!(*0("
  62. 62. DIY v$ A!(*0("
  63. 63. WPOA• Software• mod_pagespeed• plugins pour certains CMS• Hardware• Strangeloop• “Cloud”• yottaa, torbit, strangeloop, cloudflare, blaze• Fasterize !
  64. 64. 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, ...
  65. 65. 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)
  66. 66. C*00"+( ç 0r&/" ?
  67. 67. C*00"+( ç 0r&/" ? ,$-%./$ )*+ le Go og web html sc CSS imag ($# rip !" e "!"!"!!!!""!""!"! t ""! """ ! script !""! !" !"" "!!"" !"! " !"!! !""!"!! " ! !" """ !!!"! !"" """! """"!"! image ! ""! !"!"! "!!! ! "! !""" !""!!"" !! """ "!!!" !!"" """! !"!"!!! !" "!! "!! !"!! ""!! !"!!!"" Dat "!" ! "! """"! !!"!"!! as !"!! "!"! Data sSans Fasterize : les pages sont lourdes et lentes à charger
  68. 68. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&$# CSS CSS imag e imag imagee CSS
  69. 69. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&$# CSS CSS imag e imag imagee CSS Compression
  70. 70. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&$# CSS CSS imag e imag imagee CSS Compression Concaténation
  71. 71. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! Data s Data """"!!"!!"!"! scrip t scrip scriptt )*+ Datass Google html web !"#$%&$# CSS CSS imag e imag imagee CSS Compression Concaténation Optimisation du cache
  72. 72. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! 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
  73. 73. C*00"+( ç 0r&/" ?,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! 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 ...
  74. 74. C*00"+( ç 0r&/" ? ,$-%./$ !""!!"!""!"!! !""!!"!""!"!! !"!!!"""""!"! !""!!"!""!"!! !"!!!"""""!"! """!"!!""!!"" !"!!!"""""!"! """!"!!""!!"" !"""!!!"!"!!! """!"!!""!!"" !"""!!!"!"!!! """!!"!"!!!"" !"""!!!"!"!!! """!!"!"!!!"" ""!!"!!!"!"!! """!!"!"!!!"" ""!!"!!!"!"!! """"!!"!!"!"! ""!!"!!!"!"!! """"!!"!!"!"! 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
  75. 75. 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
  76. 76. 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
  77. 77. 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)
  78. 78. 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
  79. 79. 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 ...)
  80. 80. 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é
  81. 81. F!(!r
  82. 82. F!(!r• Browser : disparition d’IE6/IE7/IE8, HTML5, accélération matérielle
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. C*+&#!$)*+• Cdiscount vs RueDuCommerce
  89. 89. C*+&#!$)*+• Cdiscount vs RueDuCommerce
  90. 90. C*+&#!$)*+ b*+!$
  91. 91. 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/
  92. 92. 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
  93. 93. 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)
  94. 94. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×