Download as PDF, PPTX
Uploaded byMaximiliano Firtman
Hacking Web Performance
This document discusses ways to improve web performance for mobile users. It outlines goals like achieving a speed index between 1,100-2,500 and first meaningful paint within 1-3 seconds. Various techniques are presented for hacking first load times, data transfer, resource loading, images and user experience. These include avoiding redirects, using HTTP/2 and service workers, modern cache controls, responsive images, preloading resources, and ensuring consistent frame rates. The overall message is that mobile performance needs more attention given average load times and high bounce rates on slow mobile sites.
TechnologyâŚ
Hacking Web Performance
- 1. Picture from SimonHowden freedigitalphotos.net! hacking web performance Maximiliano Firtman @ďŹrt
- 2. mobile+web developer &trainer
- 3.
- 5.
- 9. I have 2goalsâŚ
- 10. Show you newtricks đ
- 11.
- 12.
- 13. I know youknow
- 14. http://www.flickr.com/photos/steenslag/22689920/ - borrowedfromSteve Souders
- 15. Picture from SimonHowden freedigitalphotos.net
- 16. 16 Picture from SimonHowden freedigitalphotos.net
- 17. 500ms delay, +26%userâs frustration Source: Radware :(
- 18. 500ms delay, -20%Googleâs traďŹc 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
- 19. +100ms delay, -1%Amazonâs sales 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt :(
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. I know youknow Performance is important We need a great Speed Index We need goals to achieve
- 26. Goals⨠Speed Index: 1,100-2,500 FirstMeaningful Paint: 1-3s First Interactive: 2-4s
- 27.
- 28. Optimizing the networktransfer ⨠You are already
- 29. Working with TLSand HTTP/2 ⨠You are already
- 30. CSS as Appetizer ⨠Youare already
- 31. JavaScript as Dessert ⨠Youare already
- 32.
- 33. Have an HTTPCache Policy ⨠You are already
- 34. Using Service Workers ⨠Youare already
- 35.
- 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.
- 42.
- 43. browsers with marketshare
- 45.
- 46. We have 4G!We don't need to worry about performance... ( )
- 47.
- 48. ~10% of thetime 4G is not used
- 49. RTT - latency cellularnetworks 2G 3G 4G Home 0 250 500 750 1000 Min Max
- 50. Letâs hack WebPerformance!
- 51.
- 52. Avoid more thanone roundtrip First Load ⢠TCP Slow Start - initial congestion window ⨠(initcwnd) ⢠Linux: 14.6 KiB (10 segments) ⢠CDNs are playing with diďŹerent values
- 53. Deliver ATF in14.6 KiB First Load ⢠Embed all CSS and JavaScript needed ⢠If space, embed logo and/or low-res images
- 54. Avoid http tohttpS redirect First Load ⢠Use HSTS (HTTP Strict Transport Security) ⢠Header ⢠Opt-in at hstspreload.org
- 55.
- 56. QUIC Data Transfer ⢠Experimentaltransport protocol over UDP ⢠Reduces latency and connection messages ⢠HTTP/2 Interface with T?LS
- 57. Data Transfer Image fromChromium Blog
- 58. Data Transfer ⢠Googleâssearch page: 3% improvement ⢠YouTube: reduced 30% buďŹering ⢠Facebook similar protocol: 2% improvement ⢠75% of requests can be optimized QUIC
- 59. Use ZopďŹi Data Transfer â˘Save 3-8% data transfer with GZIP ⢠Itâs ~80x slower
- 60. Use Brotli Data Transfer â˘Save ~25% data transfer compared with GZIP ⢠Check Encoding Header
- 61. Use Brotli Data Transfer â˘LinkedIn: 4% savings in load time ⢠Facebook: 17% savings on CSS, 20% on JavaScript
- 62. Readable Streams Data Transfer â˘Process data as it arrives in chunks ⢠45% savings on paint metrics ⨠(when data is client-side rendered)
- 63.
- 64. HTTP/2 Push (?) ResourceLoading ⢠On most situations it can be an anti-pattern ⢠You can be pushing ďŹles that are in the client
- 65. Modern Cache Control ResourceLoading ⢠Hash in ďŹlenames is common for versioning ⢠Browsers make conditional requests
- 66. Modern Cache Control ResourceLoading ⢠Hello to Cache-Control: immutable
- 67. Modern Cache Control ResourceLoading ⢠Itâs a common new pattern to ⢠1) serve from the cache ⢠2) update it in the background for later
- 68. Modern Cache Control ResourceLoading Cache-Control: stale-while-revalidate=99
- 69. Warming up engines ResourceLoading ⢠Help the browser to start processes ASAP ⢠DNS Queries: ~200ms ⢠TCP and TLS connection: ~200ms
- 70. Announce DNS queriesASAP ⨠<link rel="dns-prefetch" href=âhttps://newdomain.com"> HTML Resource Loading
- 71. Announce TLS connectionsASAP ⨠<link rel="preconnect" href=âhttps://newdomain.comâ crossorigin> HTML Resource Loading
- 72. Announce on HTTPResponse ⨠Link: <https://my-analytics.com>; rel=preconnect; crossorigin HTTP Resource Loading
- 73. To bundle ornot to bundle Resource Loading ⢠On HTTP/2 might seem an anti-pattern ⢠But itâs not!
- 74.
- 75. To bundle ornot to bundle Resource Loading ⢠Bundle! ⢠But not everything ⢠First, code-splitting and load only the important
- 76. Web Fonts Resource Loading â˘Avoid FOUT (Flash of Unstyled Text) ⢠font-display: optional or swap
- 77. Preloading Resource Loading ⢠Helpthe browser prioritize resources for rendering
- 78. Preloading Resource Loading ⨠<link rel="preload"href=âstyles.cssâ as=âstyleâ> HTML
- 79. Preloading Resource Loading ⨠Link: <https://otherhost.com/font.woff2>;rel=preload; as=font; crossorigin HTTP
- 80. Cache Storage Resource Loading â˘With Service Workers now everywhere ⢠Time to use Cache Storage everywhere we can
- 81.
- 82. http://www.flickr.com/photos/steenslag/22689920/ - borrowedfromSteve Souders A picture is worth a thousand wordsâŚ
- 83. ⌠if itloads
- 84. Embrace Responsive Images DataTransfer ⢠Not just 3 versions of your image ⢠65% of the traďŹc is for images (HttpArchive) ⢠84% improvement creating n versions (ScientiaMobile)
- 85. Time to replaceJPEG and PNG Images
- 86. Lossy format: WebP(weppy) 25-40% Images
- 87. Lossy format: JPEG2000 (JPX) 20% Images
- 88. Lossy format: JPEGXR (JXR) 25% Images
- 89. Lossy format: HEIF(heef) 25% Images
- 90. Lossless format: ZopfliPNG https://github.com/imagemin/zopďŹipng-bin 20% Images
- 91. Lossless format: GuetzliJPEG https://github.com/google/guetzli 20-30% Images
- 92. Deal with compatibility! Images â˘Service Workers decoders ⢠Hello to <picture>
- 93. <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>
- 94. Meet HTTP ClientHints Images ⢠Browser will expose data to the server ⨠<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink, Device-Memoryâ> HTML
- 95. Meet HTTP ClientHints Images ⢠Chrome 67 includes more Hints ⢠RTT ⢠Downlink ⢠ECT (2g, 3g, 4g, slow-2g)
- 96. Decode images ina thread Images ⢠github.com/GoogleChrome/offthread-image
- 97. Stop using AnimatedGIFs! Images ⢠Use Animated PNGs or Animated WebP ⢠Use muted videos ⢠Use <img> with video (iOS 12)
- 98. The future looksinteresting! Images ⢠AVIF ⢠BPG ⢠FLIF
- 99.
- 100. Consistent Frame Rateand Response Times User Experience ⢠Donât execute JS for more than 50ms ⢠Use LongTask API for detection ⢠Use WebWorkers or requestIdleCallback
- 101. Avoid calculations andrepaints User Experience ⢠Promote animated layers to the GPU ⨠CSS will-change ⢠Limit browserâs ability to style, layout and paint⨠CSS Containment
- 102. Passive Event Listener UserExperience
- 103. Reactive Web Performance UserExperience
- 104. Know about thecontext User Experience ⢠Client-side Performance APIs ⢠Network Information API ⢠Device Memory Client Hint ⢠Save-Data Client Hint
- 105. Consistent Experience User Experience â˘Web Fonts ⢠Change SWâs cache policy ⢠Reduce amount of loaded data ⢠1x image not matter DPR
- 106.
- 107. Performance is TOPPRIORITY Push it even more Itâs a worthwhile eďŹort
- 108.
- 109.