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.

Hacking Web Performance

555 visualizações

Publicada em

Fluent 2018 session on Web Performance techniques

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Hacking Web Performance

  1. 1. Picture from Simon Howden freedigitalphotos.net! hacking web performance Maximiliano Firtman @firt
  2. 2. mobile+web developer & trainer
  3. 3. 😬
  4. 4. trainer
  5. 5. I have 2 goals…
  6. 6. Show you new tricks 😁
  7. 7. Make you feel bad
  8. 8. Let’s Start!
  9. 9. I know you know
  10. 10. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
  11. 11. Picture from Simon Howden freedigitalphotos.net
  12. 12. 16 Picture from Simon Howden freedigitalphotos.net
  13. 13. 500ms delay, +26% user’s frustration Source: Radware :(
  14. 14. 500ms delay, -20% Google’s traffic 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
  15. 15. +100ms delay, -1% Amazon’s sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
  16. 16. User-centric metrics
 First Meaningful Paint 

  17. 17. User-centric metrics
 First Interactive 

  18. 18. User-centric metrics
 Consistently Interactive 

  19. 19. User-centric metrics
 Visually Complete 

  20. 20. User-centric metrics
 Custom Metric 

  21. 21. I know you know Performance is important We need a great Speed Index We need goals to achieve
  22. 22. Goals
 Speed Index: 1,100-2,500 First Meaningful Paint: 1-3s First Interactive: 2-4s
  23. 23. You are already…
  24. 24. Optimizing the network transfer 
 You are already
  25. 25. Working with TLS and HTTP/2 
 You are already
  26. 26. CSS as Appetizer 
 You are already
  27. 27. JavaScript as Dessert 
 You are already
  28. 28. Optimizing Images 
 You are already
  29. 29. Have an HTTP Cache Policy 
 You are already
  30. 30. Using Service Workers 
 You are already
  31. 31. Avoiding Redirects 
 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 We always underestimate mobile
  37. 37. iOS and Android
  38. 38. Safari and Chrome?
  39. 39. browsers with market share
  40. 40. Using Cellular Networks!
  41. 41. We have 4G! We don't need to worry about performance... ( )
  42. 42. www.gsma.com/mobileeconomy - Dec 2017
  43. 43. ~10% of the time 4G is not used
  44. 44. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  45. 45. Let’s hack Web Performance!
  46. 46. Hack First Load
  47. 47. Avoid more than one roundtrip First Load • TCP Slow Start - initial congestion window 
 (initcwnd) • Linux: 14.6 KiB (10 segments) • CDNs are playing with different values
  48. 48. Deliver ATF in 14.6 KiB First Load • Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
  49. 49. Avoid http to httpS redirect First Load • Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
  50. 50. Hack Data Transfer
  51. 51. QUIC Data Transfer • Experimental transport protocol over UDP • Reduces latency and connection messages • HTTP/2 Interface with T?LS
  52. 52. Data Transfer Image from Chromium Blog
  53. 53. Data Transfer • Google’s search page: 3% improvement • YouTube: reduced 30% buffering • Facebook similar protocol: 2% improvement • 75% of requests can be optimized QUIC
  54. 54. Use Zopfli Data Transfer • Save 3-8% data transfer with GZIP • It’s ~80x slower
  55. 55. Use Brotli Data Transfer • Save ~25% data transfer compared with GZIP • Check Encoding Header
  56. 56. Use Brotli Data Transfer • LinkedIn: 4% savings in load time • Facebook: 17% savings on CSS, 20% on JavaScript
  57. 57. Readable Streams Data Transfer • Process data as it arrives in chunks • 45% savings on paint metrics 
 (when data is client-side rendered)
  58. 58. Hack Resource Loading
  59. 59. HTTP/2 Push (?) Resource Loading • On most situations it can be an anti-pattern • You can be pushing files that are in the client
  60. 60. Modern Cache Control Resource Loading • Hash in filenames is common for versioning • Browsers make conditional requests
  61. 61. Modern Cache Control Resource Loading • Hello to Cache-Control: immutable
  62. 62. Modern Cache Control Resource Loading • It’s a common new pattern to • 1) serve from the cache • 2) update it in the background for later
  63. 63. Modern Cache Control Resource Loading Cache-Control: stale-while-revalidate=99
  64. 64. Warming up engines Resource Loading • Help the browser to start processes ASAP • DNS Queries: ~200ms • TCP and TLS connection: ~200ms
  65. 65. Announce DNS queries ASAP 
 <link rel="dns-prefetch" href=“https://newdomain.com"> HTML Resource Loading
  66. 66. Announce TLS connections ASAP 
 <link rel="preconnect" href=“https://newdomain.com” crossorigin> HTML Resource Loading
  67. 67. Announce on HTTP Response 
 Link: <https://my-analytics.com>; rel=preconnect; crossorigin HTTP Resource Loading
  68. 68. To bundle or not to bundle Resource Loading • On HTTP/2 might seem an anti-pattern • But it’s not!
  69. 69. Resource Loading
  70. 70. To bundle or not to bundle Resource Loading • Bundle! • But not everything • First, code-splitting and load only the important
  71. 71. Web Fonts Resource Loading • Avoid FOUT (Flash of Unstyled Text) • font-display: optional or swap
  72. 72. Preloading Resource Loading • Help the browser prioritize resources for rendering
  73. 73. Preloading Resource Loading 
 <link rel="preload" href=“styles.css” as=“style”> HTML
  74. 74. Preloading Resource Loading 
 Link: <https://otherhost.com/font.woff2>; rel=preload; as=font; crossorigin HTTP
  75. 75. Cache Storage Resource Loading • With Service Workers now everywhere • Time to use Cache Storage everywhere we can
  76. 76. Hack Images
  77. 77. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture is worth a thousand words…
  78. 78. … if it loads
  79. 79. 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)
  80. 80. Time to replace JPEG and PNG Images
  81. 81. Lossy format: WebP (weppy) 25-40% Images
  82. 82. Lossy format: JPEG 2000 (JPX) 20% Images
  83. 83. Lossy format: JPEG XR (JXR) 25% Images
  84. 84. Lossy format: HEIF (heef) 25% Images
  85. 85. Lossless format: Zopfli PNG https://github.com/imagemin/zopflipng-bin 20% Images
  86. 86. Lossless format: Guetzli JPEG https://github.com/google/guetzli 20-30% Images
  87. 87. Deal with compatibility! Images • Service Workers decoders • Hello to <picture>
  88. 88. <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>
  89. 89. Meet HTTP Client Hints Images • Browser will expose data to the server 
 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink, Device-Memory”> HTML
  90. 90. Meet HTTP Client Hints Images • Chrome 67 includes more Hints • RTT • Downlink • ECT (2g, 3g, 4g, slow-2g)
  91. 91. Decode images in a thread Images • github.com/GoogleChrome/offthread-image
  92. 92. Stop using Animated GIFs! Images • Use Animated PNGs or Animated WebP • Use muted videos • Use <img> with video (iOS 12)
  93. 93. The future looks interesting! Images • AVIF • BPG • FLIF
  94. 94. Hack User Experience
  95. 95. Consistent Frame Rate and Response Times User Experience • Don’t execute JS for more than 50ms • Use LongTask API for detection • Use WebWorkers or requestIdleCallback
  96. 96. Avoid calculations and repaints User Experience • Promote animated layers to the GPU 
 CSS will-change • Limit browser’s ability to style, layout and paint
 CSS Containment
  97. 97. Passive Event Listener User Experience
  98. 98. Reactive Web Performance User Experience
  99. 99. Know about the context User Experience • Client-side Performance APIs • Network Information API • Device Memory Client Hint • Save-Data Client Hint
  100. 100. Consistent Experience User Experience • Web Fonts • Change SW’s cache policy • Reduce amount of loaded data • 1x image not matter DPR
  101. 101. Feeling bad enough?
  102. 102. Performance is TOP PRIORITY Push it even more It’s a worthwhile effort
  103. 103. Make it fast!
  104. 104. Foto de freefoto.com firtman@gmail.com @firt

×