Video performance snowcamp
- 1. Delivering Video to the Web
Quickly, Beautifully, and without stalls
Doug Sillars
SnowCamp
January 25, 2019
@DougSillars
- 3. Video Consumption is Growing
https://www.recode.net/2017/6/8/15757594/future-internet-traffic-watch-live-video-facebook-google-netflix
- 4. Study of the Web
https://Webpagetest.org https://httparchive.org
- 7. Video Consumption is Growing
HTTPArchive: Sites with Video 15/6 crawls: 2017, & 2018 (out of 500k sites)
- 13. 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!
- 14. 14
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
- 19. 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. Sites with Video: Mobile V. Desktop
HTTPArchive: Sites with Video 7/15/2018
Mobile:
36,485
Desktop:
55,048
- 22. Sites with Video: Mobile V. Desktop
HTTPArchive: Sites with Video 7/15/2018
36,485 55,048
30,442
- 23. 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
- 24. 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
- 26. 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
- 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
- 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
- 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/
- 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)
- 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
- 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
- 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.
- 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
- 70. Video Is Not Cheap
After 20 free videos
Each Video Download costs:
- 73. 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.
- 77. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Video Tracks
Video Tracks (iFrames)
Audio Tracks &
Subtitles
- 80. 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
- 81. 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
- 85. 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
- 86. 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
- 100. Best Practices
1. Resize Videos Appropriately for screen:
1. Quality
2. Bitrate
3. Dimensions/DPR
Respect your Mobile Users’ data plans!
- 101. 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!
- 102. 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!
- 103. 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/
Editor's Notes
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com