Download as PDF, PPTX
Uploaded byMaximiliano Firtman
Hacking Web Performance @ ForwardJS 2017
The document emphasizes the critical importance of web performance, stating that even a 500ms delay can significantly impact user frustration and engagement, with empirical data showing large increases in user drop-off rates. It outlines various strategies for optimizing web performance, including reducing data transfer through advanced image formats and implementing responsive designs. Additionally, it highlights the need to understand and cater to users on slower cellular networks, advocating for innovative approaches to accelerate loading times.
More Related Content
Similar to Hacking Web Performance @ ForwardJS 2017
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Hacking Web Performance @ ForwardJS 2017
- 1. Picture from SimonHowden freedigitalphotos.net! hacking web performance Max Firtman @firt
- 2. mobile+web developer &trainer
- 3.
- 7. I have 2goals…
- 8. Show you newtricks 😁
- 9.
- 10.
- 11. I know youknow
- 12.
- 13. Picture from SimonHowden freedigitalphotos.net
- 14. 14 Picture from SimonHowden freedigitalphotos.net
- 15. 500ms delay, +26%user’s frustration Source: Radware :(
- 16. 500ms delay, -20%Google’s traffic 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
- 17. +100ms delay, -1%Amazon’s sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
- 18. immediate feedback 100ms perception JakobNielsen - Usability Engineering
- 19. perception Jakob Nielsen -Usability Engineering losing flow of thoughts 1s
- 20.
- 21.
- 22.
- 23.
- 24.
- 26. I know youknow Performance is important We need a great Speed Index We have a budget of 1 second to load
- 27.
- 28. Optimizing the network Youare already
- 29. CSS as Appetizer Youare already
- 30. JavaScript as Dessert Youare already
- 31. Optimizing Images You arealready
- 32. Have an HTTPCache Policy You are already
- 33. Using Service Workers Youare already
- 34. Avoiding Redirects You arealready
- 35. Working with TLSand HTTP/2 You are already
- 36. You are alreadydoing this
- 37. What’s the problemthen?
- 38. Average time toload a mobile landing page The problem 22 seconds Research by thinkwithgoogle.com
- 39. If a pagetakes more than 3 seconds to load The problem 53% leave it Research by thinkwithgoogle.com
- 40.
- 41. The problem AMP Facebook InstantArticles
- 42.
- 43.
- 44.
- 45.
- 46. browsers with marketshare
- 47.
- 48. We have 4G!We don't need to worry about performance... ( )
- 49. cellular 0 25 50 75 100 US Western EuropeAsia Global 4G 2G/3G Only 21% is on 4G, worldwide
- 50.
- 51. cellular 45% of usersare on 2G networks
- 52. cellular 0 25 50 75 100 US Western EuropeAsia Global 4G 2G/3G ~30% of the time 4G was not used
- 53. RTT - latency cellularnetworks 2G 3G 4G Home 0 250 500 750 1000 Min Max
- 54. Let’s hack WebPerformance!
- 55.
- 56. Avoid more thanone roundtrip First Load
- 57. Deliver ATF in14Kb First Load • Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
- 58. Announce DNS queriesASAP First Load <link rel="dns-prefetch" href="http://newdomain.com"> HTML
- 59. Avoid http tohttpS redirect First Load • Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
- 60.
- 61. Use Zopfli Data Transfer •Save 4-8% data transfer with GZIP • It’s ~80x slower
- 62. Use Brotli Data Transfer •Save ~14% data transfer • Check Encoding Header
- 63. Create a low-resversion Data Transfer • Check save-data Client Hint header • Use NetInfo API • Use Performance Timing API • Measure bandwidth
- 65. Embrace Responsive Images DataTransfer • Not just 3 versions of your image • 65% of the traffic is for images (HttpArchive) • 84% improvement creating n versions (ScientiaMobile)
- 66.
- 67. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture isworth a thousand words…
- 68. … if itloads
- 69. Time to replaceJPEG and PNG Images
- 71. Lossy format: WebP-35% Images
- 72. Lossy format: JPEG2000 (JPX) -19% Images
- 73. Lossy format: JPEGXR (JXR) -29% Images
- 74. Lossless format: ZopfliPNG https://github.com/imagemin/zopflipng-bin -20% Images
- 75. Deal with compatibility! Images •Hello to <picture>
- 76. <picture> <source type="image/webp" src="image.webp"> <sourcetype="image/vnd.ms-photo" src="image.jxr"> <source type="image/jp2" src="image.jp2"> <source type="image/png" src=“image.zf.png"> <img src=“image.zf.png" alt=“description"> </picture>
- 77. Meet HTTP ClientHints Images • Browser will expose data to the server <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink"> HTML
- 78. Decode images inthe background Images • github.com/GoogleChrome/offthread-image
- 79. Stop using AnimatedGIFs! Images • Use Animated PNGs or Animated WebP • Use muted videos • Use webkit-playsinline for iOS
- 80. Use tricks forPreview Images Images
- 82.
- 83. The future looksinteresting! Images • BPG • FLIF
- 84. Hack Limits thanks toService Workers
- 85. Make CDNs racefor performance Limits
- 86.
- 87.
- 88. Your own CompressionMethod Limits
- 89.
- 90.
- 92.
- 93. Performance is TOPPRIORITY Push it even more It’s a worthwhile effort
- 94.
- 95. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmw NextForward workshops Progressive Web Apps New Web APIs Lab: VR, BT, Payments Apps with TypeScript and Angular