Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Faster web pages

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
FASTER WEB PAGES
@drpicox

Les vidéos YouTube ne sont plus prises en charge sur SlideShare

Regarder la vidéo sur YouTube

WHAT PEOPLE SAYS…
➤ Google: 2% slower = 2% less searching per user
➤ Yahoo: 400 milliseconds faster = 9% more traffic
➤ AOL:...
Prochain SlideShare
Mobile Web Best Practices
Mobile Web Best Practices
Chargement dans…3
×

Consultez-les par la suite

1 sur 78 Publicité

Faster web pages

Télécharger pour lire hors ligne

Have fast, performant, and successful web pages is a great Challenge. There are many layers involved and all of them have to work together.
In this talk I presented at FIBAlumni with collaboration of COEINF and the video recording is at http://media.fib.upc.edu/fibtv/streamingmedia/view/22/1400 (in Catalan).
It shows how all parts are involved in the success of web pages from the server up to the human brain and perception.
It introduces metrics and ways to effectively calculate and measure objectively the impact of the actions taken in the optimisation and also some ways to detect ways to optimise websites.

Have fast, performant, and successful web pages is a great Challenge. There are many layers involved and all of them have to work together.
In this talk I presented at FIBAlumni with collaboration of COEINF and the video recording is at http://media.fib.upc.edu/fibtv/streamingmedia/view/22/1400 (in Catalan).
It shows how all parts are involved in the success of web pages from the server up to the human brain and perception.
It introduces metrics and ways to effectively calculate and measure objectively the impact of the actions taken in the optimisation and also some ways to detect ways to optimise websites.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Faster web pages (20)

Publicité

Plus par David Rodenas (20)

Plus récents (20)

Publicité

Faster web pages

  1. 1. FASTER WEB PAGES @drpicox
  2. 2. WHAT PEOPLE SAYS… ➤ Google: 2% slower = 2% less searching per user ➤ Yahoo: 400 milliseconds faster = 9% more traffic ➤ AOL: Faster pages = more page views ➤ Amazon: 100 milliseconds faster = 1% more revenue ➤ Aberdeen Group: 1 second slower = 11% fewer page views, 7% less conversion ➤ Google uses website speed in search ranking.
  3. 3. EXAMPLES https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
  4. 4. EXAMPLES https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
  5. 5. ROI CURVE Performance Painfully slow user quits Bearable user persists Smooth user delight Smooth ROI? Success
  6. 6. ROI CURVE Performance Success Smooth user delight Too slow Diminishing ROI
  7. 7. MAKING FOCUS Wetware processor Silicon processor Input sensors: Sound, Light Touch, Smell ...
  8. 8. MAKING FOCUS Wetware processor Silicon processor + Perceived Performance User Experience
  9. 9. https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/ WETWARE SPECS 24 FPS (~40 ms) Minimum stutter-free animation 60 FPS (~16 ms) Silky smooth experience 1+ ms jitter Audible sound discontinuity
  10. 10. WETWARE SPECS Delay User reaction 0 - 100 ms Instant 100 - 300 ms Slight perceptible delay 300 - 1000 ms Task focus, perceptible delay 1000+ ms Mental context switch 10,000+ ms+ I'll come back later... https://hpbn.co/primer-on-web-performance/#anatomy-of-a-modern-web-application
  11. 11. SLOW https://www.youtube.com/watch?v=vOvQCPLkPt4&t=56
  12. 12. NOT SLOW 1000 ms50 ms16 ms100 ms
  13. 13. NOT SLOW 100 ms Delay User reaction 0 - 100 ms Instant 100 - 300 ms Slight perceptible delay Response
  14. 14. NOT SLOW 16 ms Animation
  15. 15. NOT SLOW Idle50 ms
  16. 16. NOT SLOW Load (including mobile) 1000 ms
  17. 17. LETS DO THE JOB
  18. 18. GLOBAL PICTURE Server Internet Browser
  19. 19. SERVER ➤ Load Balancers ➤ Caches ➤ Application Servers ➤ Databases ➤ Queues ➤ …
 
 ➤ Should respond in 200 ms
  20. 20. INTERNET - SPEED OF LIGHT You need CDNs
  21. 21. INTERNET - SPEED CONTROL ➤ Server is only allowed to send 4 segments (cwnd = 4), 
 once are acked, then it can double.
  22. 22. INTERNET - SPEED CONTROL ➤ First 11Kb are critical. ➤ 50Kb is almost 800 ms.
  23. 23. INTERNET - CONNECTION ANATOMY
  24. 24. INTERNET - BANDWIDTH VS LATENCY ➤ Bandwidth: How many data can we transfer at once.
 (or, how big the pipe is)
 
 
 
 ➤ Latency: How much takes the first byte to travel. 
 (or, how long the pipe is)
  25. 25. INTERNET - BANDWIDTH VS LATENCY index css, js, jpg ajax jpg Baseline
  26. 26. INTERNET - BANDWIDTH VS LATENCY index css, js, jpg ajax jpg Infinite 
 Bandwidth Baseline
  27. 27. INTERNET - BANDWIDTH VS LATENCY index css, js, jpgajax jpg Infinite 
 Bandwidth Zero
 Latency Baseline
  28. 28. INTERNET - BANDWIDTH VS LATENCY
  29. 29. INTERNET - LAST MILE https://hpbn.co/mobile-networks/
  30. 30. INTERNET - LAST MILE https://hpbn.co/mobile-networks/
  31. 31. BROWSER ➤ Cache ➤ Max connections limit ➤ Resource priority ➤ CSS ➤ JS ➤ Pre-render ➤ Memory bounds
 ➤ User perception
  32. 32. BROWSER - CONNECTIONS LIMIT http://www.browserscope.org/network/test
  33. 33. BROWSER - CONNECTIONS LIMIT
  34. 34. BROWSER - TYPICAL RECIPES ➤ Use always gzip ➤ Concatenate and minimise CSS and JS files ➤ Move CSS files top the top ➤ Move JS files to the bottom of the body
  35. 35. NOT SLOW Load (including mobile) 1000 ms Server: 200ms
 Network: 800ms
 Doing things: ???
  36. 36. “Lo que no puede ser, 
 no puede ser, 
 y además es imposible. -Rafael Gómez Ortega "El Gallo" What cannot be, cannot be, and besides is impossible.
  37. 37. LOAD PERCEPTION
  38. 38. “Believe nothing. Measure everything. -David Rodenas
  39. 39. METRICS ➤ Load Time ➤ DOM Content Ready ➤ Finish
  40. 40. METRICS
  41. 41. METRICS
  42. 42. METRICS ➤ Load Time ➤ DOM Content Ready ➤ Finish
  43. 43. KEEP USER ENGAGED
  44. 44. CRITICAL PATH
  45. 45. METRICS We need to see…
  46. 46. FILM STRIP https://www.webpagetest.org/result/170502_7V_1H1Y/
  47. 47. FILM STRIP - FIRST MEANINGFUL PAINT https://www.webpagetest.org/result/170502_7V_1H1Y/
  48. 48. VISUAL PROGRESS https://www.webpagetest.org/result/170502_7V_1H1Y/
  49. 49. ALTERNATE FILMSTRIP
  50. 50. ALTERNATE PROGRESS
  51. 51. VISUAL PROGRESSES COMPARISON
  52. 52. VISUAL PROGRESSES COMPARISON - II
  53. 53. VISUAL PROGRESSES DIFFERENCE
  54. 54. VISUAL PROGRESSES COMPETITION
  55. 55. VISUAL PROGRESSES
  56. 56. VISUAL PROGRESSES
  57. 57. WEBPAGETEST.ORG
  58. 58. WEBPAGETEST.ORG https://www.webpagetest.org/result/170504_96_K6K/
  59. 59. SPEED INDEX
  60. 60. SPEED INDEX
  61. 61. SPEED INDEX
  62. 62. SPEED INDEX https://timkadlec.com/2014/01/fast-enough/#comment-1200946500
  63. 63. DIAGNOSIS We need to understand…
  64. 64. WATERFALL https://www.webpagetest.org/result/170504_NP_K6Y/1/details/#waterfall_view_step1
  65. 65. WATERFALL DISEASES Slow 
 Backend
  66. 66. WATERFALL DISEASES Blocking
 Resource
  67. 67. WATERFALL DISEASES Large
 Resources
  68. 68. WATERFALL DISEASES Slow Initial Paint
  69. 69. BONUS CONTENT
  70. 70. “Believe nothing. Measure everything. -David Rodenas
  71. 71. “JAVASCRIPT MUST BE AT THE END OF THE BODY”
  72. 72. WEBPAGETEST.ORG https://www.webpagetest.org/result/170504_NP_K6Y/
  73. 73. ACCELERATED MOBILE PAGES PROJECT https://www.ampproject.org/
  74. 74. PROGRESSIVE WEB APPS https://developers.google.com/web/progressive-web-apps/
  75. 75. ISOMORPHIC WEB https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
  76. 76. RESOURCES ➤ Introducing RAIL: A User-Centric Model For Performance by Paul Irish & Paul Lewis https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/ ➤ Delivering the goods by Paul Irish https://docs.google.com/presentation/d/ 1MtDBNTH1g7CZzhwlJ1raEJagA8qM3uoV7ta6i66bO2M/present ➤ Measure Performance with the RAIL Model by Meggin Kearney https:// developers.google.com/web/fundamentals/performance/rail ➤ Performance on RAILs by Paul Lewis https://www.youtube.com/watch? v=uJMA2n4RL6s ➤ Browser Rendering Optimization : Building 60 FPS Web Apps By Paul Lewis & Cameron Pittman classroom.udacity.com/courses/ud860/lessons/4138328558/concepts/ 41570785750923 ➤ Chemin critique du rendu by Ilya Grigorik https://developers.google.com/web/ fundamentals/performance/critical-rendering-path ➤ Rendering Performance by Paul Lewis https://developers.google.com/web/ fundamentals/performance/rendering
  77. 77. YOUR TURN!

×