Threadneedle when its just too slow
Download as PPTX, PDF0 likes197 views
This document discusses optimizing mobile application performance through testing. It begins by explaining that performance is a human perception, with delays of 100ms feeling instantaneous, 1s still allowing for an uninterrupted train of thought, and 10s being the limit to maintain focus. It then discusses benchmarking applications to understand current performance, identifying fixes, optimizing through things like image size and format, caching, and lazy loading. The overall message is that thorough testing across devices and networks is needed to optimize mobile applications for speed.
Threadneedle when its just too slow
- 1. It’s Just Too Slow: Mobile Application Performance Testing Doug Sillars @DougSillars Threadneedle, London May 1, 2019
- 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video/AR http://bit.ly/HighPerformanceAndroidApps
- 4. 0.5 0.6 0.7 0.8 0.9 Standing in Line Standing on the edge of a virtual cliff Experiencing Mobile Delays Solving a Math Problem https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf Stress
- 6. Fast is a Human Perception • 100ms: • 1s: • 10s: https://www.nngroup.com/articles/response-times-3-important-limits/ Perceived as instantaneous Limit for uninterrupted train of thought: Delay is noticed, but generally accepted Limit for keeping focus
- 7. Fast is a Human Perception In 1993:
- 8. Fast is a Human Perception • 100ms: • 1s: • 10s: Perceived as instantaneous Limit for uninterrupted train of thought: Delay is noticed, but generally accepted Limit for keeping focus 65ms: ranged from 34-164ms https://calendar.perfplanet.com/2018/magic-numbers/
- 9. Fast is a Human Perception • 100ms: • 1s: • 10s: 3-5s: Perceived as instantaneous Limit for uninterrupted train of thought: Delay is noticed, but generally accepted Limit for keeping focus 65ms: ranged from 34-164ms
- 10. Performance Studies 3s: 53% of Users Abandon Mobile Sites 500ms: 26% Frustration 8% Engagement 100ms: 1% Revenue Walmart & Amazon (Desktop 2001) 4% Mobile Users Throw Their Phones https://www.doubleclickbygoogle.com/articles/mobile-speed-matters http://bit.ly/mobileWebStress http://www.globaldots.com/how-website-speed-affects-conversion-rates/ https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html
- 12. Testing For Fast Benchmark Application Lifecycle
- 13. Testing For Fast Benchmark Identify Fixes Application Lifecycle
- 14. Testing For Fast Benchmark Make Optimisations Identify Fixes Application Lifecycle
- 15. Testing For Fast Benchmark Make Optimisations Test Identify Fixes Application Lifecycle
- 16. Testing For Fast Benchmark Make Optimisations Test Identify Fixes Launch fixes Application Lifecycle
- 17. Testing For Fast Benchmark Make Optimisations Test Identify Fixes Launch fixes Application Lifecycle
- 18. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
- 19. Charles Proxy
- 20. Video Optimizer
- 21. Video Optimizer
- 22. Video Optimizer
- 23. WebPageTest
- 24. WebPageTest
- 25. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
- 27. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471
- 29. Network Coverage Can be Variable
- 31. Profile & Benchmark Where You Are Today Standardize your connection
- 32. Devices
- 33. Your Device is Not Your Customer’s Device https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize
- 34. Older Phones are Drastically Slower Websites load 20-50% faster Year over year https://arxiv.org/pdf/1603.02293.pdf
- 37. Profile & Benchmark Where You Are Today Pick a mid-low range phone
- 38. Profile & Benchmark Where You Are Today Pick a mid-low range phone Test on Slower Networks
- 39. Is It Fast?
- 40. Is It Fast?
- 41. Is It Fast?
- 42. Set Goals
- 43. Rules for Speed • Deliver Content Quickly • Faster requests • More Efficient • Images and Video are Large Files
- 44. App Startup
- 46. App Startup
- 47. JSON Headers:Response HTTP/1.1 200 OK Date Sun, 28 Oct 2018 09:26:24 GMT Server Apache X-Robots-Tag noindex X-Content-Type-Options nosniff Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages Access-Control-Allow-Headers Authorization, Content-Type X-WP-Total 5222 X-WP-TotalPages 523 Link ; rel="next" Allow GET Keep-Alive timeout=5, max=100 Transfer-Encoding chunked Content-Type application/json; charset=UTF-8 Connection keep-alive
- 48. JSON Headers:Response HTTP/1.1 200 OK Date Sun, 28 Oct 2018 09:26:24 GMT Server Apache X-Robots-Tag noindex X-Content-Type-Options nosniff Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages Access-Control-Allow-Headers Authorization, Content-Type X-WP-Total 5222 X-WP-TotalPages 523 Link ; rel="next" Allow GET Keep-Alive timeout=5, max=100 Transfer-Encoding chunked Content-Type application/json; charset=UTF-8 Connection keep-alive Content-Encoding: Cache-Control:
- 49. JSON Headers:Response HTTP/1.1 200 OK Date Sun, 28 Oct 2018 09:26:24 GMT Server Apache X-Robots-Tag noindex X-Content-Type-Options nosniff Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages Access-Control-Allow-Headers Authorization, Content-Type X-WP-Total 5222 X-WP-TotalPages 523 Link ; rel="next" Allow GET Keep-Alive timeout=5, max=100 Transfer-Encoding chunked Content-Type application/json; charset=UTF-8 Connection keep-alive Content-Encoding: Cache-Control:
- 50. App Startup
- 52. Content-Encoding JSON File: 267 KB Content-Encoding: gzip JSON.gz: 42 KB 85% savings Content-Encoding: br JSON.br: 30 KB 89% savings
- 53. JSON Headers:Response HTTP/1.1 200 OK Date Sun, 28 Oct 2018 09:26:24 GMT Server Apache X-Robots-Tag noindex X-Content-Type-Options nosniff Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages Access-Control-Allow-Headers Authorization, Content-Type X-WP-Total 5222 X-WP-TotalPages 523 Link ; rel="next" Allow GET Keep-Alive timeout=5, max=100 Transfer-Encoding chunked Content-Type application/json; charset=UTF-8 Connection keep-alive Content-Encoding: Cache-Control:
- 54. Cache- Control
- 55. App Startup
- 56. Thumbnail Images
- 57. Thumbnail Images
- 59. Thumbnail 470 KB
- 60. Little Thumbnail 470 KB 3 KB
- 61. Little Thumbnail 470 KB 3 KB 99.3% smaller!!
- 62. Image Size 2.23 MB 4608 x 3456
- 64. Image Processing 2.3 MB 16M pixels
- 65. Image Processing 2.3 MB 16M pixels 1M pixels
- 66. Image Processing 2.3 MB 16M pixels 1M pixels
- 67. Image Processing 2.3 MB 16M pixels 1M pixels
- 68. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
- 69. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 70. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 71. Image Size 220 KB 1400 x 1050 https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg
- 72. Image Size 78 KB 800 x 600 https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1 53301_okeb2b.jpg
- 73. What Sizes Are Optimal? Check Your Analytics. See what screen sizes use your site the most, and base images on these devices
- 75. Image Processing (correctly sized) 1.5M pixels First Load (s) Image Decode (ms) Desktop 2.7 26 Moto G4 3.0 73 Alcatel 1X 3.1 123
- 76. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 77. Image Quality Lossy compression Removes pixels from image losing resolution Google recommends 85% for web
- 78. Image Quality Lossy compression Removes pixels from image losing resolution
- 79. Image Quality SSIM Quality adjusted to limit of human perception
- 80. Image Quality SSIM Quality adjusted to limit of human perception
- 81. Image Quality 180 KB 1400 x 1050 SSIM Quality https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg
- 82. Image Quality - SSIM 1.5M pixels First Load (s) Image Decode (ms) Desktop 2.7 35 Moto G4 2.8 123 Alcatel 1X 2.9 342
- 83. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 84. Top Image Formats jpg, 17,047,941 png, 13,126,543 , 11,795,123 gif, 5,053,385 svg, 1,687,541 ico, 1,076,035 php, 644,839 jpeg, 442,705 webp, 159,089 aspx, 150,792 cnt HTTP Archive 11/2018
- 85. Top Image Format Size HTTP Archive 11/2018
- 87. Image Format 161 KB 1400 x 1050 SSIM Quality WebP https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto,f_auto/v1540978150/IMG_20181028_153301_okeb2b.j
- 88. Image Quality - WebP 1.5M pixels First Load (s) Image Decode (ms) Desktop 2.6 42 Moto G4 2.7 153 Alcatel 1X 2.8 170
- 89. Fast and Beautiful: 1.5M pixels 0 2 4 6 8 10 12 14 16 18 0 500 1000 1500 2000 2500 full resize q_auto webp
- 90. Top Image Format Size: SVG HTTP Archive 11/2018
- 91. Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 92. Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 93. Scalable Vector Graphics (SVG)
- 94. Scalable Vector Graphics (SVG)
- 95. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 96. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 97. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
- 98. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 99. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 100. Scalable Vector Graphics (SVG) <style > .svgorange { filter: invert(.5) sepia(1) saturate(5) hue-rotate(5deg); } </style> <img class="svgorange" src ="map- marker-circle.svg"> https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6
- 101. Scalable Vector Graphics (SVG)
- 102. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 103. Caching
- 104. Caching
- 105. Caching 768 x 558 61 KB 768 x 480 31 KB
- 106. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 107. Lazy Loading
- 108. Lazy Loading
- 111. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading – SVG Previews
- 112. Preview Images
- 114. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
- 115. Animated GIFs Original MP4 1.4 MB
- 116. Animated GIFs
- 117. Animated GIFs Animated GIF 3.8 MB 270% larger
- 118. Animated GIFs
- 119. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 120. Animated GIFs Video Tags: <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> Video is not pre-loaded, will be last to download Img tags are fast! <picture> <source type="video/mp4" srcset=”goats.mp4"> <source type="image/webp" srcset=”goats.webp"> <img src=”goats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
- 121. Animated GIFs
- 122. Addendum: What Are Your Customers Saying?
- 124. Addendum: Save-Data
- 125. Addendum: Save-Data
- 126. Addendum: Save-Data
- 127. Addendum: Save-Data q_auto -> q_auto:eco 180KB -> 135 KB https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg
- 128. Addendum 2: Network Info
- 129. Addendum 2: Network Info // Network type that browser uses navigator.connection.type; // Effective bandwidth estimate navigator.connection.downlink // Effective round-trip time estimate navigator.connection.rtt // Upper bound on the downlink speed of the first network hop navigator.connection.downlinkMax
- 130. Addendum 2: Network Info // Network type that browser uses navigator.connection.type; // Effective bandwidth estimate navigator.connection.downlink // Effective round-trip time estimate navigator.connection.rtt // Upper bound on the downlink speed of the first network hop navigator.connection.downlinkMax 500 KBPS
- 131. Addendum 3: Base 64 Encoding Images embedded as Base64 in your HTML/CSS/JS • Fewer Requests • Images Now Block Rendering of Page • Images are 20-30% larger • Caching is limited • Difficult to reference more than once https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/
- 132. Addendum 3: Base 64 Encoding • 91KB CSS Shared as University Template • 48KB is SVG • Never Appears on Any Page Departments, colleges and other units of the University of Nebraska–Lincoln should use the Nebraska N as a main identifier, not the University seal, on all publications, invitations, websites and other electronic media. https://unlcms.unl.edu/wdn/templates_4.1/css/all.css?dep=4.1.36
- 133. Addendum 3: Base 64 Encoding https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css
- 134. Be Vigilant!
- 135. Continue Testing For Performance
- 136. Summary Testing: WebPageTest https://www.webpagetest.org HttpArchive https://httparchive.org Images: ImageMagick https://www.imagemagick.org SSIM https://github.com/technopagan/cjpeg-dssim LazySizes https://github.com/aFarkas/lazysizes Responsive Breakpoints http://www.responsivebreakpoints.com/ Cloudinary https://www.cloudinary.com Tooling
- 137. Conclusion Images Can Be Beautiful AND Fast
Editor's Notes
- #92: 1149 bytes, 700 Zipped
- #93: 1149 bytes, 700 Zipped
- #94: 1149 bytes, 700 Zipped
- #95: 1149 bytes, 700 Zipped
- #96: 1149 bytes, 700 Zipped
- #97: 1149 bytes, 700 Zipped
- #98: 1149 bytes, 700 Zipped
- #99: 1149 bytes, 700 Zipped
- #100: 1149 bytes, 700 Zipped
- #101: 1149 bytes, 700 Zipped
- #102: 1149 bytes, 700 Zipped
- #115: file:///Users/demo/Documents/reponsiveimages.html