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

Front-end Performance Improvements at YouTube (...

Alex Nicksay
December 07, 2010

Front-end Performance Improvements at YouTube (Velocity China 2010)

Front-end Performance Improvements at YouTube: Progressive Enhancement and Beyond

Over the past year, we've made many front-end performance improvements to the YouTube Watch page, using techniques such as progressive enhancement, a behavior-based widget system, and preloaded connections. I'll discuss how we utilize each technique at YouTube and how you can apply them to your own site.

Alex Nicksay @webdevjesus

Presented at Velocity China 2010 — December 7, 2010:
http://velocity.oreilly.com.cn/2010/index.php?func=session&name=YouTube%E7%9A%84%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E6%94%B9%E8%BF%9B%EF%BC%9A%E9%80%90%E6%AD%A5%E5%A2%9E%E5%BC%BA%E4%B8%8E%E8%B6%85%E8%B6%8A

Alex Nicksay

December 07, 2010
Tweet

More Decks by Alex Nicksay

Other Decks in Programming

Transcript

  1. Embedding Flash (Before) 1: Load JavaScript 2: Determine Flash Version

    3: Write Embed 4: Load Flash Player 5: Load Video Red outlines denote blocking JavaScript
  2. Embedding Flash  Realization: - Most visitors fall into one

    of two categories: - They have a recent version of Flash installed - They do not have Flash installed  Optimization: - Optimistically embed the most common case without JS and do version checking and player updating at the bottom of the page when scripts load
  3. Embedding Flash (After) Text 1: Load Flash Player 2: Load

    Video 3: Load JavaScript 4: Determine Flash Version 5: Update Embed (if needed) Red outlines denote blocking JavaScript
  4. Impact on Performance Time to Parse Document Head Average: JS

    at Top (Before) = ~400 ms Average: JS at Bottom (After) = ~250 ms Reduction = ~250 ms
  5. Impact on Performance Time until Flash Starts Average: JS at

    Top (Before) = ~1200 ms Average: JS at Bottom (After) = ~1100 ms Reduction = ~100 ms
  6. Preloading the Video Connection  Why do it? - Making

    new connections can be expensive - Video download can begin sooner by preloading the connection
  7. Preloading the Video Connection  How do you do it?

    <head> <script> var img = new Image(); img.src = videoConnectionUrl; </script> </head>
  8. Preloading the Video Connection  What does it do? -

    Resolves DNS while page is rendering, before it is needed - Maintains an open connection for later use
  9. Impact on Page Load Timeline of Resources Loaded Video Connections

    Loading the connection the first time takes several times longer than the second time
  10. Impact on Performance Time until Video Download Begins 50th Percentile:

    Reduction = ~180 ms Average: Reduction = ~260 ms
  11. Feather: Lightweight Version Comments are read-only and limited to a

    single page to reduce HTML, JS, and CSS load
  12. Feather: Lightweight Version 0 KB 50 KB 100 KB 150

    KB 200 KB Watch Feather HTML CSS JS IMG Sizes of Resources Loaded
  13. Impact on Performance Time to Load Page Feather (Lightweight Version)

    = ~1100 ms Watch (Standard Version) = ~1750 ms Reduction = ~650 ms
  14. UIX Widget System  Delay-loading non-essential content and resources increases

    performance  Traditionally, interactive widgets are rendered by JS, requiring scripts to be loaded before page rendering  Traditionally, each new piece of dynamically loaded content needs to have JS initialization  What do we need? - Lightweight framework for fast, easy, dynamic loading of new content (HTML) and new widgets (CSS/JS)
  15. UIX Widget System  What is it? - A centrally-managed,

    delegated-behavior widget system - Separates content (HTML) from interaction (JS)  What does that mean? - JS can be delay-loaded after the page is rendered - New widgets can be registered at any time - New HTML can be dynamically updated at any time - Event handling is automatic - Widgets in new content work immediately
  16. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Architecture UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  17. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Behaviors UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  18. UIX Widget System: Behaviors UIX Behaviors  A registry stores

    “behaviors”  A behavior is an action that is executed any time an event happens on a type of element  A behavior has three components: - What: a JS function to execute - Where: a CSS class to match - When: a JS event to handle
  19. UIX Widget System: Behaviors UIX Behaviors // Sample registry uix.registry

    = { 'click': { 'widget1-css': widget1.onClick, 'widget2-css': widget2.onClick }, 'mouseover': { 'widget2-css': widget2.onMouseover }, 'mouseout': { 'widget2-css': widget2.onMouseout } };
  20. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Behaviors UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  21. UIX Widget System: Behaviors UIX Behaviors  Events bubble to

    the top of the document  A single event handler manages multiple browser events
  22. UIX Widget System: Behaviors UIX Behaviors // Sample event listeners

    document.addEventListener( 'click', uix.handleEvent); document.addEventListener( 'mouseover', uix.handleEvent); document.addEventListener( 'mouseout', uix.handleEvent);
  23. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Behaviors UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  24. UIX Widget System: Behaviors UIX Behaviors  The event handler

    matches the JS event with CSS classes in the registry to execute the actions of behaviors
  25. UIX Widget System: Behaviors UIX Behaviors // Sample event handler

    uix.handleEvent = function(evt) { if (evt.type in uix.registry) { var actions = uix.registry[evt.type]; for (var css in actions) { var el = findNodeOrParentWithClass( evt.target, css); if (el) { actions[css](el, evt); } } } };
  26. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Widgets UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  27. UIX Widget System: Widgets  The JS for a widget

    is a collection of related functions that act on an HTML element in response to events  The HTML for a widget is an element with a specific CSS class UIX Widget
  28. UIX Widget System: Widgets UIX Widget // Sample widget function

    widget1.onClick = function(el, evt) { if (hasClass(el, 'active') { removeClass(el, 'active'); } else { addClass(el, 'active'); } }; // Sample widget structure <span class="widget1-css">...</span>
  29. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Delay-Loading UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  30. UIX Widget System: Delay-Loading  Dynamically add new widgets by

    registering new behaviors UIX Widget UIX Widget UIX Widget UIX Widget
  31. UIX Widget System: Delay-Loading UIX Widget UIX Widget UIX Widget

    UIX Widget // Sample register function uix.register = function(css, type, fn) { if (!(type in uix.registry)) { uix.registry[type] = {}; } uix.registry[type][css] = fn; };
  32. UIX Widget UIX Widget UIX Widget UIX Widget UIX Widget

    System: Architecture UIX Behaviors Event Bubbling Event Handling Class Matching Action Execution
  33. Summary  Performance Optimization #1 JavaScript at the Bottom and

    Embedding Flash  Performance Optimization #2 Preloading the Video Connection  Performance Optimization #3 Feather: Lightweight Version  Progressive Enhancement UIX Widget System