Hacking Web Performance @ ForwardJS 2017
•
1 like•1,434 views
Talk about Web Performance and what to do after the basics taking place at ForwardJS 2017 in San Francisco, USA.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Hacking Web Performance @ ForwardJS 2017
Similar to Hacking Web Performance @ ForwardJS 2017 (20)
More from Maximiliano Firtman
More from Maximiliano Firtman (19)
Recently uploaded
Recently uploaded (20)
Hacking Web Performance @ ForwardJS 2017
- 1. Picture from Simon Howden freedigitalphotos.net! hacking web performance Max Firtman @firt
- 2. mobile+web developer & trainer
- 3. 😬
- 7. I have 2 goals…
- 8. Show you new tricks 😁
- 9. Make you feel bad
- 10. Let’s Start!
- 11. I know you know
- 13. Picture from Simon Howden freedigitalphotos.net
- 14. 14 Picture from Simon Howden 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 Jakob Nielsen - Usability Engineering
- 19. perception Jakob Nielsen - Usability Engineering losing flow of thoughts 1s
- 26. I know you know Performance is important We need a great Speed Index We have a budget of 1 second to load
- 27. You are already…
- 28. Optimizing the network You are already
- 29. CSS as Appetizer You are already
- 30. JavaScript as Dessert You are already
- 31. Optimizing Images You are already
- 32. Have an HTTP Cache Policy You are already
- 33. Using Service Workers You are already
- 34. Avoiding Redirects You are already
- 35. Working with TLS and HTTP/2 You are already
- 36. You are already doing this
- 37. What’s the problem then?
- 38. Average time to load a mobile landing page The problem 22 seconds Research by thinkwithgoogle.com
- 39. If a page takes more than 3 seconds to load The problem 53% leave it Research by thinkwithgoogle.com
- 40. The problem
- 41. The problem AMP Facebook Instant Articles
- 43. iOS and Android
- 46. browsers with market share
- 48. We have 4G! We don't need to worry about performance... ( )
- 49. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 21% is on 4G, worldwide
- 50. cellular
- 51. cellular 45% of users are on 2G networks
- 52. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
- 53. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
- 54. Let’s hack Web Performance!
- 55. Hack First Load
- 56. Avoid more than one roundtrip First Load
- 57. Deliver ATF in 14Kb First Load • Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
- 58. Announce DNS queries ASAP First Load <link rel="dns-prefetch" href="http://newdomain.com"> HTML
- 59. Avoid http to httpS redirect First Load • Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
- 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-res version Data Transfer • Check save-data Client Hint header • Use NetInfo API • Use Performance Timing API • Measure bandwidth
- 65. Embrace Responsive Images Data Transfer • Not just 3 versions of your image • 65% of the traffic is for images (HttpArchive) • 84% improvement creating n versions (ScientiaMobile)
- 66. Hack Images
- 67. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture is worth a thousand words…
- 68. … if it loads
- 69. Time to replace JPEG and PNG Images
- 71. Lossy format: WebP -35% Images
- 72. Lossy format: JPEG 2000 (JPX) -19% Images
- 73. Lossy format: JPEG XR (JXR) -29% Images
- 74. Lossless format: Zopfli PNG 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"> <source type="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 Client Hints Images • Browser will expose data to the server <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink"> HTML
- 78. Decode images in the background Images • github.com/GoogleChrome/offthread-image
- 79. Stop using Animated GIFs! Images • Use Animated PNGs or Animated WebP • Use muted videos • Use webkit-playsinline for iOS
- 80. Use tricks for Preview Images Images
- 82. Images
- 83. The future looks interesting! Images • BPG • FLIF
- 84. Hack Limits thanks to Service Workers
- 85. Make CDNs race for performance Limits
- 88. Your own Compression Method Limits
- 93. Performance is TOP PRIORITY Push it even more It’s a worthwhile effort
- 94. Make it fast!
- 95. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmw Next Forward workshops Progressive Web Apps New Web APIs Lab: VR, BT, Payments Apps with TypeScript and Angular