Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hacking Web Performance @ ForwardJS 2017

857 views

Published on

Talk about Web Performance and what to do after the basics taking place at ForwardJS 2017 in San Francisco, USA.

Published in: Technology
  • Be the first to comment

Hacking Web Performance @ ForwardJS 2017

  1. 1. Picture from Simon Howden freedigitalphotos.net! hacking web performance Max Firtman @firt
  2. 2. mobile+web developer & trainer
  3. 3. 😬
  4. 4. I have 2 goals…
  5. 5. Show you new tricks 😁
  6. 6. Make you feel bad
  7. 7. Let’s Start!
  8. 8. I know you know
  9. 9. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
  10. 10. Picture from Simon Howden freedigitalphotos.net
  11. 11. 14 Picture from Simon Howden freedigitalphotos.net
  12. 12. 500ms delay, +26% user’s frustration Source: Radware :(
  13. 13. 500ms delay, -20% Google’s traffic 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
  14. 14. +100ms delay, -1% Amazon’s sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
  15. 15. immediate feedback 100ms perception Jakob Nielsen - Usability Engineering
  16. 16. perception Jakob Nielsen - Usability Engineering losing flow of thoughts 1s
  17. 17. perception Source: Google Developers RAIL
  18. 18. perception RAIL 100ms
  19. 19. perception RAIL 100ms 16ms
  20. 20. perception RAIL 100ms 16ms 50ms
  21. 21. perception RAIL 100ms 16ms 50ms 1s
  22. 22. I know you know Performance is important We need a great Speed Index We have a budget of 1 second to load
  23. 23. You are already…
  24. 24. Optimizing the network 
 You are already
  25. 25. CSS as Appetizer 
 You are already
  26. 26. JavaScript as Dessert 
 You are already
  27. 27. Optimizing Images 
 You are already
  28. 28. Have an HTTP Cache Policy 
 You are already
  29. 29. Using Service Workers 
 You are already
  30. 30. Avoiding Redirects 
 You are already
  31. 31. Working with TLS and HTTP/2 
 You are already
  32. 32. You are already doing this
  33. 33. What’s the problem then?
  34. 34. Average time to load a mobile landing page 
 The problem 22 seconds Research by thinkwithgoogle.com
  35. 35. If a page takes more than 3 seconds to load 
 The problem 53% leave it Research by thinkwithgoogle.com
  36. 36. The problem
  37. 37. The problem AMP Facebook Instant Articles 

  38. 38. The problem We always underestimate mobile
  39. 39. iOS and Android
  40. 40. Safari and Chrome?
  41. 41. Source: MOVR Report
  42. 42. browsers with market share
  43. 43. Using Cellular Networks!
  44. 44. We have 4G! We don't need to worry about performance... ( )
  45. 45. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 21% is on 4G, worldwide
  46. 46. cellular
  47. 47. cellular 45% of users are on 2G networks
  48. 48. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
  49. 49. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  50. 50. Let’s hack Web Performance!
  51. 51. Hack First Load
  52. 52. Avoid more than one roundtrip First Load
  53. 53. Deliver ATF in 14Kb First Load • Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
  54. 54. Announce DNS queries ASAP First Load 
 <link rel="dns-prefetch" href="http://newdomain.com"> HTML
  55. 55. Avoid http to httpS redirect First Load • Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
  56. 56. Hack Data Transfer
  57. 57. Use Zopfli Data Transfer • Save 4-8% data transfer with GZIP • It’s ~80x slower
  58. 58. Use Brotli Data Transfer • Save ~14% data transfer • Check Encoding Header
  59. 59. Create a low-res version Data Transfer • Check save-data Client Hint header • Use NetInfo API • Use Performance Timing API • Measure bandwidth
  60. 60. 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)
  61. 61. Hack Images
  62. 62. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture is worth a thousand words…
  63. 63. … if it loads
  64. 64. Time to replace JPEG and PNG Images
  65. 65. Lossy format: WebP -35% Images
  66. 66. Lossy format: JPEG 2000 (JPX) -19% Images
  67. 67. Lossy format: JPEG XR (JXR) -29% Images
  68. 68. Lossless format: Zopfli PNG https://github.com/imagemin/zopflipng-bin -20% Images
  69. 69. Deal with compatibility! Images • Hello to <picture>
  70. 70. <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>
  71. 71. Meet HTTP Client Hints Images • Browser will expose data to the server 
 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink"> HTML
  72. 72. Decode images in the background Images • github.com/GoogleChrome/offthread-image
  73. 73. Stop using Animated GIFs! Images • Use Animated PNGs or Animated WebP • Use muted videos • Use webkit-playsinline for iOS
  74. 74. Use tricks for Preview Images Images
  75. 75. Images
  76. 76. The future looks interesting! Images • BPG • FLIF
  77. 77. Hack Limits thanks to Service Workers
  78. 78. Make CDNs race for performance Limits
  79. 79. Delta Updates Limits
  80. 80. Use Streams Limits
  81. 81. Your own Compression Method Limits
  82. 82. Progressive Images Limits
  83. 83. Use BPG Today! Limits https://github.com/sandropaganotti/bpg-converter
  84. 84. Feeling bad enough?
  85. 85. Performance is TOP PRIORITY Push it even more It’s a worthwhile effort
  86. 86. Make it fast!
  87. 87. 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

×