Making Youtube Fast

I attended a talk yesterday by the folks at YouTube about how they try to make a visitor’s experience as fast, or at least fast-feeling as possible. There was so much covered! Here’s what I still remember:

  • YouTube is a single-page app. All the JavaScript is loaded the first time we visit one of their pages. After that, the entire experience is managed using JavaScript callbacks. This saves a lot of bandwidth since the only thing that changes is content.
  • They do a lot of A/B testing on real users.
  • They’ve created a library to handle browser interactions back / forward / server callbacks / prioritizing the loading of on-screen objects… they love it.. they said they’ll open-source it soon! In the meantime.. roll your own.
  • They worry about the perception of speed and not just actual speed. The red loading bar on top of the new interface, for example, makes users feel that it’s running faster than it is.
  • Prioritize the loading of objects that are above the fold. Current JavaScript XHR lets you do this. Take advantage of it.
  • Request / send objects from the server in bunches, rather than all-at-once.
  • Try to stay mindful of when users expect certain items to work. For example, they probably expect the video to load first and keep playing while the other objects, thumbnails keep loading. So, start playing the video first and make sure it is sufficiently buffered before loading other things.

There was a bunch more discussed. Some of it was YouTube specific and some of it is currently beyond my understanding. The speakers were all really fantastic.

JavaScript’s function.apply() function..

As seen in A Re-Introduction To JavaScript

JavaScript functions are objects. So, when we declare a function, we get a bunch of other stuff for free! Take, the apply() method, which lets us pass an array into the arguments list of a method! I explain:

Say we have a function that calculates averages from a list of numbers passed into it:

function getAverage() {
  total = 0;
  for (i in arguments) {
    total += arguments[i];
  return total / arguments.length;

We can now call this method to get the average of one or more numbers. Calling:
returns 3.5

We can also:
getAverage.apply(null, [4,2,3,5]);
which also returns 3.5!

Also, goes to show that functions are indeed Objects!