Yahoo! Mail Beta technology update

Today we're thrilled to launch Yahoo! Mail Beta. The site represents one of the most ambitious Web client technology efforts we've undertaken at Yahoo!. I'm happy to have the opportunity to give a behind-the-scenes peek at some of the tech behind it.

First let me set the stage. When we set out to build Yahoo! Mail Beta a year ago, we decided that speed was the number-one feature and set a target of cutting the loading time and the time to interact with the Inbox in half. That priority was followed closely by applying a simpler, elegant, and decidedly more purple design that unifies the Web experience with the mobile and tablet products.

So how did we get there? I’ll review four main areas that went into Yahoo! Mail Beta with a focus on performance: The development of the Web client itself; the applications platform; the cloud platforms we are using; and finally, a couple of user-flow optimizations.

Developing the Yahoo! Mail Beta

One of the first things we started with was the markup. We decided from the beginning to use CSS3 wherever possible. This meant performance optimizations in a couple of areas. First, less HTML, since we no longer needed to rely on extra benign elements just for style hooks intended to accommodate older browsers. Second, fewer images, since we replaced elements traditionally handled with background graphics with CSS for things like gradients, drop shadows, and rounded borders. With this approach, we knew that it wouldn't look exactly the same in every browser, but the essence and functionality of the product would be the same.

For JavaScript, we decided to use YUI3. Yahoo! Mail Beta is built using the YUI framework from the ground up. One of the great benefits of YUI is that it's modular, allowing us to pull in libraries as needed as opposed to downloading everything up front.

Modernizing the markup and using YUI3 for JavaScript reduced total download size for the application by 35 percent, a huge performance win.

Next we looked at how the browser communicates with the server. Negotiating HTTP connections comes with overhead, particularly on lossy connections common in emerging markets like India and Indonesia. To minimize overhead, we implemented an HTTP request streaming technique that lets us push chunks of data across a single HTTP connection as soon as they are ready on the server. The browser can render parts of the page even as the server works to satisfy the full launch request.

Yahoo! Mail applications

Another area of focus has been pace of iteration. Yahoo! Mail is a big animal. If we have to push the whole thing every time we want to iterate on a feature, the associated overhead (full regression, deployment to thousands of servers, etc.) can be pretty, well, not agile.

That's where Yahoo! Mail applications come in. Yahoo! Mail applications are extensions that can be developed, deployed and updated outside of the normal release cycle. They are written in pure Javascript, CSS and HTML and are isolated from the core product with a Javascript API, helping minimize the risk of regression from a bad application push.

With Yahoo! Mail Beta, we truly became customers of our own platform. The integrated Yahoo! Messenger feature as well as the inline photo slideshow and video player are all built using the same framework that external developers use.

Here's how it works: A simple MySQL database cluster stores the applications. When a developer publishes an application, the MySQL database is updated. From there, a globally deployed and replicated cache (think memcache with worldwide replication) pulls the application from MySQL and fronts the cache with a simple Web server for serving to Yahoo! Mail Beta. With this technique, we can deploy a new feature iteration in minutes. It also gives us a handy capability to deploy applications by percentages of the user base for throttled rollout and bucket testing. We have a lot more functionality in the works that takes advantage of this infrastructure.

Using the latest in cloud technology

For Yahoo! Mail Beta, we looked to use our cloud platform wherever possible. I'm betting most of you don't need an explanation why hosted cloud infrastructure can be a big win for a product team like ours. The less of an infrastructure truck we have to lug behind us, the more engineers we can devote to building a great product. I'll highlight two cloud services that are particularly relevant.

The first is our edge connection service. Our cloud team has deployed ultra efficient HTTP proxies around the planet. The nodes run Traffic Server, which we open sourced back in November 2009. Starting in October 2010, all of the more than five-billion daily HTTP requests for Yahoo! Mail flow through these connection proxies.

How does that translate to a Yahoo! Mail user?. Let's say you're sitting in an Internet cafe in India but your mailbox is actually located on a cluster in the U.S. Before we had the edge service, when you typed mail.yahoo.com into your browser, you would route all the way back to the cluster hosting your mailbox over your own bandwidth and through whatever network peering route your ISP has. With the edge connection service your request for mail.yahoo.com is routed to the closest proxy by network distance. From there the request flows over Yahoo!'s bandwidth back to the cluster hosting your mailbox. This can improve transfer speed by 25% and more in some cases.

The second relevant cloud service is our CDN (content delivery network). Using the same traffic server technology as the edge connection service, but adding a caching element and backing object store, the cloud-hosted CDN is also deployed around the globe. One of the main benefits of using our CDN service is that it natively supports combining JavaScript and CSS files on the server side. I mentioned before that negotiating HTTP connections can be expensive, so when you include JavaScript and CSS in the page, you want to do that in as few requests as possible. Since the application can behave in different ways for different users — for example, a Mail Plus user doesn't need all the JavaScript associated with managing ads — it's costly to precompile all the various combinations of JavaScript and CSS at build time. The CDN service lets us specify what to combine with a simple syntax so it looks something like this:

<script src="http://cdn/combo?core.js;ads.js;partner.js;etc.js"></script>

The CDN concatenates those JavaScript files into a single file instead of requiring four separate HTTP requests.

User flow optimizations

Finally, we took a look at what click-paths users take to get to Yahoo! Mail. One of the more common scenarios is a visit to the Yahoo! homepage and a click on the Yahoo! Mail link from there. We took a close look at what was happening in this flow and made a couple of key optimizations.

First, we removed redirects that users were taken through before actually hitting their Yahoo! Mail server cluster. In some countries, that alone saved up to a second of launch latency. Secondly we started precaching mailbox and social data for all signed-in users of the homepage, as there is high probability they will click through to Yahoo! Mail.

Summing up

The final result is that Yahoo! Mail Beta is at least twice as fast as any of our current Mail products (and in fact up to four times in some countries) and is architected to let us iterate quickly. All good stuff for our hundreds of millions of users around the world!

If you haven't tried it out yet, just visit Yahoo! Mail and click Try it out. Thanks for reading, and we look forward to hearing your feedback!