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

261 visualizações

Publicada em

Session at ConFoo Montreal 2019 on the latest tips and tricks for achieving the best Web Performance on sites and apps.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Hacking Web Performance

  1. 1. Picture from Simon Howden freedigitalphotos.net! hacking web performance Maximiliano Firtman @firt firt.mobi
  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
 Visually Complete 

  19. 19. User-centric metrics
 Custom Metric 

  20. 20. I know you know Performance is important We need goals to achieve
  21. 21. Goals
 First Meaningful Paint: 1-3s First Interactive: 2-4s
  22. 22. You are already…
  23. 23. Optimizing the network transfer 
 You are already
  24. 24. Working with TLS and HTTP/2 
 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. Defining an HTTP Cache Policy 
 You are already
  29. 29. Using Service Workers 
 You are already
  30. 30. Avoiding Redirects 
 You are already
  31. 31. You are already doing this
  32. 32. What’s the problem then?
  33. 33. Average time to load a mobile landing page 
 The problem 22 seconds Research by thinkwithgoogle.com
  34. 34. If a page takes more than 3 seconds to load 
 The problem 53% leave it Research by thinkwithgoogle.com
  35. 35. The problem We always underestimate mobile
  36. 36. iOS and Android
  37. 37. Safari and Chrome?
  38. 38. browsers with market share
  39. 39. Using Cellular Networks!
  40. 40. We have 4G! We don't need to worry about performance... ( )
  41. 41. www.gsma.com/mobileeconomy - Dec 2018
  42. 42. www.gsma.com/mobileeconomy - Dec 2018 ~10% of the time 4G is not used
  43. 43. Bandwidth cellular networks
  44. 44. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  45. 45. We still have a big performance problem on the Mobile Web ( )
  46. 46. Chrome Lite Pages 🆕
  47. 47. Chrome 73 Android Chrome Lite Pages • If users enables Data Saver ⭐🆕
  48. 48. Lite Page will be rendered if Chrome Lite Pages • You are in a 2G network
 OR • First Contentful Paint greater than 5s ⭐🆕
  49. 49. Lite Page? Chrome Lite Pages • Cloud-based rendering • "Smart" Optimizations ⭐🆕
  50. 50. Let’s hack Web Performance!
  51. 51. Hack First Load
  52. 52. 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
  53. 53. Deliver ATF in 14.6 KiB First Load • Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
  54. 54. Avoid http to httpS redirect First Load • Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
  55. 55. Hack Data Transfer
  56. 56. QUIC over HTTP (aka HTTP/3) Data Transfer • Experimental transport protocol over UDP • Reduces latency and connection messages • HTTP/2 Interface with TLS •
  57. 57. Data Transfer Image from Chromium Blog
  58. 58. Data Transfer • Google’s search page: 3% improvement • YouTube: reduced 30% buffering • Facebook similar protocol: 2% improvement • 75% of requests can be optimized QUIC
  59. 59. Data Transfer It's currently the draft of HTTP/3!
  60. 60. Use Zopfli Data Transfer • Save 3-8% data transfer with GZIP • It’s ~80x slower
  61. 61. Use Brotli Data Transfer • Save ~25% data transfer compared with GZIP • Check Encoding Header
  62. 62. Use Brotli Data Transfer • LinkedIn: 4% savings in load time • Facebook: 17% savings on CSS, 20% on JavaScript
  63. 63. Readable Streams Data Transfer • Process data as it arrives in chunks • 45% savings on paint metrics 
 (when data is client-side rendered)
  64. 64. Hack Resource Loading
  65. 65. Modern Cache Control Resource Loading • Hash in filenames is common for versioning • Browsers make conditional requests
  66. 66. Modern Cache Control Resource Loading • Hello to Cache-Control: immutable
  67. 67. 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
  68. 68. Modern Cache Control Resource Loading Cache-Control: stale-while-revalidate=99
  69. 69. Warming up engines Resource Loading • Help the browser to start processes ASAP • DNS Queries: ~200ms • TCP and TLS connection: ~200ms
  70. 70. Announce DNS queries ASAP 
 <link rel="dns-prefetch" href=“https://newdomain.com"> HTML Resource Loading
  71. 71. Announce TLS connections ASAP 
 <link rel="preconnect" href=“https://newdomain.com” crossorigin> HTML Resource Loading
  72. 72. Announce on HTTP Response 
 Link: <https://my-analytics.com>; rel=preconnect; crossorigin HTTP Resource Loading
  73. 73. To bundle or not to bundle Resource Loading • On HTTP/2 might seem an anti-pattern • But it’s not!
  74. 74. Resource Loading
  75. 75. To bundle or not to bundle Resource Loading • Bundle! • But not everything • First, code-splitting and load only the important
  76. 76. Web Fonts Resource Loading • Avoid FOUT (Flash of Unstyled Text) • font-display: optional or swap
  77. 77. Preloading Resource Loading • Help the browser prioritize resources for rendering
  78. 78. Preloading Resource Loading 
 <link rel="preload" href=“styles.css” as=“style”> HTML
  79. 79. Preloading Resource Loading 
 Link: <https://otherhost.com/font.woff2>; rel=preload; as=font; crossorigin HTTP
  80. 80. Priority Hints Resource Loading 
 <link rel="preload" as="image" 
 href="hero.jpg" importante="high"> <img src="otherimage.jpg" importance="low"> HTML 🆕
  81. 81. Hack Images
  82. 82. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders A picture is worth a thousand words…
  83. 83. … if it loads
  84. 84. 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)
  85. 85. Preloading Responsive Images Resource Loading <link rel="preload" as="image" 
 imagesrcset="200w.jpg 200w, 300w.jpg 300w" 
 imagesizes="(max-width: 500px) 50vw, 650px"> HTML 🆕
  86. 86. Time to replace standard JPEG and PNG Images
  87. 87. Lossless format: Zopfli PNG https://github.com/imagemin/zopflipng-bin 20% Images
  88. 88. Lossless format: Guetzli JPEG https://github.com/google/guetzli 20-30% Images
  89. 89. Meet HTTP Client Hints Images • Browser will expose data to the server 
 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Device-Memory”> HTML
  90. 90. Meet HTTP Client Hints Images •Today we can ask for • RTT • Downlink • ECT (2g, 3g, 4g, slow-2g) • Save-Data • DPR and Viewport-Width • Device-Memory
  91. 91. Decode images in a thread Images • github.com/GoogleChrome/offthread-image
  92. 92. Reactive Web Performance User Experience
  93. 93. Know about the context User Experience • Client-side Performance APIs • Network Information API • Device Memory Client Hint • Save-Data Client Hint
  94. 94. Hack User Experience
  95. 95. Get Reports from the Browser User Experience • Reporting API • Report-To header with a server endpoint • Browser will send you reports about problems, including Chrome Lite Pages activation
  96. 96. Consistent Experience User Experience • Web Fonts • Change SW’s cache policy • SSR vs CSR • Reduce amount of loaded data • 1x image not matter DPR
  97. 97. Feeling bad enough?
  98. 98. Performance is TOP PRIORITY Push it even more It’s a worthwhile effort
  99. 99. Foto de freefoto.com www.firt.mobi @firt See you tomorrow 9am Say hi to AR on the Web

×