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? Ill 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.
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.
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.
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.
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!