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:
https://www.oreilly.com/library/view/velocity-conference-santa/9781491900383/oreillyvideos2068560.html

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

Alex Nicksay

June 26, 2014
Tweet

More Decks by Alex Nicksay

Other Decks in Programming

Transcript

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

    any server-side language + templates. Or, send data and use client-side templates. Flexibility
  2. <html> <head> <!-- Styles --> </head> <body> <div id="masthead">…</div> <div

    id="content"> <!-- Content --> </div> <div id="footer">…</div> <!-- Scripts --> </body> </html> StaticResponse.html Response
  3. { ! "head": "<!-- Styles -->", ! ! "body": {

    "content": "<!-- Content -->", }, ! "foot": "<!-- Scripts -->" ! } DynamicResponse.spf.json Response
  4. DynamicResponse.spf.json { ! "head": "<!-- Styles -->", ! ! "body":

    { "content": "<!-- Content -->", }, ! "foot": "<!-- Scripts -->" ! } <html> <head> <!-- Styles --> </head> <body> <div id="masthead">…</div> <div id="content"> <!-- Content --> </div> <div id="footer">…</div> <!-- Scripts --> </body> </html> StaticResponse.html Response
  5. data: YouTube real user monitoring * data for playbacks without

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

    ads Composite HTML5 Flash Time to Playback Desktop Median
  7. data: YouTube real user monitoring No Persistence Users Reported Site

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

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

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

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

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

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

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

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

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

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

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

    * data for playbacks without ads Dynamic Navigation Persistent Player Default HTML5 40% faster
  19. 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
  20. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median Search Results ~22.5% Improvement
  21. SPF

  22. logData 0 navigate http://www.youtube.com/ logData 1 /* click a link

    to a video */ WPT Script SPF Transition <a class="spf-link" href="/watch?v=dQw4w9WgXcQ">Go!</a>
  23. logData 0 navigate http://www.youtube.com/ logData 1 execAndWait WPT Script SPF

    Transition <a class="spf-link" href="/watch?v=dQw4w9WgXcQ">Go!</a>
  24. 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 <a class="spf-link" href="/watch?v=dQw4w9WgXcQ">Go!</a>
  25. 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 <a class="spf-link" href="/watch?v=dQw4w9WgXcQ">Go!</a>
  26. 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
  27. 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
  28. Chrome Firefox DSL Cable Watch Home Search IE Dial-up MISSION

    ACCOMPLISHED:
 Testing dynamic navigations
  29. 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