Belgrade when its just too slow
Download as PPTX, PDF2 likes154 views
The document provides tips for optimizing app performance and speed. It discusses how fast is perceived by humans, benchmarking current performance, optimizing images through resizing, format changes, quality adjustments, caching and lazy loading. Other tips include minimizing JSON response sizes through encoding, improving startup speed, and handling animated GIFs and videos efficiently. Testing tools are recommended to continuously monitor performance. The overall message is that applications can provide beautiful user experiences while also being fast.
Belgrade when its just too slow
- 1. Fast and Beautiful Apps: Optimisations for When It’s Just Too Slow Doug Sillars @DougSillars QA Serbia September 17, 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/ML/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
- 11. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
- 12. Charles Proxy
- 13. Video Optimizer
- 14. Video Optimizer
- 15. Video Optimizer
- 16. WebPageTest
- 17. WebPageTest
- 18. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
- 20. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471
- 22. Network Coverage Can be Variable
- 24. Profile & Benchmark Where You Are Today Standardize your connection
- 25. Devices
- 26. Your Device is Not Your Customer’s Device https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize
- 27. Older Phones are Drastically Slower Websites load 20-50% faster Year over year https://arxiv.org/pdf/1603.02293.pdf
- 30. Profile & Benchmark Where You Are Today Pick a mid-low range phone
- 31. Profile & Benchmark Where You Are Today Pick a mid-low range phone Test on Slower Networks
- 32. Is It Fast?
- 33. Is It Fast?
- 34. Is It Fast?
- 35. Set Goals
- 36. Rules for Speed • Deliver Content Quickly • Faster requests • More Efficient • Images and Video are Large Files
- 37. App Startup
- 39. App Startup
- 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
- 41. 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:
- 42. 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:
- 43. App Startup
- 45. Content-Encoding JSON File: 267 KB Content-Encoding: gzip JSON.gz: 42 KB 85% savings Content-Encoding: br JSON.br: 30 KB 89% savings
- 46. 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:
- 47. Cache- Control
- 48. App Startup
- 49. Thumbnail Images
- 50. Thumbnail Images
- 52. Thumbnail 470 KB
- 53. Little Thumbnail 470 KB 3 KB
- 54. Little Thumbnail 470 KB 3 KB 99.3% smaller!!
- 55. Image Size 2.23 MB 4608 x 3456
- 57. Image Processing 2.3 MB 16M pixels
- 58. Image Processing 2.3 MB 16M pixels 1M pixels
- 59. Image Processing 2.3 MB 16M pixels 1M pixels
- 60. Image Processing 2.3 MB 16M pixels 1M pixels
- 61. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
- 62. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 63. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 64. Image Size 220 KB 1400 x 1050 https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg
- 65. Image Size 78 KB 800 x 600 https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1 53301_okeb2b.jpg
- 66. What Sizes Are Optimal? Check Your Analytics. See what screen sizes use your site the most, and base images on these devices
- 68. 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
- 69. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 70. Image Quality Lossy compression Removes pixels from image losing resolution Google recommends 85% for web
- 71. Image Quality Lossy compression Removes pixels from image losing resolution
- 72. Image Quality SSIM Quality adjusted to limit of human perception
- 73. Image Quality SSIM Quality adjusted to limit of human perception
- 74. 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
- 75. 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
- 76. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 77. 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
- 78. Top Image Format Size HTTP Archive 11/2018
- 80. 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
- 81. 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
- 82. 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
- 83. Top Image Format Size: SVG HTTP Archive 11/2018
- 84. 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
- 85. 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
- 86. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 87. Scalable Vector Graphics (SVG)
- 88. Scalable Vector Graphics (SVG)
- 89. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 90. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 91. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
- 92. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 93. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 94. 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
- 95. Scalable Vector Graphics (SVG)
- 96. Caching
- 97. Caching
- 98. Caching 768 x 558 61 KB 768 x 480 31 KB
- 99. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
- 100. Lazy Loading
- 101. Lazy Loading
- 104. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading – SVG Previews
- 105. Preview Images
- 107. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
- 108. Animated GIFs Original MP4 1.4 MB
- 109. Animated GIFs
- 110. Animated GIFs Animated GIF 3.8 MB 270% larger
- 111. Animated GIFs
- 112. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 113. 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/
- 114. Animated GIFs
- 115. 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?
- 116. 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?
- 117. Addendum: What Are Your Customers Saying?
- 118. Addendum: Lite Mode: Save-Data Save-Data: on
- 119. Addendum: Lite Mode: Save-Data
- 120. Addendum: Save-Data
- 121. Addendum: Save-Data
- 122. Addendum: Save-Data
- 123. 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
- 124. Addendum 2: Network Info
- 125. 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
- 126. 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
- 127. Be Vigilant!
- 128. Continue Testing For Performance
- 129. 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
- 130. Conclusion Images Can Be Beautiful AND Fast
- 131. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a
Editor's Notes
- #85: 1149 bytes, 700 Zipped
- #86: 1149 bytes, 700 Zipped
- #88: 1149 bytes, 700 Zipped
- #89: 1149 bytes, 700 Zipped
- #90: 1149 bytes, 700 Zipped
- #91: 1149 bytes, 700 Zipped
- #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
- #108: file:///Users/demo/Documents/reponsiveimages.html