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.

Vilnius py video

240 views

Published on

Presented May 15, 2019

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vilnius py video

  1. 1. Delivering Fast Video without the Bufferin Or: Video Killed My Data Plan Doug Sillars Vilnius Py May 15, 2019 @DougSillars
  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 http://bit.ly/HighPerformanceAndroidApps
  3. 3. Video Killed My Data Plan
  4. 4. Video Consumption is Growing HTTPArchive: Sites with Video 15/6 crawls: 2017, & 2018 (out of 500k sites)
  5. 5. Video Use on the Web HTTPArchive
  6. 6. Video Use on the Web HTTPArchive
  7. 7. Video Use on the Web HTTPArchive
  8. 8. Video Use on the Web HTTPArchive
  9. 9. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good?
  10. 10. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good? Video Delivery Optimisation will solve many of these issues!
  11. 11. 11 Video 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
  12. 12. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q3 2018: Video Startup
  13. 13. Video Fails To Start
  14. 14. Video Startup Failure
  15. 15. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q3 2018: Video Startup Mobile: 3.47s startup time Desktop: 6.29s startup time
  16. 16. 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
  17. 17. 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
  18. 18. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video 7/15/2018 30,442 83% of mobile 19% of videos are IDENTICAL on desktop and mobile
  19. 19. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good? 19% of videos are IDENTICAL on desktop and mobile
  20. 20. Image Optimization HTTPArchive 15/06/2018
  21. 21. Video Optimization? HTTPArchive 15/06/2018
  22. 22. Video Stats: File Extensions
  23. 23. Video: Different Size Screens • (at least) 19% of all videos are identical on mobile and desktop
  24. 24. Video: Different Size Screens • (at least) 19% of all videos are identical on mobile and desktop 17 MB 960 x 540 83s 1.78 MBPS
  25. 25. Video: Different Size Screens • (at least) 19% of all videos are identical on mobile and desktop 17 MB 960 x 540 83s 1.78 MBPS
  26. 26. Video: Different Size Screens • (at least) 19% of all videos are identical on mobile and desktop 17 MB 960 x 540 83s 1.78 MBPS Downscale to 1.37 MBPS: http://res.cloudinary.com/dougsill ars/video/upload/vc_auto/v15334 48727/asset_1800K_ncjqnf.mp4 Quality = 70 Audio 22k 13.3 MB (22% savings) 640x360: 6.4 MB (62% savings)
  27. 27. Video: Don’t Download More on Mobile Desktop Mobile
  28. 28. Video: Don’t Download More on Mobile Desktop Mobile @media only screen and (min-width:1024px) Don’t Download Video That Is Not Displayed
  29. 29. Video Preload = “auto” Only use with high probability video views!
  30. 30. Video Preload = “auto” https://de.cars.mclaren.com/
  31. 31. Video <link as="video" rel="preload" href="https://cdn.ovoenergy.com/websites- prd/video_2019_03.mp4" media="(min-width: 767px)"/>
  32. 32. Video Preload • preload = “metadata” • Only downloads first x% of the video
  33. 33. Video Preload • preload = “metadata” • Only downloads first x% of the video
  34. 34. Video Preload • preload = “metadata” • Only downloads first x% of the video
  35. 35. Video Preload • preload = “metadata” 150s 1920x1080 Full Length: 97MB Use with discretion. Mind your customer’s data plans.
  36. 36. Video: Preload • preload = “auto||metadata” Best Practices: • Auto: Avoid unless high probability of play • Metadata: medium probability of play – YMMV
  37. 37. Background Video
  38. 38. Video Background Video (as Downloaded): 5.3 MB Video 5 MB Audio 250 KB 5% of file Best Practice: To save bandwidth, remove the audio stream from videos that are played silently.
  39. 39. Video Background: Mobile Best Practice: If Viewport will not support Video… Don’t Download it
  40. 40. Background Video
  41. 41. Video Background
  42. 42. Video Background 33.6 MB 27s 2560 x 1226 10 MBPS
  43. 43. Video Background Best Practice: Resize Video to reasonable size. 33.6 MB 27s 2560 x 1226 10 MBPS
  44. 44. Video Background Best Practice: Resize Video to reasonable size. PROTIP: Renaming the file is not enough…
  45. 45. Video Resizing • 1920x1080: 8.1 MB • 1280x720: 4.3 MB • 1080x608: 3.3 MB • 720x405: 1.76 MB http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4
  46. 46. Video Background: Mobile
  47. 47. Video Is Not Cheap
  48. 48. Video Is Not Cheap
  49. 49. Video Is Not Cheap
  50. 50. Video Is Not Cheap
  51. 51. Video Is Not Cheap After 20 free videos Each Video Download costs:
  52. 52. Video Is Not Cheap
  53. 53. Video Is Not Cheap
  54. 54. Best Practices (So Far…) 1. DPR: Use Judiciously on mobile. 2. If Video will be hidden…Don’t Download it. (Resize it!) 3. Avoid preload = Auto. 1. Be careful with preload=metadata. 4. For Silent Movies: Strip out audio track. 5. Don’t duplicate Video Traffic. 6. Big Files Can Cost Big $$ 7. Respect your Mobile Users’ data plans.
  55. 55. The Solution: Streaming Video
  56. 56. Third Party Streaming No initial Video Download, but expect 700KB -1MB additional JavaScript on page load
  57. 57. Third Parties
  58. 58. Video Streaming
  59. 59. Video Streaming Manifest File: List of Available Streams Player Chooses a Stream Stream Manifest: List of Video Segments Player Downloads Segments into buffer Video Plays
  60. 60. Video Plays Optimizing Video Delivery Video Streaming Player can estimate network throughput Optimal video Bitrate
  61. 61. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks Video Tracks (iFrames) Audio Tracks & Subtitles
  62. 62. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks
  63. 63. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
  64. 64. Optimizing Video Delivery Video Streaming Manifest File: List of Available Streams Player selects high bitrate stream Stream Manifest: List of Video Segments Buffer takes a long time to fill Video Does Not Play Player chooses low bitrate Buffer Fills Quickly Video Plays
  65. 65. Video Players By default: Focused on bandwidth, not video size:
  66. 66. Video Players By default: Focused on bandwidth, not video size:
  67. 67. Video Players By default: Focused on bandwidth, not video size:
  68. 68. Video Players By default: Focused on bandwidth, not video size:
  69. 69. Video Players Responsive attributes are off by default, and rarely used: Tip: Use the responsive attributes in your video player to save data!
  70. 70. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q3 2018: Video Startup Mobile: 3.47s startup time Desktop: 6.29s startup time
  71. 71. Video Streaming: Startup Time Low -> High High => Low Middle (Goldilocks)
  72. 72. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle (Goldilocks): 4k:High->Low:
  73. 73. Video Startup 4k Low->High: 4K Middle (Goldilocks): 4k:High->Low: PROs: CONS: Fast Startup Initial Quality: Low Other Connections: Initial Quality: Low Very slow startup Fast Connections: Initial Quality: High Initial Quality: Good Initial Startup: Not fast, but not slow
  74. 74. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Teal: Video Gray: Audio With a separate audio track – you can specify en, de, es
  75. 75. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G
  76. 76. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
  77. 77. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
  78. 78. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G
  79. 79. Video Streaming: Manifest File 600k.m3u8
  80. 80. Video Streaming: Manifest File 600k.m3u8
  81. 81. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
  82. 82. The Spengler
  83. 83. Crossing the Streams
  84. 84. Crossing the Streams 24 simultaneous streams @ 400-600 KBPS!! 245 MB of data in < 4 minutes.
  85. 85. Third Parties: Facebook HTTPArchive
  86. 86. Third Parties: Facebook
  87. 87. Summary •Video files are big!
  88. 88. Best Practices 1. Resize Videos Appropriately for screen: 1. Quality 2. Bitrate 3. Dimensions/DPR Respect your Mobile Users’ data plans!
  89. 89. Best Practices 1. 2. If Video will be hidden…Don’t Download it. 3. Avoid preload = Auto. 1. Be careful with preload=metadata. 4. For Silent Movies: Strip out audio track. 5. Don’t duplicate Video Traffic. Respect your Mobile Users’ data plans!
  90. 90. 3. Avoid preload = Auto. 1. Be careful with preload=metadata. 4. For Silent Movies: Strip out audio track. 5. Don’t duplicate Video Traffic. 6. Streaming: Start at lower bitrate for faster startup 7. Streaming: Start at middle bitrate for better startup quality. 8. Video Streaming Players not Responsive by default 9. Use correct bitrates in manifest to optimize delivery 10. One video at a time for best quality 11. Audit any third party hosting for performance. Best Practices Respect your Mobile Users’ data plans!
  91. 91. Thank You Respect your Mobile Users’ data plans! https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-1/ https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-2/ https://dougsillars.com/2018/08/21/excess-video-download-on-embedded-facebook-pages/

×