The document summarizes three frontend optimizations used at Facebook - Quickling, PageCache, and BigPipe - to improve site performance and reduce server costs. Quickling uses AJAX to remove redundant page loads. PageCache caches visited pages in the browser to improve load times of revisited pages. BigPipe pipelines the generation and delivery of page components to reduce loading times. Together these techniques improved user experience and saved Facebook an estimated 20% in infrastructure costs.

1. (c) 2010 Facebook, Inc. or its licensors. "Facebook" is a registered trademark of Facebook, Inc.. All rights reserved. 1.0

2. Ajaxifying, Caching and Pipelining
Facebook Website
Changhao
Jiang
The Velocity Conference
Dec 7th, 2010, Beijing, China

3. The beginning - 2004

4. Today

5. Mission
Give people the power to
share and make the world
more open and connected

6. 500M Users
500
M

7. Today’s reality

8. Average hours per month per user!

9. Site speed is critical to Facebook!

10. What do we measure?
Facebook
CDN

11. What do we measure?
server time
client/render time
Facebook
network time
CDN

12. Time-to-Interact (TTI)

13. Time-to-Interact (TTI)

14. Time-to-Interact (TTI)

15. Three frontend optimizations at Facebook
Quickling transparently ajaxifies the whole web site
PageCache caches user-visited pages in browser
BigPipe pipelines Facebook website

16. Quickling: Ajaxify the Facebook site

17. Motivation: remove redundant work

18. Motivation: remove redundant work

19. Remove redundant work via Ajax
Full page load
Page 1 Page 2 Page 3 Page 4
Use session load unload load unload load unload load unload
Ajax call
Page 1 Page 2 Page 3 Page 4
Use session load unload

20. How Quickling works?
1. User clicks a link or back/forward button
2. Quickling sends an ajax to server
3. Response arrives
4. Quickling blanks the content area
5. Download javascript/CSS
6. Show new content

21. Implementation details
• Link Controller
• HistoryManager
• Bootloader
• Busy Indicator
• CSS Unloading
• Permanent link support
• Resetting timer functions

22. User perceived latency (TTI) reduction
3000
2500
2000
1500 Full pageload
Quickling
1000
500
0
/home.php /profile.php /photo.php /album.php
10% ~ 30% reduction in TTI

23. Server page generation time reduction
2000
1800
1600
1400
1200
1000 Full pageload
800 Quickling
600
400
200
0
/home.php /profile.php /photo.php /album.php
Quickling requests are 20% ~ 30%

24. 45% of page hits are Quickling requests
Quickling
Full pageload

25. Quickling conclusion:
• Reduce user perceived latency by more than
10%
• Save 10% of Facebook’s data center cost!

26. PageCache: Cache visited pages at client side

27. Motivation – temporal locality
• Some pages are likely to be revisited soon
▪ E.g. home page (re)visited every 3 page hits:
-> profile -> photo -> -> notes -> -> photo ->
photo
• Cache them!

28. How PageCache works?
1. User clicks a link or back button
2. Quickling sends ajax to server
Find Page in the cache
3. Response arrives
3.5 Save response in cache
4. Quickling blanks the content area
5. Download javascript/CSS
6. Show new content

29. Challenges
• Real time updates
▪ Page content needs to be as fresh as possible
• Cache consistency
▪ Cached page should be consistent after state-modifying operations

30. Issue(1): Incremental updates
Cached version Restored version

31. Issue(1): Incremental updates
Poll server for incremental updates via AJAX calls
▪ Provides an ‘onpagecacheRegister’ API to developers:
▪ Invoked when a page is restored from cache.
▪ Used to send AJAX to server for incremental updates, refresh ads, etc.
▪ Blank the content area before incremental updates arrive to avoid flash of
stale contents.

32. Issue(2): In-page writes
Cached version Restored version

33. Issue(2): In-page writes
Record and replay
▪ Automatically record all state-changing operations in a cached page
▪ All AJAX calls using ‘POST’ method, or those explicitly specified
‘replayable’ will be added to cached content.
▪ Automatically replay those operations when cached page is restored.
▪ Cached AJAX handler callback functions already contain all the
contextual information about the recorded operations due to JavaScript
closure.

34. Issue(3): Cross-page writes
Cached version State-changing op Restored version

35. Issue(3): Cross-page writes
Server side invalidation
▪ Instrument server-side database API, whenever a write operation is
detected, send a signal to the client to invalidate the cache.
▪ The signal (a.k.a. cache invalidation message) contain information
about what persistent data has changed.
▪ Upon receiving cache messages, the client side can flush the whole
cache or refresh only those affected page components via AJAX.

36. User perceived latency (TTI) redunction
2500
2000
1500 Full pageload
Quickling
1000 PageCache
500
10x faster in user perceived latency
0

37. Server cost redunction
20%
~20% savings on page hits to home page

38. PageCache conclusion:
• 10X speedup in user perceived speed!
• Save 2% of Facebook’s data center cost!

39. BigPipe: pipeline Facebook website

40. Facebook page

41. User perceived latency
Page generation
Network Latency Page rendering (in browser)
(in server)

42. Pagelets

43. User perceived latency
Pagelet 1:
Page generation
Network Latency Page rendering (in browser)
(in server)
Pagelet 2:
Pagelet 3:

56. TTI improvement
Traditional model BigPipe
2500
2000
Millisecond
1500
1000
500
0
Firefox 3.6 IE 8 Safari 4.0 Chrome 4.1
2X improvement in user perceived latency for almost all browsers.

57. BigPipe first response
<html>
<head> <script src=“<big pipe js>” />…</
head>
<body>
…
<div id=“left_column”>
<div id=“pagelet_navigation”></div>
</div>
<div id=“middle_column”>
<div id=“pagelet_composer></div>
</div>
…

58. Pagelet response 1
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_navigation”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>

59. Pagelet response 2
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_composer”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>

60. Pagelet example
class AdsPagelet extends PageletResponse
{
public function init () {
// initialize pagelet
}
public function prepare() {
// data fetching
}
public render() {
// generate pagelet response.
}
}

61. Pagelet programming model
• Self contained
▪ HTML, JavaScript, CSS, onloadRegister
• Advanced features:
▪ Pagelet hierarchy
▪ Phased rendering
▪ Cross-pagelet dependencies
▪ data dependency
▪ display dependency
▪ JavaScript dependency

62. BigPipe programming model
// Step 1: create BigPipe instance
$big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE);
// Step 2: Specify page layout and pagelet place holders.
$big_pipe->setPage(
‘<div id=“left_column”>
<div id=“pagelet_navigation”></div>
</div>
<div id=“middle_column”>
<div id=“paglet_composer”></div>
<div id=“pagelet_stream”></div>
</div>’);
// Step 3: add pagelets to the pipe
$big_pipe->addPagelet(
new UIPagelet()
->setSrc(‘/pagelet/composer.php’)
->setWrapperId(‘pagelet_composer’));
…
// Step 4: generate pagelets flush them out.
echo $big_pipe->render();

63. BigPipe programming model
// Step 1: create BigPipe instance
$big_pipe = BigPipe::getInstance
(BigPipeType::PIPELINE);
// Step 2: Specify page layout and pagelet place holders.
$big_pipe->setPage(
‘<div id=“left_column”>
// Step 1: create BigPipe instance
<div id=“pagelet_navigation”></div>
</div>
<div id=“middle_column”>
<div id=“paglet_composer”></div>
$big_pipe = BigPipe::getInstance
<div id=“pagelet_stream”></div>
</div>’);
(BigPipeType::PIPELINE);the pipe
// Step 3: add pagelets to
$big_pipe->addPagelet(
new UIPagelet()
->setSrc(‘/pagelet/composer.php’)
->setWrapperId(‘pagelet_composer’));
…
// Step 4: generate pagelets flush them out.
echo $big_pipe->render();

64. BigPipe programming model
// Step 1: create BigPipe instance
$big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE);
// Step 2: Specify page layout and pagelet place
holders. // Step 2: Specify page layout and pagelet place holders.
$big_pipe->setPage(
‘<div id=“left_column”>
$big_pipe->setPage( <div id=“pagelet_navigation”></div>
</div>
‘<div id=“left_column”>
<div id=“middle_column”>
<div id=“paglet_composer”></div>
<div id=“pagelet_navigation”></div>
<div id=“pagelet_stream”></div>
</div>’);
</div>// Step 3: add pagelets to the pipe
<div id=“middle_column”>
$big_pipe->addPagelet(
new UIPagelet()
<div id=“paglet_composer”></div>
->setSrc(‘/pagelet/composer.php’)
->setWrapperId(‘pagelet_composer’));
<div id=“pagelet_stream”></div>
…
</div>’); 4: generate pagelets flush them out.
// Step
echo $big_pipe->render();

65. BigPipe programming model
// Step 1: create BigPipe instance
$big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE);
// Step 2: Specify page layout and pagelet place holders.
// Step 3: add pagelets to the pipe
$big_pipe->setPage(
‘<div id=“left_column”>
<div id=“pagelet_navigation”></div>
$big_pipe->addPagelet(
</div>
<div id=“middle_column”>
new UIPagelet()
<div id=“paglet_composer”></div>
<div id=“pagelet_stream”></div>
->setSrc(‘/pagelet/composer.php’)
</div>’);
->setWrapperId(‘pagelet_composer’));
// Step 3: add pagelets to the pipe
… $big_pipe->addPagelet(
new UIPagelet()
->setSrc(‘/pagelet/composer.php’)
->setWrapperId(‘pagelet_composer’));
…
// Step 4: generate pagelets flush them out.
echo $big_pipe->render();

66. BigPipe programming model
// Step 1: create BigPipe instance
$big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE);
// Step 2: Specify page layout and pagelet place holders.
$big_pipe->setPage(
‘<div id=“left_column”>
<div id=“pagelet_navigation”></div>
// Step 4: generate pagelets flush them out.
</div>
<div id=“middle_column”>
<div id=“paglet_composer”></div>
<div id=“pagelet_stream”></div>
echo $big_pipe->render();
</div>’);
// Step 3: add pagelets to the pipe
$big_pipe->addPagelet(
new UIPagelet()
->setSrc(‘/pagelet/composer.php’)
->setWrapperId(‘pagelet_composer’));
…
// Step 4: generate pagelets flush them out.
echo $big_pipe->render();

67. BigPipe generation modes
• Single flush mode
▪ Support search-engine crawlers
▪ Support clients without JavaScript
• Pipeline mode
▪ Generate and flush pagelets sequentially (default mode)
• Parallel mode
▪ Generate pagelets in parallel and flush them out-of-order

68. BigPipe programming model
• Encapsulation
▪ Hide implementation details
• Intuitive
▪ Easy to understand mental model for developers
• Flexible
▪ Different modes good for different use case.

69. BigPipe advanced features
• AjaxPipe
▪ Use iframe to pipeline Ajax response
▪ Used by Facebook home page’s dashboards (photo, groups, etc)
• WidgetPipe
▪ Pipeline multiple widgets (“like” button) on third party websites

70. Thank you!