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.

QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance

16 views

Published on

Mobile apps and websites are now the predominant ways that users interact with brands. Research has shown that slow sites and apps lose customer engagement. Despite this, most mobile sites and apps have performance issues that can be easily resolved once diagnosed. In this talk, we will walk through steps to diagnose network performance bottlenecks in mobile services. We'll discuss real-world examples and how they were resolved. Attendees will leave this talk armed with the tools to test, diagnose and resolve the top network performance issues that affect mobile today.

Published in: Education
  • Be the first to comment

  • Be the first to like this

QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance

  1. 1. Fast and Beautiful Apps: Optimisations for When It’s Just Too Slow Doug Sillars @DougSillars QA Fest Kiev September 21, 2019
  2. 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video/ML/AR http://bit.ly/HighPerformanceAndroidApps
  3. 3. 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
  4. 4. What Is Fast? https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg
  5. 5. 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
  6. 6. Fast is a Human Perception In 1993:
  7. 7. 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/
  8. 8. 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
  9. 9. 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
  10. 10. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
  11. 11. Charles Proxy
  12. 12. Video Optimizer
  13. 13. Video Optimizer
  14. 14. Video Optimizer
  15. 15. WebPageTest
  16. 16. WebPageTest
  17. 17. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
  18. 18. https://pixabay.com/en/office-business-accountant-620822/
  19. 19. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471
  20. 20. https://opensignal.com/reports/2018/02/state-of-lte
  21. 21. Network Coverage Can be Variable
  22. 22. https://pixabay.com/en/office-business-accountant-620822/
  23. 23. Profile & Benchmark Where You Are Today Standardize your connection
  24. 24. Devices
  25. 25. Your Device is Not Your Customer’s Device https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize
  26. 26. Older Phones are Drastically Slower Websites load 20-50% faster Year over year https://arxiv.org/pdf/1603.02293.pdf
  27. 27. https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/
  28. 28. Profile & Benchmark Where You Are Today Pick a mid-low range phone
  29. 29. Profile & Benchmark Where You Are Today Pick a mid-low range phone Test on Slower Networks
  30. 30. Is It Fast?
  31. 31. Is It Fast?
  32. 32. Is It Fast?
  33. 33. Set Goals
  34. 34. Rules for Speed • Deliver Content Quickly • Faster requests • More Efficient • Images and Video are Large Files
  35. 35. App Startup
  36. 36. JSON Headers: Request
  37. 37. App Startup
  38. 38. 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
  39. 39. 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:
  40. 40. 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:
  41. 41. App Startup
  42. 42. Content-Encoding JSON File: 267 KB
  43. 43. Content-Encoding JSON File: 267 KB Content-Encoding: gzip JSON.gz: 42 KB 85% savings Content-Encoding: br JSON.br: 30 KB 89% savings
  44. 44. 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:
  45. 45. Cache- Control
  46. 46. App Startup
  47. 47. Thumbnail Images
  48. 48. Thumbnail Images
  49. 49. Thumbnail 470 KB http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206
  50. 50. Thumbnail 470 KB
  51. 51. Little Thumbnail 470 KB 3 KB
  52. 52. Little Thumbnail 470 KB 3 KB 99.3% smaller!!
  53. 53. Image Size 2.23 MB 4608 x 3456
  54. 54. Image Processing 2.3 MB
  55. 55. Image Processing 2.3 MB 16M pixels
  56. 56. Image Processing 2.3 MB 16M pixels 1M pixels
  57. 57. Image Processing 2.3 MB 16M pixels 1M pixels
  58. 58. Image Processing 2.3 MB 16M pixels 1M pixels
  59. 59. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
  60. 60. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  61. 61. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  62. 62. Image Size 220 KB 1400 x 1050 https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg
  63. 63. Image Size 78 KB 800 x 600 https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1 53301_okeb2b.jpg
  64. 64. What Sizes Are Optimal? Check Your Analytics. See what screen sizes use your site the most, and base images on these devices
  65. 65. Responsive Images
  66. 66. 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
  67. 67. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  68. 68. Image Quality Lossy compression Removes pixels from image losing resolution Google recommends 85% for web
  69. 69. Image Quality Lossy compression Removes pixels from image losing resolution
  70. 70. Image Quality SSIM Quality adjusted to limit of human perception
  71. 71. Image Quality SSIM Quality adjusted to limit of human perception
  72. 72. 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
  73. 73. 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
  74. 74. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  75. 75. 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
  76. 76. Top Image Format Size HTTP Archive 11/2018
  77. 77. WebP Support 11/03/2018
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. Top Image Format Size: SVG HTTP Archive 11/2018
  82. 82. 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
  83. 83. 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
  84. 84. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  85. 85. Scalable Vector Graphics (SVG)
  86. 86. Scalable Vector Graphics (SVG)
  87. 87. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  88. 88. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  89. 89. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
  90. 90. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  91. 91. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  92. 92. 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
  93. 93. Scalable Vector Graphics (SVG)
  94. 94. Caching
  95. 95. Caching
  96. 96. Caching 768 x 558 61 KB 768 x 480 31 KB
  97. 97. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  98. 98. Lazy Loading
  99. 99. Lazy Loading
  100. 100. Lazy Loading: Experiments
  101. 101. Lazy Loading: Experiments
  102. 102. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading – SVG Previews
  103. 103. Preview Images
  104. 104. Lazy Loading: Experiments
  105. 105. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  106. 106. Animated GIFs Original MP4 1.4 MB
  107. 107. Animated GIFs
  108. 108. Animated GIFs Animated GIF 3.8 MB 270% larger
  109. 109. Animated GIFs
  110. 110. Animated GIFs MP4: 256 colors 247KB 93% smaller
  111. 111. 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/
  112. 112. Animated GIFs
  113. 113. Security – Leaking info to 3rd parties • https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us- 5eacf3eb00ca Are your URLs to 3rd parties leaking PII?
  114. 114. Security – Leaking info to 3rd parties • https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us- 5eacf3eb00ca Are your URLs to 3rd parties leaking PII?
  115. 115. Addendum: What Are Your Customers Saying?
  116. 116. Addendum: Lite Mode: Save-Data Save-Data: on
  117. 117. Addendum: Lite Mode: Save-Data
  118. 118. Addendum: Save-Data
  119. 119. Addendum: Save-Data
  120. 120. Addendum: Save-Data
  121. 121. 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
  122. 122. Addendum 2: Network Info
  123. 123. 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
  124. 124. 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
  125. 125. Be Vigilant!
  126. 126. Continue Testing For Performance
  127. 127. 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
  128. 128. Conclusion Images Can Be Beautiful AND Fast
  129. 129. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a

×