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

Faster Navigation at YouTube with SPF (October ...

Alex Nicksay
October 06, 2014
Programming
0
440

Faster Navigation at YouTube with SPF (October 2014)

YouTube videos are playing 40% faster than last year.  We’ve introduced SPF (spfjs), a new HTML5 JS framework that now forms the foundation of YouTube navigation and enables our performance improvements.

In this talk, we'll discuss how we use SPF to implement a broad range of performance-improving features — including dynamic page loading, persistent video players, partial page updates, reduced resource execution, custom caching, dynamic page and resource prefetching, and on-the-fly processing of responses — while maintaining fast server-side content rendering at scale. You’ll see how you can seamlessly integrate these features into your site with progressive enhancement and the help of built-in versioning support.

Alex Nicksay @webdevjesus
David Phillips @TheDaveWhoCodes

Presented at eBay — October 6, 2014

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

Alex Nicksay

October 06, 2014
Tweet

More Decks by Alex Nicksay

See All by Alex Nicksay
Making YouTube Fast (Velocity 2014)
nicksay
4
280
Front-end Performance Improvements at YouTube (Velocity China 2010)
nicksay
0
130

Other Decks in Programming

See All in Programming
RubyLSPのマルチバイト文字対応
notfounds
0
120
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
120
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
260
Functional Event Sourcing using Sekiban
tomohisa
0
110
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
140
Contemporary Test Cases
maaretp
0
140
Jakarta EE meets AI
ivargrimstad
0
370
距離関数を極める！ / SESSIONS 2024
gam0022
0
310
Quine, Polyglot, 良いコード
qnighy
4
650
CSC509 Lecture 12
javiergs
PRO
0
160
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
360
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
220

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
Writing Fast Ruby
sferik
627
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Into the Great Unknown - MozCon
thekraken
32
1.5k
It's Worth the Effort
3n
183
27k
Thoughts on Productivity
jonyablonski
67
4.3k
Designing Experiences People Love
moore
138
23k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
327
38k

Transcript

  1. Faster Navigation at YouTube with SPF Alex Nicksay @webdevjesus David

    Phillips @TheDaveWhoCodes

  2. Introducing SPF at YouTube +AlexNicksay @webdevjesus

  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.

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

    Earth. !

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

    fast as possible. !

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

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

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

    40% faster

  9. Where did we start? ! !

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

  11. click play Critical Stages of Playback

  12. fetch info init player load video click Critical Stages of

    Playback Desktop Last Year play

  13. Critical Stages of Playback init player

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

    Playback init player

  15. Critical Stages of Playback fetch info init player load video

    click play Desktop Last Year

  16. Critical Stages of Playback fetch info init player load video

    click play Desktop This Year

  17. Persistent = Less Work ! Less Work = Faster

  18. How did we do it? ! !

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

    for page navigation.

  20. Structured Page Fragments

  21. SPF ! !

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

  23. Initial: Static Loading

  24. Subsequent: Dynamic Loading with SPF

  25. What do we gain? ! !

  26. Static fast first render existing performance Benefits

  27. SPF Static Dynamic fast first render persistent interface existing performance

    same rendering code Benefits

  28. What do we gain? ! Better User Experience

  29. What do we gain? !

  30. What do we gain? !

  31. And development? ! !

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

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

    any server-side language + templates. Or, send data and use client-side templates. Flexibility

  34. How do we implement? ! !

  35. <a href="/destination">Go!</a> Standard Link Request

  36. <a class="spf-link" href="/destination">Go!</a> SPF Link Request

  37. <a href="/destination">Go!</a> Standard Link <a class="spf-link" href="/destination">Go!</a> SPF Link Progressive

    Enhancement Request class=“spf-link”

  38. <html> <head> <!-- Styles --> </head> <body> <div id="masthead">…</div> <div

    id="content"> <!-- Content --> </div> <div id="footer">…</div> <!-- Scripts --> </body> </html> StaticResponse.html Response

  39. { ! "head": "<!-- Styles -->", ! ! "body": {

    "content": "<!-- Content -->", }, ! "foot": "<!-- Scripts -->" ! } DynamicResponse.spf.json Response

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

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

  42. Optional Features Custom Caching Reuse Responses Conditionally

  43. Custom Caching Prefetching Get Responses Before Requests Optional Features

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

  45. Multipart Responses { ... } Standard Response Single Object

  46. Multipart Responses { ... } Standard Response [ { ...

    }, { ... }, { ... } ] Multipart Response Multiple Objects

  47. Multipart Responses { ... } Standard Response [ { ...

    }, { ... }, { ... } ] Multipart Response Delimiters [\r\n { ... },\r\n { ... },\r\n { ... } ]\r\n Multipart Response with On-the-Fly Processing [\r\n { ... },\r\n { ... },\r\n { ... } ]\r\n

  48. Just how fast is it? ! !

  49. data: YouTube real user monitoring * data for playbacks without

    ads 2013-08-14 2014-05-14 Time to Playback Desktop Median

  50. data: YouTube real user monitoring * data for playbacks without

    ads Composite HTML5 Flash Time to Playback Desktop Median

  51. data: YouTube real user monitoring Time to Playback Desktop Median

    * data for playbacks without ads

  52. data: YouTube real user monitoring No Persistence Users Reported Site

    Felt Faster Time to Playback Desktop Median * data for playbacks without ads

  53. data: YouTube real user monitoring Video Pages: Chrome Only ~8.5%

    Improvement Time to Playback Desktop Median * data for playbacks without ads

  54. data: YouTube real user monitoring Video Pages: All Browsers ~9.0%

    Improvement Time to Playback Desktop Median * data for playbacks without ads

  55. data: YouTube real user monitoring On-the-Fly over HTTP ~5.0% Improvement

    Time to Playback Desktop Median * data for playbacks without ads

  56. data: YouTube real user monitoring Default HTML5: No Ads ~8.0%

    Improvement Time to Playback Desktop Median * data for playbacks without ads

  57. data: YouTube real user monitoring All Major Pages ~7.5% Improvement

    Time to Playback Desktop Median * data for playbacks without ads

  58. data: YouTube real user monitoring Default HTML5: Ads ~2.0% Improvement

    Time to Playback Desktop Median * data for playbacks without ads

  59. data: YouTube real user monitoring On-the-Fly over SPDY ~4.5% Improvement

    Time to Playback Desktop Median * data for playbacks without ads

  60. data: YouTube real user monitoring Time to Playback Desktop Median

    * data for playbacks without ads 40% faster

  61. data: YouTube real user monitoring Time to Playback Desktop Median

    * data for playbacks without ads Dynamic Navigation 40% faster

  62. data: YouTube real user monitoring Time to Playback Desktop Median

    * data for playbacks without ads Dynamic Navigation Persistent Player 40% faster

  63. data: YouTube real user monitoring Time to Playback Desktop Median

    * data for playbacks without ads Dynamic Navigation Persistent Player Default HTML5 40% faster

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

  65. What about “regular” pages? ! !

  66. data: YouTube real user monitoring 2013-08-14 2014-05-14 Time to Load

    Search Results Desktop Median

  67. data: YouTube real user monitoring Results Time to Load Search

    Results Desktop Median

  68. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median

  69. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median Video Pages Only

  70. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median All Major Pages

  71. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median Search Results ~22.5% Improvement

  72. data: YouTube real user monitoring Time to Load Search Results

    Desktop Median 22.5% faster

  73. Is there an impact on serving? ! !

  74. data: YouTube production monitoring 12:00 AM 11:59 PM Aggregate Incoming

    Request Rate Desktop Requests/Second

  75. data: YouTube production monitoring 12:00 AM 11:59 PM Day Before

    Aggregate Incoming Request Rate Desktop Requests/Second

  76. data: YouTube production monitoring 12:00 AM 11:59 PM Enable SPF

    Day Before Aggregate Incoming Request Rate Desktop Requests/Second SPF Enabled ~13% Load Reduction

  77. data: YouTube production monitoring 12:00 AM 11:59 PM Day After

    Enable SPF Day Before Aggregate Incoming Request Rate Desktop Requests/Second

  78. Aggregate Incoming Request Rate Desktop Requests/Second data: YouTube production monitoring

    12:00 AM 11:59 PM 13% more efficient

  79. Aggregate Incoming Request Rate Desktop Requests/Second data: YouTube production monitoring

    12:00 AM 11:59 PM 13% more efficient Persistent Interface

  80. Desktop Requests/Second data: YouTube production monitoring 12:00 AM 11:59 PM

    Persistent Interface Custom Caching Aggregate Incoming Request Rate 13% more efficient

  81. What’s next?

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

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

  84. Digging Deeper David Phillips @TheDaveWhoCodes

  85. image: ! YouTube isn’t a startup anymore. !

  86. image: ! We can’t force change on others on a

    whim. !

  87. How do we gain flexibility without breaking everyone? !

  88. image:

  89. <html> <head> <!-- Metadata --> <!-- Styles --> </head> <body>

    <!-- Content --> <!-- Scripts --> </body> </html>

  90. <html> <head> <!-- Metadata --> <!-- Styles --> </head> <body>

    <!-- Content --> <!-- Scripts --> </body> </html> Processes First

  91. <html> <head> <!-- Metadata --> <!-- Styles --> </head> <body>

    <!-- Content --> <!-- Scripts --> </body> </html> Precedes Rendering

  92. <html> <head> <!-- Metadata --> <!-- Styles --> </head> <body>

    <!-- Content --> <!-- Scripts --> </body> </html> Blocks DOM

  93. { title: "…", head: "<!-- Styles -->", body: { content:

    "<!-- Content -->" }, foot: "<!-- Scripts -->", }

  94. { title: "…", head: "<!-- Styles -->", body: { content:

    "<!-- Content -->" }, foot: "<!-- Scripts -->", } Processes First

  95. { title: "…", head: "<!-- Styles -->", body: { content:

    "<!-- Content -->" }, foot: "<!-- Scripts -->", } Styles in the head process next

  96. { title: "…", head: "<!-- Styles -->", body: { content:

    "<!-- Content -->" }, foot: "<!-- Scripts -->", } Content is injected after

  97. { title: "…", head: "<!-- Styles -->", body: { content:

    "<!-- Content -->" }, foot: "<!-- Scripts -->", } Scripts are loaded at the end

  98. The common case isn’t all that common. !

  99. { title: "…", head: "<!-- Styles —> <!-- Scripts -->",

    body: { content: "<!-- Content -->" }, foot: "<!-- Scripts -->", } Resources can be in any section

  100. Loading resources is fun. ! !

  101. <script>alert(‘Alerts are bad!’);</script> Inline Resources

  102. <script>alert(‘Alerts are bad!’);</script> Inline Resources <script src="http://site.com/alert.js"></script> External Resources

  103. <script>alert(‘Alerts are bad!’);</script> Inline Resources <script src="http://site.com/alert.js"></script> <script src="http://site.com/redalert.js"></script> External

    Resources Scripts block further execution

  104. But why reload if we don’t need to? !

  105. <script name=“myAlert”>alert(‘Alerts are bad!’);</script> Inline Resources <script name=“exAlert” src=“http://site.com/alert.js”></script> External

    Resources name=“myAlert” name=“exAlert” More Progressive Enhancement

  106. Skipping execution has a couple of side effects !

  107. First ! !

  108. The code doesn’t get executed ! !

  109. Some assembly required ! !

  110. Init/Dispose on navigate ! !

  111. Events: • spfclick • spfrequest • spfpartprocess • spfpartdone •

    etc.

  112. Second ! !

  113. Versioning gets tougher ! !

  114. <script name=“myAlert”>alert(‘Alerts are bad!’);</script> Inline Resources <script name=“exAlert” src=“http://site.com/alert.js”></script> External

    Resources name=“myAlert” name=“exAlert”

  115. <script name=“myAlert”>alert(‘Alerts are bad!’);</script> Inline Resources <script name=“exAlert” src=“http://site.com/alert.js”></script> External

    Resources name=“myAlert” name=“exAlert” Hash of the text

  116. <script name=“myAlert”>alert(‘Alerts are bad!’);</script> Inline Resources <script name=“exAlert” src=“http://site.com/alert.js”></script> External

    Resources name=“myAlert” name=“exAlert” Hash of the text Unique URLs

  117. <script name=“exAlert” src=“http://site.com/alert-2.js”></script> name=“exAlert” <script name=“exAlert” src=“http://site.com/alert-1.js”></script> name=“exAlert”

  118. The two together make for a seamless experience !

  119. Timing is important ! !

  120. spfdone response[‘timing’]

  121. NavigationTiming navigationStart, responseStart, etc. Timing

  122. NavigationTiming Custom Values navigationStart, responseStart, etc. spfProcessHead, spfProcessBody, etc. Timing

  123. Help us out Get the code github.com/youtube/spfjs

  124. Thank you! #spfjs #webperf Learn more youtube.github.io/spfjs David Phillips @TheDaveWhoCodes

  125. Thank you! Learn more youtube.github.io/spfjs Alex Nicksay @webdevjesus Get the

    SPF code github.com/youtube/spfjs David Phillips @TheDaveWhoCodes #spfjs #webperf