Overview

The BigPipe module is included in Drupal core since Drupal 8.1, became stable in Drupal 8.3, and was added to the standard installation profile in Drupal 8.5.

The BigPipe technique was invented at Facebook.

It is strongly recommended to also enable the Dynamic Page Cache module that is included with Drupal core.

How it works

1. During rendering, the personalized parts are turned into placeholders.
2. With BigPipe disabled, Drupal uses the Single Flush strategy (aka "traditional") for replacing the placeholders. i.e. we don't send a response until we've replaced all placeholders.
3. The BigPipe module introduces a new strategy, that allows us to flush the initial page first, and then stream the replacements for the placeholders.
4. This results in hugely improved front-end/perceived performance (watch the 40-second screencast above).

Features

Faster with zero configuration! BigPipe is able to make things faster automatically thanks to Drupal's improved render pipeline & render API, and in particular thanks to the cacheability metadata and auto-placeholdering.

Ensuring a smooth visual page load experience

Because BigPipe lazily loads certain parts of the page, it could result in a jarring page load experience. Whether it does depends on your theme and the location of the lazily loaded content: in the demonstration screencast above, there is no jarring experience at all because the streamed/lazily loaded blocks appear one after the other, appending to an otherwise empty space.

That's the simplest solution: have the lazily loaded content appear in a space that is reserved for them, that avoids reflowing content.

But that's not always possible. In that case, you can customize the placeholder content in Drupal 10.1 and later and use this to reserve space for the injected component! For more information on this see the change record at https://www.drupal.org/node/3338948.

Alternatively, you can apply a "loading" animation to all BigPipe placeholders in your theme with some CSS — read "Quick Tip: Add a Loading Animation for BigPipe Content".

Relation to Page Cache & Dynamic Page Cache modules in Drupal core

• Page Cache (page_cache): no relation to BigPipe.
• Dynamic Page Cache (dynamic_page_cache): if a page is cached in the Dynamic Page Cache, BigPipe is able to send the main content much faster. It contains exactly the things that BigPipe still needs to do

Issue queue

http://drupal.org/project/issues/drupal?component=big_pipe.module

Related contributed modules

• Sessionless BigPipe: Accelerates Page Cache misses using the BigPipe technique.
• BigPipe demo: Demonstrates how BigPipe speeds up pages containing uncacheable/personalized parts.

See also

• The Drupal 8 render pipeline
• Cacheability of render arrays
• Auto-placeholdering
• Dynamic Page Cache module
• JavaScript API in Drupal 8
• Video: The Best Features of Drupal 8 - Bigpipe Caching
• Podcast: Using BigPipe to Achieve Incredible Site Speed in Drupal 8 with Wim Leers
• Podcast: "No More Stale Content" Drupal 8 Caching and Big Pipe with Wim Leers
• Blog post: "Quick Tip: Add a Loading Animation for BigPipe Content"