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
   

   View Slide

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
   

   View Slide

3. Video Consumption is Growing
   https://www.recode.net/2017/6/8/15757594/future-internet-traffic-watch-live-video-facebook-google-netflix
   

   View Slide

4. Video Consumption is Growing
   HTTPArchive: Sites with Video 15/6 crawls: 2017, & 2018 (out of 500k sites)
   

   View Slide

5. Video Quality Metrics
   1.Does the Video Start?
   2.Does the Video Stall?
   3.Does it Look Good?
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

8. Video Fails To Start
   

   View Slide

9. Video Startup Failure
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

17. Image Optimization
    Image Quality
    (85% or SSIM)
    Image Format
    Responsive Image
    

    View Slide

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
    

    View Slide

19. Image Optimization
    HTTPArchive 15/06/2018
    

    View Slide

20. Video Optimization?
    HTTPArchive 15/06/2018
    

    View Slide

21. Video Optimization?
    

    View Slide

22. Video
    

    View Slide

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
    

    View Slide

24. Video Compression over Time
    • P-Frames
    

    View Slide

25. Video Compression over Time
    • B-Frames
    

    View Slide

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

    View Slide

27. Animated GIFs
    Original MP4
    1.4 MB
    

    View Slide

28. Animated GIFs
    Animated GIF
    3.8 MB
    270% larger
    

    View Slide

29. Animated GIFs
    No GOP Compression
    

    View Slide

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

    View Slide

31. Animated GIFs: as Video!
    Video Tags:
    
    Video is not pre-loaded, will be last to download
    Img tags are fast!
    
    
    
    
    
    https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
    

    View Slide

32. Video Stats: File Extensions
    

    View Slide

33. Video: Different Size Screens
    • (at least) 19% of all videos are identical on mobile and desktop
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

37. Video: Don’t Download More on Mobile
    Desktop Mobile
    

    View Slide

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
    

    View Slide

39. Video
    Preload = “auto”
    Only use with high probability video views!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Video Preload
    • preload = “metadata”
    150s
    1920x1080
    Full Length: 97MB
    Use with discretion. Mind your
    customer’s data plans.
    

    View Slide

44. Video: Preload
    • preload = “auto||metadata”
    Best Practices:
    • Auto: Avoid unless high probability of play
    • Metadata: medium probability of play – YMMV
    

    View Slide

45. Video Background
    

    View Slide

46. Video Background
    5.3 MB
    15s
    1280 x 720
    

    View Slide

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]
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

50. Video Background: Mobile
    Best Practice:
    If Viewport will not support Video…
    Don’t Download it
    

    View Slide

51. Video Background
    

    View Slide

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

    View Slide

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

    View Slide

54. Video Background
    Best Practice:
    Resize Video to reasonable size.
    PROTIP: Renaming the file is not enough…
    

    View Slide

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
    

    View Slide

56. Video Background: Mobile
    

    View Slide

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

    View Slide

58. Video Background
    Best Practice:
    Don’t Duplicate Video Loops in the Video!
    33.6 MB
    27s
    2560 x 1226
    10 MBPS
    

    View Slide

59. Mobile Background
    30 MB
    42s
    1920x1080
    Same Video as
    Desktop
    

    View Slide

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.
    

    View Slide

61. Video Streaming
    

    View Slide

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
    

    View Slide

63. Video Plays
    Optimizing Video Delivery
    Video Streaming
    Player can estimate
    network throughput Optimal video Bitrate
    HTTPArchive
    Mobile: 1.6 MBPS
    Desktop 5 MBPS
    

    View Slide

64. Video Streaming: Manifest File
    https://hls.ted.com/talks/2208.m3u8
    Video Tracks
    Video Tracks (iFrames)
    Audio Tracks &
    Subtitles
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

76. Video Streaming: Startup Time
    Low -> High
    High => Low
    Middle (Goldilocks)
    

    View Slide

77. Video Startup
    10s 11s 12s 13s 14s 15s 16s 17s
    4k Low->High:
    4K Middle
    (Goldilocks):
    4k:High->Low:
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. Video Streaming: Manifest File
    600k.m3u8
    

    View Slide

85. Video Streaming: Manifest File
    600k.m3u8
    

    View Slide

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

    View Slide

87. The Spengler
    

    View Slide

88. Crossing the Streams
    

    View Slide

89. Crossing the Streams: Desktop (5MBPS)
    

    View Slide

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!
    

    View Slide

91. Summary
    •Video files are big!
    

    View Slide

92. Best Practices
    1. Resize Videos Appropriately for screen:
    1. Quality
    2. Bitrate
    3. Dimensions/DPR
    Respect your Mobile Users’ data plans!
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

95. Thank You
    Respect your Mobile Users’ data plans!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide