This document provides best practices for optimizing video delivery and streaming on the web. It discusses how video files are large and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens, avoiding downloading hidden or unnecessary videos, using video streaming with a low starting bitrate for faster startup times, stripping audio from silent videos, and auditing third party video hosts for performance issues. The document emphasizes optimizing video delivery to respect mobile users' limited data plans.

1. Stream, You Stream – How to Make Video
Stream
Doug Sillars
JS Zagreb
February 11, 2020
@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/AR/ML
http://bit.ly/HighPerformanceAndroidApps

3. Video Killed My Data Plan

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

5. Video Use on the Web
HTTPArchive

6. Video Use on the Web
HTTPArchive

7. Video Use on the Web
HTTPArchive

8. Video Use on the Web
HTTPArchive

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

10. 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!

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

12. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q3 2018: Video Startup

13. Video Fails To Start

14. Video Startup Failure

15. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q3 2018: Video Startup
Mobile: 3.47s startup time
Desktop: 6.29s startup time

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

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

18. Sites with Video: Mobile V. Desktop
HTTPArchive: Sites with Video 7/15/2018
30,442
83% of mobile
19% of videos are IDENTICAL on desktop and
mobile

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

20. Image Optimization
HTTPArchive 15/06/2018

21. Video Optimization?
HTTPArchive 15/06/2018

22. Video Stats: File Extensions

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

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

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

26. 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)

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

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

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

30. Video
Preload = “auto”
https://de.cars.mclaren.com/

31. Video
<link as="video" rel="preload" href="https://cdn.ovoenergy.com/websites-
prd/video_2019_03.mp4" media="(min-width: 767px)"/>

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

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

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

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

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

37. Background Video

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

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

40. Background Video

41. Video Background

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

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

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

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

46. Video Background: Mobile

47. Video Is Not Cheap

48. Video Is Not Cheap

49. Video Is Not Cheap

50. Video Is Not Cheap

51. Video Is Not Cheap
After 20 free videos
Each Video Download costs:

52. Video Is Not Cheap

53. Video Is Not Cheap

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

55. The Solution: Streaming Video

56. Third Party Streaming
No initial Video Download, but expect 700KB -1MB
additional JavaScript on page load

57. Third Parties

58. Video Streaming

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

60. Video Plays
Optimizing Video Delivery
Video Streaming
Player can estimate
network throughput
Optimal video Bitrate

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

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

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

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

65. Video Players
By default: Focused on bandwidth, not video size:

66. Video Players
By default: Focused on bandwidth, not video size:

67. Video Players
By default: Focused on bandwidth, not video size:

68. Video Players
By default: Focused on bandwidth, not video size:

69. Video Players
Responsive attributes are off by default, and rarely used:
Tip: Use the responsive attributes in
your video player to save data!

70. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q3 2018: Video Startup
Mobile: 3.47s startup time
Desktop: 6.29s startup time

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

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

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

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

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

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

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

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

79. Video Streaming: Manifest File
600k.m3u8

80. Video Streaming: Manifest File
600k.m3u8

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

82. The Spengler

83. Crossing the Streams

84. Crossing the Streams
24 simultaneous streams @ 400-600 KBPS!!
245 MB of data in < 4 minutes.

85. Third Parties: Facebook
HTTPArchive

86. Third Parties: Facebook

87. Summary
•Video files are big!

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

89. 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!

90. 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. Video Streaming Players not Responsive by default
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.
Best Practices
Respect your Mobile Users’ data plans!

91. 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/