Use Facebook BigPipe to Load Webpages Faster

This article represents Facebook BigPipe technology and various different open source frameworks which could be used to load web page faster like Facebook. Please suggest related frameworks if one or more of them is not mentioned in this article. You may have read the text on BigPipe on several webpages. However, I wanted to present a different perspective including pictorial presentation for better understanding.

Traditional webpage serving model 

Following diagram represents traditional webpage serving model.

fig: traditional web page serving model

 

You may notice that in traditional model, the request-response operations are pretty much sequential in nature. Thus, following can be observed:

  • Webserver Busy, Browser Idle: As the request is sent from browser, and webserver is busy processing the request, browser is idle.
  • Webserver Idle, Browser Busy: Similarly, as the response is transferred to browser, browser gets busy in rendering the page and webserver unable to help anymore in webpage processing.

 The objective is to have both web server and browser do work in parallel to reduce the webpage loading time. In other words, when web server is busy processing the request and generating the page, browser should as well work towards page rendering.

 

Pipeline-based Bigpipe Webpage Serving Model

To begin with, BigPipe is primarily a Javascript technology and, comes in form of a Javascript library which is loaded as one of the first libraries when facebook page loads. BigPipe represents a different approach to the webpage serving model wherein the webpage is broken into several chunks called as pagelets (diagram below), and these pagelets are pipelined into several execution stages within web server and browser. The BigPipe technology is an innovation with just the webpage serving process and brings about no change to how the web server or the browser works. Below diagram represents several chunk of data that may be coming from different data sources. These data represents pagelets.

fig representing pagelets in boxes with blue borderline

 

Below diagram represents parallel activities including page generation happening on web server and, at the same time, page rendering happening on browser in order. Each pagelet goes through these execution stages.

fig: Pipeline-based Parallel Webpage Serving Model

 

Following represents how the responses are processed by web server in Bigpipe webpage serving model.

fig: Webserver response in Bigpipe Model

 

The pagelet response that arrives to the browser looks like following in the diagram below. Upon arrival of the pagelet response, Bigpipe Javascript library does the following:

  • Downloads CSS resources mentioned in pagelet response (look the below diagram)
  • The pagelet is then, displayed by settings its div container innerHTML is set to pagelet HTML markup.
  • Once all pagelets get displayed, javascripts are then downloaded asynchronously, and executed.

fig: bigpipe pagelet code

For reading the same in greater detail, visit the Facebook Bigpipe page.

Opensource Bigpipe Implementations

Following are different opensource frameworks that could be used for one of your web projects:

  1. Open BigPipe Implementation
  2. Node.js BigPipe Implementation
  3. Drupal Bigpipe Implementation

References

  1. Facebook Bigpipe page
  2. Infoq article on facebook bigpipe

 

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

  • Is it possible to implement the Bigpipe concept into MVC architecture without using any framework in PHP?

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago