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

Slide 1

Slide 1 text

Delivering Video to the Web Quickly, Beautifully, and without stalls Doug Sillars London Webperf August 7, 2018 @DougSillars

Slide 2

Slide 2 text

Contact Me: @DougSillars [email protected] www.dougsillars.com Doug Sillars https://www.slideshare.net/dougsillars/ Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Video Fails To Start

Slide 9

Slide 9 text

Video Startup Failure

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Image Optimization HTTPArchive 15/06/2018

Slide 20

Slide 20 text

Video Optimization? HTTPArchive 15/06/2018

Slide 21

Slide 21 text

Video Optimization?

Slide 22

Slide 22 text

Video

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Video Compression over Time • P-Frames

Slide 25

Slide 25 text

Video Compression over Time • B-Frames

Slide 26

Slide 26 text

Video Compression over Time • P & B Frame vectors

Slide 27

Slide 27 text

Animated GIFs Original MP4 1.4 MB

Slide 28

Slide 28 text

Animated GIFs Animated GIF 3.8 MB 270% larger

Slide 29

Slide 29 text

Animated GIFs No GOP Compression

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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/

Slide 32

Slide 32 text

Video Stats: File Extensions

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

Video: Don’t Download More on Mobile Desktop Mobile

Slide 38

Slide 38 text

Video: Don’t Download More on Mobile Desktop Mobile @media only screen and (min-width:1024px) Don’t Download Video That Is Not Displayed

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Video Background

Slide 46

Slide 46 text

Video Background 5.3 MB 15s 1280 x 720

Slide 47

Slide 47 text

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]

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Video Background

Slide 52

Slide 52 text

Video Background 33.6 MB 27s 2560 x 1226 10 MBPS

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Video Background: Mobile

Slide 57

Slide 57 text

Video Background 33.6 MB 27s 2560 x 1226 10 MBPS

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

Video Streaming

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Video Streaming: Manifest File 600k.m3u8

Slide 85

Slide 85 text

Video Streaming: Manifest File 600k.m3u8

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

The Spengler

Slide 88

Slide 88 text

Crossing the Streams

Slide 89

Slide 89 text

Crossing the Streams: Desktop (5MBPS)

Slide 90

Slide 90 text

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!

Slide 91

Slide 91 text

Summary •Video files are big!

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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!

Slide 94

Slide 94 text

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!