High Performance Web - Full Stack Toronto
2 likes859 views
The document discusses the significant impact of website performance on user experience and conversion rates, highlighting how delays can lead to increased frustration and decreased engagement. It emphasizes the importance of optimizing site speed, utilizing responsive web design, and implementing various performance-enhancing techniques like HTTP/2 and alternative compression methods. The content is geared towards helping developers improve web performance to boost user satisfaction and conversions.
High Performance Web - Full Stack Toronto
- 1. PicturefromSimonHowdenfreedigitalphotos.net! Picture from Simon Howden freedigitalphotos.net! high performance web Maximiliano Firtman @firt
- 2. mobile+web developer & trainer
- 4. trainer
- 9. Let’s start with data
- 10. 500ms delay, +26% user’s frustration Source: Radware :(
- 11. 500ms delay, -20% Google’s traffic 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-1 :(
- 12. +100ms delay, -1% Amazon’s sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-1 :(
- 13. -2.2s page load, +15% downloads Source: Firefox :)
- 14. +60% faster, +14% donations ($$$) Source: Obama Campaign :)
- 15. 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
- 21. immediate feedback 100ms Jakob Nielsen - Usability Engineering
- 22. losing user’s flow of thoughts 1s Jakob Nielsen - Usability Engineering
- 24. 100ms RAIL
- 25. 100ms 16ms RAIL
- 27. 100ms 16ms 50ms 1s RAIL
- 28. The Web today
- 31. iOS and Android
- 33. Browsers only?
- 36. web view browsing Web View 25% Browser 75% Source: MOVR Report
- 37. Let’s see some data
- 42. Android 45%
- 50. 4G is here! We shouldn’t worry about performance anymore... ( )
- 52. 50% of users are on 2G networks
- 53. only 21% has 4G Worldwide
- 54. ~30% of the time 4G not used
- 55. Bandwidth (Mbps) 0 3.5 7 10.5 14 2G 3G Wifi 4G
- 56. 2G 3G 4G Home 0 250 500 750 1000 Min Max Latency
- 57. 2G 3G 4G Home 0 250 500 750 1000 Min Max Latency
- 60. Mobile websites are the past, right?
- 63. Responsive Web Design as a goal
- 66. who said that?
- 67. Your goal is more conversions
- 70. RWD is a tool
- 71. RWD is not a goal
- 72. Wait! Google will penalize non-responsive websites… ( )
- 73. Mmm…. NOT REALLY
- 74. RESPONSIVE WEB DESIGN is the future
- 75. I’m not advocating for m.*
- 77. Don’t penalize your mobile users
- 78. Responsive Web Design is a GREAT TOOL
- 81. Show me how to perform better!
- 82. Basic Tips
- 83. Consider moving to HTTP/2 #PERFTIP TLS only
- 84. Reduce redirects #PERFTIP • Consume 100ms to 1s each • Social networks will use one
- 88. Avoid Client Side Rendering • Reduces in 5x page load performance • Embrace plain HTML for initial loading #PERFTIP
- 90. JavaScript as dessert #PERFTIP • Use non-blocking JavaScript
- 91. Use Responsive Images #PERFTIP • Deliver the right image to the current device • srcset and <picture>
- 93. Use SVG #PERFTIP
- 94. #PERFTIP
- 95. Careful with Web Fonts #PERFTIP
- 96. Extreme tips
- 97. Load the page in 1 second #PERFTIP
- 98. ATF content in 1 second #PERFTIP
- 99. We need to separate ABOVE THE FOLD (ATF)
- 100. ATF in 1 second #PERFTIP 14Kb packet
- 101. #PERFTIP 14Kb packet • HTML, embedded CSS, embedded JavaScript • Images?
- 103. Alternative compression • Zopfli (over Gzip or deflate) #PERFTIP •+8% compression ratio
- 104. • Brotli +25% compression ratio #PERFTIP TLS only Alternative compression
- 105. Alternative Image Formats • PNG with Zopfli (-8%) • WebP (-35%) • JPEG-HDR (-30%) • BPG (-50/-70%) #PERFTIP
- 106. Service Workers • Cache Storage API • Offline Experience • Immediate loading experience #PERFTIP
- 107. Upgrading to a Progressive Web App • Uses Service Workers • Performance is a key #PERFTIP
- 108. AMP
- 110. AMP-HTML
- 115. Consider creating AMP content • Alternative vs. Replacement • Where responsive comes? #PERFTIP
- 116. ure from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
- 117. • Performance -> conversion • Perception Goals • Understanding Mobile • Basic Optimizations • Extreme Optimizations