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
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
460
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.4k
Amazon Qを使ってIaCを触ろう！
maruto
0
320
VR HMDとしてのVision Pro＋ゲーム開発について
yasei_no_otoko
0
110
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
390
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.9k
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
300
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
290
EventSourcingの理想と現実
wenas
6
2.1k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
680

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Building Adaptive Systems
keathley
38
2.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
GitHub's CSS Performance
jonrohan
1030
460k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
108
49k
Designing Experiences People Love
moore
138
23k

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