Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Its Time to Stop Stalling: Delivering Fast Video without the Buffering

Its Time to Stop Stalling: Delivering Fast Video without the Buffering

Adding video to your website is a great way to increase engagement and to highlight your brand. However, video that does not play smoothly causes frustration to users. With variable network conditions and low powered devices, how can you ensure that your video will look stream perfectly to all of your users? In this talk, we will walk through the mechanics of delivering video and apply best practices to deliver video quickly, efficiently and without stalling.

Transcript

  1. Delivering Video to the Web Quickly, Beautifully, and without stalls

    Doug Sillars London Webperf August 7, 2018 @DougSillars
  2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars https://www.slideshare.net/dougsillars/ Freelance Developer

    Relations Performance Audits: Web/Native Workshops: Performance/Images/Video
  3. Video Consumption is Growing https://www.recode.net/2017/6/8/15757594/future-internet-traffic-watch-live-video-facebook-google-netflix

  4. Video Consumption is Growing HTTPArchive: Sites with Video 15/6 crawls:

    2017, & 2018 (out of 500k sites)
  5. Video Quality Metrics 1.Does the Video Start? 2.Does the Video

    Stall? 3.Does it Look Good?
  6. 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!
  7. 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
  8. Video Fails To Start

  9. Video Startup Failure

  10. 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
  11. 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
  12. 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

  13. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video

    7/15/2018 Mobile: 36,485 Desktop: 55,048
  14. Sites with Video: Mobile V. Desktop HTTPArchive: Sites with Video

    7/15/2018 36,485 55,048 30,442
  15. 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 41,223 videos are IDENTICAL on desktop and mobile 19% of all videos on mobile 21,086 sites use identical video 57.8% of mobile sites
  16. Video Quality Metrics 1.Does the Video Start? 2.Does the Video

    Stall? 3.Does it Look Good? 41,223 videos are IDENTICAL on desktop and mobile 19% of all videos on mobile
  17. Image Optimization Image Quality (85% or SSIM) Image Format Responsive

    Image
  18. 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
  19. Image Optimization HTTPArchive 15/06/2018

  20. Video Optimization? HTTPArchive 15/06/2018

  21. Video Optimization?

  22. Video

  23. 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
  24. Video Compression over Time • P-Frames

  25. Video Compression over Time • B-Frames

  26. Video Compression over Time • P & B Frame vectors

  27. Animated GIFs Original MP4 1.4 MB

  28. Animated GIFs Animated GIF 3.8 MB 270% larger

  29. Animated GIFs No GOP Compression

  30. Animated GIFs: as Video? MP4: 256 colors 247KB 93% smaller

  31. Animated GIFs: as Video! 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/
  32. Video Stats: File Extensions

  33. Video: Different Size Screens • (at least) 19% of all

    videos are identical on mobile and desktop
  34. 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
  35. 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
  36. 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)
  37. Video: Don’t Download More on Mobile Desktop Mobile

  38. Video: Don’t Download More on Mobile Desktop Mobile @media only

    screen and (min-width:1024px) Don’t Download Video That Is Not Displayed
  39. Video Preload = “auto” Only use with high probability video

    views!
  40. Video Preload • preload = “metadata” • Only downloads first

    x% of the video
  41. Video Preload • preload = “metadata” • Only downloads first

    x% of the video
  42. Video Preload • preload = “metadata” • Only downloads first

    x% of the video
  43. Video Preload • preload = “metadata” 150s 1920x1080 Full Length:

    97MB Use with discretion. Mind your customer’s data plans.
  44. Video: Preload • preload = “auto||metadata” Best Practices: • Auto:

    Avoid unless high probability of play • Metadata: medium probability of play – YMMV
  45. Video Background

  46. Video Background 5.3 MB 15s 1280 x 720

  47. Video Background ffprobe -v error -show_format steven.mp4 [FORMAT] filename=steven.mp4 nb_streams=2

    nb_programs=0 format_name=mov,mp4,m4a,3gp,3g2,mj2 format_long_name=QuickTime / MOV start_time=0.000000 duration=15.216000 size=5254114 bit_rate=2762415 probe_score=100 TAG:major_brand=isom TAG:minor_version=512 TAG:compatible_brands=isomiso2avc1mp41 TAG:encoder=Lavf56.40.101 [/FORMAT]
  48. Video Background ffprobe -v error -show_streams steven.mp4 [STREAM] index=0 codec_name=h264

    codec_long_name=H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10 profile=High codec_type=video codec_time_base=1001/60000 codec_tag_string=avc1 codec_tag=0x31637661 width=1280 height=720 ... [/STREAM] [STREAM] index=1 codec_name=aac codec_long_name=AAC (Advanced Audio Coding) profile=LC codec_type=audio codec_time_base=1/44100 codec_tag_string=mp4a codec_tag=0x6134706d sample_fmt=fltp sample_rate=44100
  49. 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.
  50. Video Background: Mobile Best Practice: If Viewport will not support

    Video… Don’t Download it
  51. Video Background

  52. Video Background 33.6 MB 27s 2560 x 1226 10 MBPS

  53. Video Background Best Practice: Resize Video to reasonable size. 33.6

    MB 27s 2560 x 1226 10 MBPS
  54. Video Background Best Practice: Resize Video to reasonable size. PROTIP:

    Renaming the file is not enough…
  55. 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
  56. Video Background: Mobile

  57. Video Background 33.6 MB 27s 2560 x 1226 10 MBPS

  58. Video Background Best Practice: Don’t Duplicate Video Loops in the

    Video! 33.6 MB 27s 2560 x 1226 10 MBPS
  59. Mobile Background 30 MB 42s 1920x1080 Same Video as Desktop

  60. 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. Respect your Mobile Users’ data plans.
  61. Video Streaming

  62. 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
  63. Video Plays Optimizing Video Delivery Video Streaming Player can estimate

    network throughput Optimal video Bitrate HTTPArchive Mobile: 1.6 MBPS Desktop 5 MBPS
  64. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks Video Tracks (iFrames)

    Audio Tracks & Subtitles
  65. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks

  66. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8

  67. 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
  68. Video Streaming: Initial Video Bitrate HTTPArchive: Sites with Video 7/15/2018

  69. Video Streaming: Video Bitrate HTTPArchive: Sites with Video 7/15/2018

  70. Video Streaming: Video Bitrate HTTPArchive: Sites with Video 7/15/2018

  71. Video Streaming: Video Bitrate HTTPArchive: Sites with Video 7/15/2018

  72. 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
  73. 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
  74. 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
  75. 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

  76. Video Streaming: Startup Time Low -> High High => Low

    Middle (Goldilocks)
  77. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s

    4k Low->High: 4K Middle (Goldilocks): 4k:High->Low:
  78. 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
  79. 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
  80. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G

  81. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8

  82. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8

  83. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G

  84. Video Streaming: Manifest File 600k.m3u8

  85. Video Streaming: Manifest File 600k.m3u8

  86. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8

  87. The Spengler

  88. Crossing the Streams

  89. Crossing the Streams: Desktop (5MBPS)

  90. Crossing the Streams Best Practice: Streaming 2 videos at once

    lowers the quality of both. Stream just one video at a time for best quality!
  91. Summary •Video files are big!

  92. Best Practices 1. Resize Videos Appropriately for screen: 1. Quality

    2. Bitrate 3. Dimensions/DPR Respect your Mobile Users’ data plans!
  93. 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!
  94. Best Practices 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. 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 Respect your Mobile Users’ data plans!
  95. Thank You Respect your Mobile Users’ data plans!

  96. Video Stats: Top Mobile Domains (over 1k served)

  97. Video Streaming: Video Size HTTPArchive: Sites with Video 7/15/2018

  98. Video Streaming: Video Size HTTPArchive: Sites with Video 7/15/2018