Frontend Performance Engineering in Facebook

David Wei (Facebook Inc.), Changhao Jiang (Facebook Inc.)
Web Performance
Location: Regency 1
Average rating: ****.
(4.00, 9 ratings)

In Facebook, we integrate features and applications deeply into each page. Such deep integration presents both opportunities and challenges to the frontend performance engineering (“Frontend” refers to browser render time):

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.

Photo of David Wei

David Wei

Facebook Inc.

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.

Photo of Changhao Jiang

Changhao Jiang

Facebook Inc.

Changhao Jiang is a research scientist at Facebook Inc. His responsibilities at Facebook are mainly focused on improving user perceived latency and front end performance monitoring. He was responsible for several major performance optimization projects at Facebook such as Quickling which transparently ajaxifies the whole website and PageCache which caches users’ visited pages using JavaScript. Changhao is also one of the lead developers of the XHProf project, which was open-sourced by Facebook. In 2009, Changhao designed and implemented the BigPipe system to serve dynamic web pages using pipelining techniques, which helped making Facebook site twice as fast. Changhao holds bachelor and master degree in Computer Science from Tsinghua University, and Ph.D. from the University of Illinois at Urbana Champaign.

Comments on this page are now closed.

Comments

Picture of J.B. Wheatley
J.B. Wheatley
06/29/2009 11:47am PDT

The slides are now available for download via the Presentation link above!

Pavel Senko
06/26/2009 12:30am PDT

Hi guys, it was a great presentation. Where can I donwload it?

Thanks!

Picture of Changhao Jiang
Changhao Jiang
06/24/2009 5:50pm PDT

Good question, Earnest. Yeah Quickling does have some protections against that. Once every couple of pages, Quickling will do a full page load to allow browsers to release memory.

Picture of Ernest Mueller
Ernest Mueller
06/24/2009 5:45pm PDT

Quite daring. Don’t you get memory and GC kinds of problems by making your entire site basically a persistent JavaScript AJAX app?

  • Keynote Systems
  • Google
  • Shopzilla
  • Aptimize
  • Facebook
  • NeuStar
  • Rackspace Cloud
  • Schooner Information Technology
  • SoftLayer
  • SpringSource
  • Sun Microsystems

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Sharon Cordesse at scordesse@oreilly.com

Download the Velocity Sponsor/Exhibitor Prospectus

Media Partner Opportunities

Download the Media & Promotional Partner Brochure (PDF) for information on trade opportunities with O'Reilly conferences or contact mediapartners@ oreilly.com

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

Velocity Newsletter

To stay abreast of conference news and to receive email notification when registration opens, please sign up for the Velocity Conference newsletter (login required)

Contact Us

View a complete list of Velocity contacts