Presented Feb 5, 2019

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

18. Video Startup Failure

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

21. 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

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

28. Image Optimization
HTTPArchive 15/06/2018

29. Video Optimization?
HTTPArchive 15/06/2018

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

37. Animated GIFs
Original MP4
1.4 MB

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

67. Video Background: Mobile

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

97. Crossing the Streams

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

100. Third Parties: Facebook
HTTPArchive

101. Third Parties: Facebook

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