O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

High Performance Web - Full Stack Toronto

592 visualizações

Publicada em

An introduction to Web Performance Optimization in 2016 - Talk delivered in Toronto, Canada, October 18th, 2016

Publicada em: Tecnologia
  • Seja o primeiro a comentar

High Performance Web - Full Stack Toronto

  1. 1. PicturefromSimonHowdenfreedigitalphotos.net! Picture from Simon Howden freedigitalphotos.net! high performance web Maximiliano Firtman @firt
  2. 2. mobile+web developer & trainer
  3. 3. trainer
  4. 4. Original Books
  5. 5. Translations I don’t really understand
  6. 6. Let’s start with data
  7. 7. 500ms delay, 
 +26% user’s frustration Source: Radware :(
  8. 8. 500ms delay, 
 -20% Google’s traffic 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-1 :(
  9. 9. +100ms delay, 
 -1% Amazon’s sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-1 :(
  10. 10. -2.2s page load, 
 +15% downloads Source: Firefox :)
  11. 11. +60% faster, 
 +14% donations ($$$) Source: Obama Campaign :)
  12. 12. Site speed in search rank Screen shot of blog post …we’ve decided to take site speed into account in our search rankings googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web- search-ranking.html
  13. 13. Web Performance Optimization
  14. 14. where to optimize?
  15. 15. server frontend development
  16. 16. Top 100,000 sites
  17. 17. Perception and Goals
  18. 18. immediate feedback 100ms Jakob Nielsen - Usability Engineering
  19. 19. losing user’s flow of thoughts 1s Jakob Nielsen - Usability Engineering
  20. 20. Source: Google Developers RAIL
  21. 21. 100ms RAIL
  22. 22. 100ms 16ms RAIL
  23. 23. 100ms 16ms 50ms RAIL
  24. 24. 100ms 16ms 50ms 1s RAIL
  25. 25. The Web today
  26. 26. Desktop and Mobile
  27. 27. Chrome, Firefox, Edge, IE
  28. 28. iOS and Android
  29. 29. Safari and Chrome?
  30. 30. Browsers only?
  31. 31. web view browsing Web View 25% Browser 75% Source: MOVR Report
  32. 32. Let’s see some data
  33. 33. Others 10% iOS 45% Android 45%
  34. 34. iOS 45% Safari 100% ?
  35. 35. Apps (WebView) 25% Safari 75% iOS 45%
  36. 36. Others 10% iOS 45% Android 45%
  37. 37. Android 45%
  38. 38. Browser 33% Chrome 67% Android 45%
  39. 39. Opera 3% UC Browser 3% BB 4% Samsung 11% Chrome 37% Safari 42%
  40. 40. Cellular Networks
  41. 41. 4G is here! We shouldn’t worry about performance anymore... ( )
  42. 42. 50% of users are on 2G networks
  43. 43. only 21% has 4G Worldwide
  44. 44. ~30% of the time 4G not used
  45. 45. Bandwidth (Mbps) 0 3.5 7 10.5 14 2G 3G Wifi 4G
  46. 46. 2G 3G 4G Home 0 250 500 750 1000 Min Max Latency
  47. 47. 2G 3G 4G Home 0 250 500 750 1000 Min Max Latency
  48. 48. latency request bandwidth
  49. 49. Responsive Web Design
  50. 50. Mobile websites are the past, right?
  51. 51. Responsive Web Design as a goal
  52. 52. who said that?
  53. 53. Your goal is more conversions
  54. 54. responsive -> +conversion?
  55. 55. Usability Speed Accessibility
  56. 56. RWD is a tool
  57. 57. RWD is not a goal
  58. 58. Wait! Google will penalize non-responsive websites… ( )
  59. 59. Mmm…. NOT REALLY
  60. 60. RESPONSIVE WEB DESIGN is the future
  61. 61. I’m not advocating for m.*
  62. 62. Don’t penalize your mobile users
  63. 63. Responsive Web Design is a GREAT TOOL
  64. 64. Show me how to perform better!
  65. 65. Basic Tips
  66. 66. Consider moving to HTTP/2 
 #PERFTIP TLS only
  67. 67. Reduce redirects 
 #PERFTIP • Consume 100ms to 1s each • Social networks will use one
  68. 68. Remover App Banners 
 #PERFTIP
  69. 69. idontwantyourfuckingapp.tumblr.com
  70. 70. Avoid Client Side Rendering 
• Reduces in 5x page load performance • Embrace plain HTML for initial loading #PERFTIP
  71. 71. CSS as appetizer 
 #PERFTIP
  72. 72. JavaScript as dessert 
 #PERFTIP • Use non-blocking JavaScript
  73. 73. Use Responsive Images 
 #PERFTIP • Deliver the right image to the current device • srcset and <picture>
  74. 74. Use SVG 
 #PERFTIP
  75. 75. #PERFTIP
  76. 76. Careful with Web Fonts 
 #PERFTIP
  77. 77. Extreme tips
  78. 78. Load the page in
 1 second
 #PERFTIP
  79. 79. ATF content in
 1 second 
 #PERFTIP
  80. 80. We need to separate ABOVE THE FOLD (ATF)
  81. 81. ATF in 1 second 
 #PERFTIP 14Kb packet 

  82. 82. #PERFTIP 14Kb packet 
• HTML, embedded CSS, embedded JavaScript • Images?
  83. 83. Reevaluate RWD usage #PERFTIP
  84. 84. Alternative compression • Zopfli (over Gzip or deflate) #PERFTIP •+8% compression ratio
  85. 85. • Brotli +25% compression ratio #PERFTIP TLS only Alternative compression
  86. 86. Alternative Image Formats • PNG with Zopfli (-8%) • WebP (-35%) • JPEG-HDR (-30%) • BPG (-50/-70%) #PERFTIP
  87. 87. Service Workers • Cache Storage API • Offline Experience • Immediate loading experience #PERFTIP
  88. 88. Upgrading to a Progressive Web App • Uses Service Workers • Performance is a key #PERFTIP
  89. 89. AMP
  90. 90. AMP-HTML
  91. 91. Consider creating AMP content • Alternative vs. Replacement • Where responsive comes? #PERFTIP
  92. 92. ure from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
  93. 93. • Performance -> conversion • Perception Goals • Understanding Mobile • Basic Optimizations • Extreme Optimizations
  94. 94. oreilly.com/ideas/mobile-web-performance-checklist
  95. 95. Phoo from freefoto.com firtman@gmail.com @firt firt.mobi/hpmw

×