What is Big Pipe?

There are various technologies commonly used to ensure fast loading times for websites. For example, skeleton loading and AJAX are some of these technologies. These technologies provide users with quick results, giving them the perception that the website loads faster.

Aytan Rustamova

10 min. read

As internet usage increases, people's expectations from websites also increase. According to research, the amount of time users spend on a website is directly proportional to the website's loading speed. There are various technologies commonly used to ensure fast loading times for websites. For example, skeleton loading and AJAX are among these technologies. These technologies provide users with quick results, giving them the perception that the website loads faster.

In addition to these technologies, Facebook introduced its own technology called BigPipe. What is BigPipe and how does it differ from other technologies?

If we look at websites first, all websites work based on the request and response logic. The user sends a request to the server, the server prepares a response according to the request, and then we see the result as an HTML template. However, before the HTML template is created, we need to wait for all the data to arrive in the order of processing. This approach of waiting for all processes to be completed instead of presenting the available output to the user has not been considered very logical for Node.js, which works asynchronously. Why should we wait for all processes to finish instead of presenting the ready output to the user?

What is the main motivation behind this technology?

The main motivation behind technologies like Facebook and other Social Network Services (SNS) is to enhance the personalized user experience based on data. This has constantly led to new advancements in order to improve server performance. Facebook found a solution in parallel processing between servers and clients. This solution primarily focuses on reducing the latency of requested pages.

Chunked Encoding

To understand the BigPipe technology, we need to understand chunked HTML pages. Chunked encoding is a transfer method based on HTTP 1.1. It divides the sent request into chunks, allowing parallel processing to be performed on each chunk. This way, a ready chunk can be displayed on the screen while the processing of other chunks continues.

Pagelet

"Pagelets" refers to the division of pages into smaller components. In the image below, we can see how Facebook splits a page into smaller pieces.

Life Cycle

In general, when a user sends a request in BigPipe technology, the following steps are initiated.

The web browser sends an HTTP request to the server.
The HTML page is divided for parallel processing as follows.

<html>
<head>…</head>
<body>
<div id=”left_column”>
<div id=”pagelet_navigation”></div>
</div>
<div id=”middle_column”>
<div id=”pagelet_composer”></div>
<div id=”pagelet_stream”></div>
</div>
<div id=”right_column”>
<div id=”pagelet_pymk”></div>
<div id=”pagelet_ads”></div>
<div id=”pagelet_connect”></div>
</div>

The server creates a Pagelet for the requested page. Once the Pagelet is created, this response is transformed into JSON format with the added CSS in a structured form.

big_pipe.onPageletArrive( { id: “pagelet_composer", content: 
, css: [..], js: [..], … })

Parallel Processing Between Web Server and Browser

In parallel processing, each pagelet operates in different stages. For example, while loading the CSS, it can simultaneously generate the content in another stage and create a response for another pagelet in yet another stage.

Performance Comparison

The graph below illustrates page performance in the user's perspective between the Big Pipe and the traditional model. The graph demonstrates that Big Pipe reduces latency by half in multiple browsers.