Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making YouTube Fast (Velocity 2014)

Making YouTube Fast (Velocity 2014)

Each month on YouTube, almost an hour of video is watched for every person on Earth. This scale presents some unique challenges, but we’re also working on many of the same problems that most developers face. Getting all that video to viewers as soon as possible is especially important to us, so we’ve taken on an initiative to make YouTube fast.

In this talk, we’re going to present some of the projects we’ve been working on to speed up your viewing experience. In particular, we’ll introduce SPF (spfjs), a new HTML5 JS framework that now forms the foundation of YouTube navigation, and discuss the challenges of integrating that with an aggressive, bandwidth-hungry HTML5 video player.

Topics will include how we use and test the framework to implement dynamic page loads, persistent video players, partial page updates, and dynamic page and resource prefetching, while maintaining fast server-side content rendering at scale. We will discuss both the quantitative and qualitative improvements to the YouTube viewing experience and how you can achieve them.

Alex Nicksay @webdevjesus
Rick Viscomi @rick_viscomi
Steven Robertson @_srobertson

Presented at Velocity 2014 — June 26, 2014:
http://velocityconf.com/velocity2014/public/schedule/detail/34142

Learn more about SPF:
http://youtube.github.io/spfjs/

Alex Nicksay

June 26, 2014
Tweet

More Decks by Alex Nicksay

Other Decks in Programming

Transcript

  1. +StevenRobertson
    @_srobertson
    Making YouTube Fast
    +AlexNicksay
    @webdevjesus
    +RickViscomi
    @rick_viscomi

    View Slide

  2. +AlexNicksay
    @webdevjesus
    Faster Navigation at YouTube
    with SPF

    View Slide

  3. data: http://www.youtube.com/yt/press/
    image: http://commons.wikimedia.org/wiki/File:Earth_Western_Hemisphere.jpg
    !
    Over 6 billion hours of video
    are watched each month on
    YouTube.

    View Slide

  4. image:
    !
    That’s almost one hour for
    every person on Earth.
    !

    View Slide

  5. !
    We want to get that video to
    you as fast as possible.
    !

    View Slide

  6. click play
    Last Year
    This Year
    Time to Playback
    Desktop

    View Slide

  7. click
    Last Year
    This Year
    Time to Playback
    play
    Desktop

    View Slide

  8. click
    Last Year
    This Year
    Time to Playback
    play
    Desktop
    40% faster

    View Slide

  9. Where did we start?
    !
    !

    View Slide

  10. Where did we start?
    !
    Real User Monitoring
    + Analysis

    View Slide

  11. click play
    Critical Stages of Playback

    View Slide

  12. fetch info init player load video
    click
    Critical Stages of Playback
    Desktop Last Year
    play

    View Slide

  13. Critical Stages of Playback
    init player

    View Slide

  14. What if we reused the same player?
    Critical Stages of Playback
    init player

    View Slide

  15. Critical Stages of Playback
    fetch info init player load video
    click play
    Desktop Last Year

    View Slide

  16. Critical Stages of Playback
    fetch info init player load video
    click play
    Desktop This Year

    View Slide

  17. Persistent = Less Work
    !
    Less Work = Faster

    View Slide

  18. How did we do it?
    !
    !

    View Slide

  19. How did we do it?
    !
    A new JS framework for
    page navigation.

    View Slide

  20. Structured
    Page
    Fragments

    View Slide

  21. SPF
    !
    !

    View Slide

  22. SPF is a lightweight
    framework for navigation
    and page updates.

    View Slide

  23. Initial: Static Loading

    View Slide

  24. Subsequent: Dynamic Loading
    with SPF

    View Slide

  25. What do we gain?
    !
    !

    View Slide

  26. Static
    fast first render
    existing performance
    Benefits

    View Slide

  27. SPF
    Static Dynamic
    fast first render persistent interface
    existing performance same rendering code
    Benefits

    View Slide

  28. What do we gain?
    !
    Better User Experience

    View Slide

  29. What do we gain?
    !

    View Slide

  30. What do we gain?
    !

    View Slide

  31. And development?
    !
    !

    View Slide

  32. Use the same code for
    static + dynamic.
    Productivity

    View Slide

  33. Use the same code for
    static + dynamic.
    Productivity
    Use any server-side
    language + templates.
    Or, send data and use
    client-side templates.
    Flexibility

    View Slide

  34. How do we implement?
    !
    !

    View Slide

  35. Go!
    Standard Link
    Request

    View Slide

  36. Go!
    SPF Link
    Request

    View Slide

  37. Go!
    Standard Link
    Go!
    SPF Link
    Progressive
    Enhancement
    Request
    class=“spf-link”

    View Slide














  38. StaticResponse.html
    Response

    View Slide

  39. {
    !
    "head": "",
    !
    !
    "body": {
    "content":
    "",
    },
    !
    "foot": ""
    !
    }
    DynamicResponse.spf.json
    Response

    View Slide

  40. DynamicResponse.spf.json
    {
    !
    "head": "",
    !
    !
    "body": {
    "content":
    "",
    },
    !
    "foot": ""
    !
    }













    StaticResponse.html
    Response

    View Slide

  41. But wait, there’s more…
    !
    !

    View Slide

  42. Optional Features
    Custom Caching
    Reuse Responses
    Conditionally

    View Slide

  43. Custom Caching
    Prefetching
    Get Responses
    Before Requests
    Optional Features

    View Slide

  44. Custom Caching
    Multipart Responses
    Prefetching
    On-the-Fly
    Processing
    Optional Features

    View Slide

  45. Just how fast is it?
    !
    !

    View Slide

  46. data: YouTube real user monitoring * data for playbacks without ads
    2013-08-14 2014-05-14
    Time to Playback
    Desktop Median

    View Slide

  47. data: YouTube real user monitoring * data for playbacks without ads
    Composite
    HTML5
    Flash
    Time to Playback
    Desktop Median

    View Slide

  48. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  49. data: YouTube real user monitoring
    No Persistence
    Users Reported Site Felt Faster
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  50. data: YouTube real user monitoring
    Video Pages: Chrome Only
    ~8.5% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  51. data: YouTube real user monitoring
    Video Pages: All Browsers
    ~9.0% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  52. data: YouTube real user monitoring
    On-the-Fly over HTTP
    ~5.0% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  53. data: YouTube real user monitoring
    Default HTML5: No Ads
    ~8.0% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  54. data: YouTube real user monitoring
    All Major Pages
    ~7.5% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  55. data: YouTube real user monitoring
    Default HTML5: Ads
    ~2.0% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  56. data: YouTube real user monitoring
    On-the-Fly over SPDY
    ~4.5% Improvement
    Time to Playback
    Desktop Median
    * data for playbacks without ads

    View Slide

  57. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads
    40% faster

    View Slide

  58. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads
    Dynamic Navigation
    40% faster

    View Slide

  59. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads
    Dynamic Navigation Persistent Player
    40% faster

    View Slide

  60. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads
    Dynamic Navigation Persistent Player
    Default HTML5
    40% faster

    View Slide

  61. data: YouTube real user monitoring
    Time to Playback
    Desktop Median
    * data for playbacks without ads
    Dynamic Navigation Persistent Player
    Default HTML5 On-the-Fly
    40% faster

    View Slide

  62. What about “regular” pages?
    !
    !

    View Slide

  63. data: YouTube real user monitoring
    2013-08-14 2014-05-14
    Time to Load Search Results
    Desktop Median

    View Slide

  64. data: YouTube real user monitoring
    Results
    Time to Load Search Results
    Desktop Median

    View Slide

  65. data: YouTube real user monitoring
    Time to Load Search Results
    Desktop Median

    View Slide

  66. data: YouTube real user monitoring
    Time to Load Search Results
    Desktop Median
    Video Pages Only

    View Slide

  67. data: YouTube real user monitoring
    Time to Load Search Results
    Desktop Median
    All Major Pages

    View Slide

  68. data: YouTube real user monitoring
    Time to Load Search Results
    Desktop Median
    Search Results
    ~22.5% Improvement

    View Slide

  69. data: YouTube real user monitoring
    Time to Load Search Results
    Desktop Median
    22.5% faster

    View Slide

  70. What’s next?

    View Slide

  71. What’s next?
    Get the code
    github.com/youtube/spfjs

    View Slide

  72. +AlexNicksay
    @webdevjesus
    Thank you!
    #webperf #spfjs
    Get the code
    github.com/youtube/spfjs

    View Slide

  73. Web Performance Testing

    at YouTube
    +RickViscomi
    @rick_viscomi

    View Slide

  74. SPF

    View Slide

  75. View Slide

  76. !
    Only captures static
    navigation

    View Slide

  77. View Slide

  78. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  79. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  80. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  81. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  82. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  83. The cache is warm,

    but it’s still static navigation

    View Slide

  84. logData 0
    navigate http://www.youtube.com/
    logData 1
    navigate http://www.youtube.com/watch?v=ussCHoQttyQ
    WPT Script
    Flow View

    View Slide

  85. WPT Script
    SPF Transition

    View Slide

  86. logData 0
    navigate http://www.youtube.com/
    logData 1
    WPT Script
    SPF Transition

    View Slide

  87. logData 0
    navigate http://www.youtube.com/
    logData 1
    /* click a link to a video */
    WPT Script
    SPF Transition
    Go!

    View Slide

  88. logData 0
    navigate http://www.youtube.com/
    logData 1
    execAndWait
    WPT Script
    SPF Transition
    Go!

    View Slide

  89. logData 0
    navigate http://www.youtube.com/
    logData 1
    execAndWait (function(){ var a =
    document.querySelector(“a[href^=‘/watch?v']");
    a.click(); })()
    WPT Script
    SPF Transition
    Go!

    View Slide

  90. View Slide

  91. logData 0
    navigate http://www.youtube.com/
    logData 1
    execAndWait (function(){ var a =
    document.querySelector(“a[href^=‘/watch?v’]");
    a.href = “/watch?v=ussCHoQttyQ"; a.click(); })()
    WPT Script
    SPF Transition
    Go!

    View Slide

  92. http://www.webpagetest.org/result/140624_18_5Q5/

    View Slide

  93. http://www.webpagetest.org/result/140624_18_5Q5/
    MISSION ACCOMPLISHED:

    Instrumenting dynamic
    navigations

    View Slide

  94. logData 0
    navigate http://www.youtube.com/
    logData 1
    execAndWait (function(){ var a =
    document.querySelector(“a[href^=‘/watch?v’]");
    a.href = “/watch?v=ussCHoQttyQ"; a.click(); })()
    WPT Script
    SPF Transition

    View Slide

  95. logData 0
    navigate {starting page}
    logData 1
    execAndWait (function(){ var a =
    document.querySelector(“a[href^=‘{ending page}’]”);
    a.href = “/watch?v={video ID}“; a.click(); })()
    WPT Script
    SPF Transition

    View Slide

  96. SPF
    No SPF No Ads
    Timecoded
    Watch
    Home
    Search
    Ads

    View Slide

  97. No SPF
    SPF
    No Ads
    Timecoded
    Watch
    Home
    Search
    Ads

    View Slide

  98. Chrome
    Firefox DSL
    Cable
    Watch
    Home
    Search
    IE
    Dial-up
    MISSION ACCOMPLISHED:

    Testing dynamic navigations

    View Slide

  99. Document
    Complete
    First Paint
    DOM Loaded
    On Load

    View Slide

  100. Video Content

    View Slide

  101. Playback Start

    View Slide

  102. performance.mark('aft');
    main.js
    Application-Specific Metrics

    View Slide

  103. View Slide

  104. v=2&s=youtube&action=watch,watch7_html5&yt_nav=1&yt_pft=none&
    docid=ussCHoQttyQ&ei=6Q2pU72mMuiI0QHcm4GgDQ&cpn=l2khPNrU
    oSFcVuQs&fmt=243&tds=4&cmt=0.067&yt_pt=html5&yt_lt=warm&e=9
    10133,927625,930008,934030,949401&yt_ref=&yt_spf=1&yt_ad=0&yt_
    pl=0&yt_li=0&srt=98&rt=nc0.1,nc1.56,cfg.56,gv.97,nc2.348,je.412,jl.
    413,ol.426,tdl.723,fvb.999,plev.1370,vfp.1375,l2s.1378,pbs.1412,arr.
    623,vrr.626,msa.667,vda.1278,vri.671,vdns.887,vreq.924,vrc.1274,ari.
    668,adns.887,areq.924,fab.983,arc.1258,aft.1412&it=st.89,req.97,dns_.
    27,tcp_.35,req_.72,rcv_.332

    View Slide

  105. Playback Start
    http://www.webpagetest.org/google/view_csi.php?test=140624_18_5Q5

    View Slide

  106. Playback Start
    http://www.webpagetest.org/google/view_csi.php?test=140624_18_5Q5
    MISSION ACCOMPLISHED:

    Analyzing dynamic
    navigations

    View Slide

  107. Buy the book
    bit.ly/usingwebpagetest

    View Slide

  108. Thank you!
    Buy the book
    bit.ly/usingwebpagetest
    +RickViscomi
    @rick_viscomi

    View Slide

  109. Delivering Media for
    Interactive Applications
    +StevenRobertson
    @_srobertson

    View Slide

  110. Pick one.

    View Slide

  111. chrome://tracing
    chrome://net-internals

    View Slide

  112. OH RIGHT TRACING

    View Slide

  113. View Slide

  114. TCP is affecting
    your app’s performance.

    View Slide

  115. Parallelize loading of
    small resources.

    View Slide

  116. … how about big ones?

    View Slide

  117. TCP slow start.

    View Slide

  118. View Slide

  119. Exponential growth

    View Slide

  120. First packet loss

    View Slide

  121. Linear growth

    View Slide

  122. DOUBLE THE WOW

    View Slide

  123. View Slide

  124. In the long run,
    parallelized loading
    can increase throughput…

    View Slide

  125. … at the cost of variability.

    View Slide

  126. Wireshark whenever you can.

    View Slide

  127. View Slide

  128. Wireshark whenever you can.

    View Slide

  129. Which is basically never.

    View Slide

  130. You can get pretty far
    with progress events.

    View Slide

  131. Which is basically never.

    View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. Sometimes, things just suck.

    View Slide

  136. View Slide

  137. View Slide

  138. So we turned it off.

    View Slide

  139. Rebuffer stats got
    way worse (of course).

    View Slide

  140. Watch-time was neutral.

    View Slide

  141. One of the most divisive
    experiments we’ve run.

    View Slide

  142. View Slide

  143. We cheated.

    View Slide

  144. Give users a way to show you
    how you could have done better.

    View Slide

  145. View Slide

  146. Thank you!
    #end144p
    Check out the website
    youtube.com
    +StevenRobertson
    @_srobertson

    View Slide

  147. Thank you!
    #webperf #spfjs #end144p
    Buy the book
    bit.ly/usingwebpagetest
    +StevenRobertson
    @_srobertson
    +AlexNicksay
    @webdevjesus
    Get the SPF code
    github.com/youtube/spfjs
    Check out the website
    youtube.com
    +RickViscomi
    @rick_viscomi

    View Slide