NodeJS Edinburgh Video Killed My Data Plan
Download as PPTX, PDF0 likes324 views
The document discusses optimizing video delivery for mobile users. It notes that video consumption is growing rapidly but can kill data plans. Some key points made include: - At least 19% of videos are identical on mobile and desktop, but desktop versions are often larger. Videos should be resized for different screens to reduce file sizes. - Videos that will not be displayed should not be downloaded to save bandwidth. Background videos especially should be resized for mobile. - Streaming videos from a manifest allows adapting the quality based on bandwidth, but initial quality still impacts startup time and abandonment rates. - Third parties can significantly increase page sizes through additional downloads for video players and scripts. Their impact on performance should be aud
NodeJS Edinburgh Video Killed My Data Plan
- 1. Video Killed My Data Plan How to Deliver Video Quickly, Beautifully, and without stalls Doug Sillars NodeJS Edinburgh February 5, 2019 @DougSillars
- 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. Video Consumption is Growing https://www.recode.net/2017/6/8/15757594/future-internet-traffic-watch-live-video-facebook-google-netflix
- 4. Video Killed My Data Plan
- 5. Study of the Web https://Webpagetest.org https://httparchive.org
- 6. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
- 7. WebPageTest
- 8. Video Consumption is Growing HTTPArchive: Sites with Video 15/6 crawls: 2017, & 2018 (out of 500k sites)
- 9. Video Use on the Web HTTPArchive
- 10. Video Use on the Web HTTPArchive
- 11. Video Use on the Web HTTPArchive
- 12. Video Use on the Web HTTPArchive
- 13. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good?
- 14. 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!
- 15. 15 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
- 16. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start ~800M hours of video playback lost
- 17. Video Fails To Start
- 19. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup Average Video Start Time: N. America: 4.91s Asia: 3.00s Europe: 4.30s
- 20. 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
- 22. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video 7/15/2018 Mobile: 36,485 Desktop: 55,048
- 23. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video 7/15/2018 36,485 55,048 30,442
- 24. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video 7/15/2018 36,485 55,048 30,442 83% of mobile Desktop: 207k video requests Mobile: 185k video requests 19% of videos are IDENTICAL on desktop and mobile
- 25. 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
- 26. Image Optimization Image Quality (85% or SSIM) Image Format Responsive Image
- 27. Image Optimization 2.53 MB 1.68MB 1.28 MB 1.24MB (WebP) 204 KB (1400px wide) Image Quality (85% or SSIM) Image Format Responsive Image http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto,w_1400/v1532673490/IMG_20150625_192917267_o4 bvyk.jpg
- 30. Video
- 31. Video Compression • Video is broken into a Group of Pictures (GOP) • I-Frame: Full Image • P-Frame: uses vectors to forward predict colors (50% size of I-Frame) • B: Frame: Forward/backward predicted with vectors (25% size of I- Frame) https://en.wikipedia.org/wiki/Inter_frame#P-frame
- 32. Video Compression over Time • P-Frames
- 33. Video Compression over Time • B-Frames
- 34. Video Compression over Time • P & B Frame vectors
- 35. Animated GIFs
- 36. Animated GIFs “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” -GIF89a Specification https://www.w3.org/Graphics/GIF/spec-gif89a.txt
- 38. Animated GIFs Animated GIF 3.8 MB 270% larger
- 39. Animated GIFs No GOP Compression
- 40. Animated GIFs: as Video? MP4: 256 colors 247KB 93% smaller
- 41. Animated GIFs: Social Media
- 42. Animated GIFs: Social Media #FAKENEWS
- 43. Animated GIFs: Social Media
- 44. Animated GIFs: as Video! Video Tags: <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> 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/
- 45. Video Stats: File Extensions
- 46. Video: Different Size Screens • (at least) 19% of all videos are identical on mobile and desktop
- 47. 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
- 48. 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
- 49. 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)
- 50. Video: Don’t Download More on Mobile Desktop Mobile
- 51. Video: Don’t Download More on Mobile Desktop Mobile @media only screen and (min-width:1024px) Don’t Download Video That Is Not Displayed
- 52. Video Preload = “auto” Only use with high probability video views!
- 53. Video Preload • preload = “metadata” • Only downloads first x% of the video
- 54. Video Preload • preload = “metadata” • Only downloads first x% of the video
- 55. Video Preload • preload = “metadata” • Only downloads first x% of the video
- 56. Video Preload • preload = “metadata” 150s 1920x1080 Full Length: 97MB Use with discretion. Mind your customer’s data plans.
- 57. Video: Preload • preload = “auto||metadata” Best Practices: • Auto: Avoid unless high probability of play • Metadata: medium probability of play – YMMV
- 58. Background Video
- 59. 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.
- 60. Video Background: Mobile Best Practice: If Viewport will not support Video… Don’t Download it
- 61. Background Video
- 62. Video Background
- 63. Video Background 33.6 MB 27s 2560 x 1226 10 MBPS
- 64. Video Background Best Practice: Resize Video to reasonable size. 33.6 MB 27s 2560 x 1226 10 MBPS
- 65. Video Background Best Practice: Resize Video to reasonable size. PROTIP: Renaming the file is not enough…
- 66. 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
- 68. Video Is Not Cheap
- 69. Video Is Not Cheap
- 70. Video Is Not Cheap
- 71. Video Is Not Cheap
- 72. Video Is Not Cheap After 20 free videos Each Video Download costs:
- 73. Video Is Not Cheap
- 74. Video Is Not Cheap
- 75. 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.
- 76. Video Streaming
- 77. 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
- 78. Video Plays Optimizing Video Delivery Video Streaming Player can estimate network throughput Optimal video Bitrate
- 79. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks Video Tracks (iFrames) Audio Tracks & Subtitles
- 80. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks
- 81. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
- 82. Video Streaming HTTPArchive: Sites with Video 7/15/2018 30,442 sites 83% of mobile 15,985 mobile TS files 14,081 desktop TS files Desktop => Mobile 1,928 TS files are identical Approximates First Stream Choice
- 83. 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
- 84. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup Average Video Start Time: N. America: 4.91s Asia: 3.00s Europe: 4.30s
- 85. Video Streaming: Startup Time Low -> High High => Low Middle (Goldilocks)
- 86. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle (Goldilocks): 4k:High->Low:
- 87. 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
- 88. 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
- 89. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G
- 90. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
- 91. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
- 92. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G
- 93. Video Streaming: Manifest File 600k.m3u8
- 94. Video Streaming: Manifest File 600k.m3u8
- 95. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
- 96. The Spengler
- 98. Crossing the Streams 24 simultaneous streams @ 400-600 KBPS!! 245 MB of data in < 4 minutes.
- 99. Third Parties No initial Video Download, but expect 700KB -1MB additional JavaScript on page load
- 102. Summary •Video files are big!
- 103. Best Practices 1. Resize Videos Appropriately for screen: 1. Quality 2. Bitrate 3. Dimensions/DPR Respect your Mobile Users’ data plans!
- 104. 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!
- 105. Best Practices 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. Even bitrate changes to prevent stalls 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. Respect your Mobile Users’ data plans!
- 106. 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/
- 111. Video Stats: Top Mobile Domains (over 1k served)
- 112. Video Streaming: Video Size HTTPArchive: Sites with Video 7/15/2018
- 113. Video Streaming: Video Size HTTPArchive: Sites with Video 7/15/2018
Editor's Notes
- #59: www.kidzania.com
- #60: www.kidzania.com
- #61: www.kidzania.com
- #62: www.kidzania.com
- #63: www.depend.com
- #64: www.depend.com
- #65: www.depend.com
- #66: www.depend.com
- #68: www.depend.com
- #69: www.govisland.com
- #70: www.govisland.com
- #71: www.govisland.com
- #72: www.govisland.com
- #73: www.govisland.com
- #74: www.govisland.com
- #75: www.govisland.com
- #76: www.govisland.com
- #104: www.govisland.com
- #105: www.govisland.com
- #106: www.govisland.com
- #107: www.govisland.com