Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Its Time To Stop Stalling: Mobile App and Video Performance

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 63 Publicité

Its Time To Stop Stalling: Mobile App and Video Performance

Télécharger pour lire hors ligne

Mobile apps and mobile video need to be delivered quickly to keep your customers happy. This presentation was given in Brasov on 13/02/2018

Mobile apps and mobile video need to be delivered quickly to keep your customers happy. This presentation was given in Brasov on 13/02/2018

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Plus récents (20)

Publicité

Its Time To Stop Stalling: Mobile App and Video Performance

  1. 1. It’s Time to Stop Stalling: Doug Sillars Brasov Software Craftsmanship Meetup February 13, 2018 Mobile/Web Performance and You @DougSillars
  2. 2. 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
  3. 3. How Much Do Customers Hate Delays? 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
  4. 4. Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
  5. 5. Cellular Networks Are High Latency Environments • Connection Establishment 500-2500ms 50-250ms 1-10ms • Round Trip Time (RTT) 200ms 100ms 8-50ms 3G 4G Wi-Fi
  6. 6. Today’s Goals Test where your app/site is today Common Tools Learn best practices for speed Learn from existing tests See the results of performance fixes
  7. 7. Testing Your Mobile Performance Native Web Free & Open Source Tools Video Optimizer https://developer.att.com/ Video-Optimizer WebPageTest https://www.webpagetest.org https://webspeed.cloudinary.com
  8. 8. Testing With Video Optimizer Run network traces on your phone 1. Pick device 2. Collector type 3. Set network conditions 4. Decrypt HTTPS 5. Record screen? 6. Name 7. GO!
  9. 9. Video Optimizer Video Optimizer establishes a VPN connection on Device Collects all Traffic in/out Device screen displayed on your computer Click Stop to end trace. Files copied over to computer for analysis.
  10. 10. Best Practices– Test Results Connections Files and Images HTML Security Video
  11. 11. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
  12. 12. WebPageTest Results
  13. 13. Optimizing Content Delivery 1.Delivery Speed
  14. 14. Optimizing Content Delivery 1.Delivery Speed Coin-hive.com is a cryptocurrency mining script that is used in coin-jacking websites They have one server in Germany. Munich, DE ping: 10ms San Jose, US ping: 150ms Singapore ping: 200ms Data Collected with Circonius
  15. 15. Optimizing Content Delivery 1.Delivery Speed
  16. 16. Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
  17. 17. Optimizing Content Delivery 1.Delivery Speed
  18. 18. Optimizing Content Delivery 1.Delivery Speed
  19. 19. Optimizing Content Delivery 1.Delivery Speed: Redirects
  20. 20. Optimizing Content Delivery 1.Delivery Speed: Redirects
  21. 21. Optimizing Content Delivery 1.Delivery Speed: Redirects
  22. 22. Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
  23. 23. Optimizing Content Delivery
  24. 24. Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
  25. 25. Optimizing Content Delivery Text Compression 130 KB JSON file populates screen "primaryImageUrl":"/db_photos/showcards/v5/AllPhotos/1394 9024/p13949024_b_v5_aa.jpg" "title":"America's Got Talent"
  26. 26. Optimizing Content Delivery Text Compression 131 KB Uncompressed: • Gzip: 16 KB (88% smaller!) • Brotli: 12 KB (91% smaller!) Screen is populated with data and images faster
  27. 27. Optimizing Content Delivery Text Compression: Trends https://dougsillars.com/2017/10/18/text-compression-really-works-to-speed-your-app/
  28. 28. Optimizing Content Delivery Images
  29. 29. Optimizing Content Delivery Image EXIF 30 KB 5 KB of text data 16% potential savings
  30. 30. Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels
  31. 31. Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels
  32. 32. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  33. 33. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  34. 34. Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
  35. 35. Optimizing Content Delivery Image Quality Tooling http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_85,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg Auto Quality: 128 KB 91.7% savings! http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,r_0,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.webp WebP: 84 KB 94.6% savings!
  36. 36. Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
  37. 37. Optimizing Content Delivery Responsive Images <picture> <source media="(max-width: 480px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_320/v1517928 350/AlbaIulia.jpg"> <source media="(max-width: 768px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_488/v1517928350/AlbaIul ia.jpg"> <source media="(max-width: 1024px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_768/v1517928 350/AlbaIulia.jpg"> <img src="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1024/v1517928350/AlbaIulia.jpg" alt="Alba Iulia."> </picture> http://www.responsivebreakpoints.com/
  38. 38. Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
  39. 39. Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
  40. 40. Optimizing Content Delivery Animated GIFs
  41. 41. Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
  42. 42. Optimizing Content Delivery Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted controls = "false” src="goats.mp4" /> Img tags are fast! <picture> <source type="video/mp4" srcset="cats.mp4"> <source type="image/webp" srcset="cats.webp"> <img src="cats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
  43. 43. Optimizing Content Delivery
  44. 44. 46 Buffer Rage a state of uncontrollable fury or violent anger induced by delayed or interrupted streaming video content http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic
  45. 45. Video Startup Delay After 2 seconds, every additional second corresponds to 5.8% increase in abandonment https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
  46. 46. Video Startup Delay https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
  47. 47. Optimizing Content Delivery What Leads to Startup Delay? Manifest File: List of Available Streams Player Chooses a Stream Stream Manifest: List of Video Segments Player Downloads Segments into buffer Video Plays
  48. 48. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file:
  49. 49. Optimizing Content Delivery Video Streaming Manifest File: List of Available Streams Player selects 8.5 MBPS stream Stream Manifest: List of Video Segments Buffer takes a long time to fill Video Does Not Play Player immediately changes the stream choice to 600KBPS
  50. 50. Optimizing Content Delivery Video Streaming: Test on Fast Wi-Fi
  51. 51. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file: 8.5 MBPS is HIGH throughput for initial streaming Best Practice: Pick middle throughput to balance startup time and quality
  52. 52. Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
  53. 53. Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
  54. 54. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  55. 55. Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
  56. 56. Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
  57. 57. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
  58. 58. Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
  59. 59. Performance Summary 1.Delivery Speed 1.CDNs 2.Reduce redirects 2.Content Delivery 1) Text Compression 2) Image Sizing, Quality and Format 3) Video Bitrate
  60. 60. Summary Web: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com Native: Video Optimizer https://developer.att.com/Video-Optimizer High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps Images: Cloudinary https://www.cloudinary.com http://www.responsivebreakpoints.com/ Tooling
  61. 61. Contest 1.Test your application/website 2.Optimize 3.Test Again 4.Submit your results & describe the improvements: http://bit.ly/BrasovSCMContest 5.Submit by February 21, 2018. 6.Most optimized submission will win a prize courtesy of Cloudinary Questions or issues? @dougsillars on twitter or e-mail highperformanceandroid@gmail.com

Notes de l'éditeur

  • 1.8 MP
  • 0.4 MP
  • file:///Users/demo/Documents/reponsiveimages.html
  • file:///Users/demo/Documents/reponsiveimages.html

×