Velocity 09: David Wei and Changhao Jiang, "Frontend Performance Engineering in Facebook"

1. Each feature is integrated into many pages. There is large common intersection of HTML, Javascript, and stylesheets between pages. As a user clicking through page by page, there is a big overhead for the browser to re-execute the common Javascripts and re-loading contents, even they are cached locally;
2. Almost every page of Facebook contains web content from more than one feature developed by different product teams. It is a challenge to evaluate the impact of a new feature on frontend performance due to the mix of features on a page;
3. Features in a page not only depend on the fast product cycles but also depend on user adoption of the features. Performance optimization has to be self-adaptive and maintainable through the fast feature evolutions.

In this talk, we present some of our work on improving and maintaining frontend performance. We will discuss in details of our experience in building and operating such an infrastructure, particularly in the following areas:

1. Using AJAX to render full pages: Traditionally, AJAX is used to fetch dynamic content and render part of the page responding to user interaction. Facebook has developed a framework that uses AJAX to render the full page, while still maintaining the user experience of a “transition of page” by simulating such an experience with Javascript. This fullpage-AJAX framework eliminates the browser overhead of reloading contents and re-executing scripts across different pages.
2. Measurement and Performance Testing: We have developed a performance measurement framework to monitor and analyze site speed. Besides the traditional monitoring features, the framework provides A/B testing capability and integrates with the feature launching system. It makes possible to evaluate overall performance impact of a new feature, even on pages with a mix of evolving features.
3. Adaptive Static Resource Packaging: Many static resource packaging systems run on build time for features—product developers specify all static resources a feature might need, and the build system groups them into Javascript/CSS packages and image sprites. As our pages have many features and each feature is evolving quickly, build-time systems do not adapt well. We developed an adaptive packaging system, which optimizes the static resources based on the measurement of production usages. With a cost-benefit analytic model, the system identifies the optimal packaging strategy, and automatically re-balances the packages to track the feature evolution.

Xiaoliang “David” Wei is a research scientist at Facebook, where he works on front-end performance. He focuses on user latency measurement, end user latency optimization, and best practices for maintaining long-term web performance. Prior to Facebook, David worked on network simulation, TCP enhancement, QoS, and peer-to-peer file sharing systems at Google and two startups. David holds a bachelor’s degree in computer science from Tsinghua University, China, and a PhD in computer science from Caltech, where he co-invented FastTCP, a new Internet congestion control algorithm that led to the startup FastSoft Inc.

Dr. Changhao Jiang is a research scientist at Facebook Inc. His responsibilities at Facebooks are mainly focused on improving Facebook’s user perceived performance and making the site more scalable. Specifically, he currently leads the Quickling project at Facebook which ajaxifies the whole website. He also designed and implemented a client side caching system calledPageCache to cache users’ visited pages at client side browser. Changhao is also one of the lead developers for the XHProf project, which was open-sourced by Facebook in March 2009. Prior to joining Facebook, Dr. Changhao Jiang worked at Google for a year. He also worked as a researcher at Carnegie MellonUniversity for two years. Changhao holds a bachelor’s of science degree and a master’s of science degree from Tsinghua University, and Ph.D. from the University of Illinois at Urbana Champaign.