How Facebook’s BigPipe Revolutionized Web Page Loading Speed
BigPipe splits a web page into independent pagelets and pipelines their generation so that the server and browser work in parallel, dramatically cutting perceived latency and making Facebook’s homepage load up to twice as fast.
Improving site speed has been a core goal for Facebook; in 2009 the company doubled its page performance, largely thanks to an innovation called BigPipe .
BigPipe redesigns the dynamic web‑page service by breaking a page into many small units called pagelets . A pipeline is created between the web server and the browser, allowing different pagelets to be processed at different stages and fully exploiting both server and client resources.
In the traditional request model the whole page is generated sequentially: the server stays busy while the browser waits idle, creating a bottleneck once the HTML is finally sent.
How BigPipe works
Each pagelet passes through several phases:
Server parses and validates the request
Server fetches data from storage
Server generates the HTML response for the pagelet
Network transmission
CSS download
DOM construction and CSS application
JavaScript download
JavaScript execution
Although the steps look similar to the classic flow, BigPipe lets many pagelets be in different phases simultaneously.
The Facebook homepage consists of multiple independent pagelets; from a user’s perspective the page appears piece by piece, giving the impression of a much faster load.
When a user requests the page, the server immediately returns an incomplete HTML document containing the <head> (with the BigPipe JavaScript library) and a <body> template with placeholders for each pagelet, for example:
<div>
<div class="left">
<div id="pagelet_nav"></div>
</div>
<div class="main">
<div id="pagelet_composer"></div>
<div id="pagelet_ads"></div>
</div>
</div>The server generates pagelets one after another; as soon as a pagelet is ready it is streamed to the client. The client parses the received pagelet, downloads its CSS, and renders it while the server continues generating the next pagelet.
Thus multiple pagelets can be rendered in parallel, with the browser and server working concurrently, which greatly reduces perceived latency.
Performance tests (loading the Facebook homepage 50 times without browser cache) show that BigPipe cuts the average delay roughly in half compared to the traditional sequential model.
Content compiled from Facebook’s original article.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.