This document provides an overview of BigPipe in Drupal 8 and how it works to improve perceived page load performance. BigPipe sends the initial content quickly using small requests to fill in remaining parts, so the page appears interactive sooner. It works by caching page parts separately using cache metadata and lazy rendering. Placeholders are generated for non-cached parts and replaced later. This allows caching the base page for all users while dynamically filling in varying content like a shopping cart in the placeholders. Modules just need to provide proper cache metadata rather than complex configuration.

1. BigPipe: What have I learned
Radim Klaška, Developer @ Morpht.com & Drupal.cz

2. Intro
Wim Leers
&
Fabian Franz
Thank you!

3. D7 way
● Intro
D7 page handling
● Whole page is send as one chunk.
● Takes a long time to load everything.
● Limited options of DOM ordering vs. what’
s displayed

4. General info
● Intro
● D7 way
BigPipe: general idea
● One quick response with main part of the
page.
● Other small requests to fill in the gaps.

5. General info
● Intro
● D7 way
It's all about
performance
● Backend
○ server response time
● Frontend
○ often the slowest part
○ rendering DOM
○ loading assets (CSS, JS)

6. Performance
● Intro
● D7 way
● General info
Performance
vs.
Perceived performance
● How long does it take to generate the
page?
● How long does it take see your content?

7. Performance
● Intro
● D7 way
● General info
Measurements
● Time to First Byte
"Oh, that server responds quickly!" - Who
cares?

8. Performance Measurements
● Time to First Byte
"Oh, that server responds quickly!" - Who
cares?
● Time to Assets Prefetching
Load CSS linked at the beginning of the
DOM while still loading the rest of the
DOM.
● Intro
● D7 way
● General info

9. Performance Measurements
● Time to First Byte
"Oh, that server responds quickly!" - Who
cares?
● Time to Assets Prefetching
Load CSS linked at the beginning of the
DOM while still loading the rest of the
DOM.
● Time to interact
Not only clicking around, reading the
article is interaction too!
● Intro
● D7 way
● General info

10. Performance Measurements
● Time to First Byte
"Oh, that server responds quickly!" - Who
cares?
● Time to Assets Prefetching
Load CSS linked at the beginning of the
DOM while still loading the rest of the
DOM.
● Time to interact
Not only clicking around, reading the
article is interaction too!
● Page load time
Total load time, avoid extremes
● Intro
● D7 way
● General info

11. Performance
Usual optimizations
still matter
● Minification
● Aggreggation
● Fewer HTTP requests
● Intro
● D7 way
● General info

12. Performance
Whole chain has to be fast!

13. Performance
BigPipe is on the
intersection of backend and
frontend.
● Intro
● D7 way
● General info

14. How it works General idea
● Send most basic and cacheable info first
● Load the rest of the content later in
smaller pieces
● Intro
● D7 way
● General info
● Performance

15. It takes the same time
(Page Load Time) in the
end, but perceived
performance is much
better!
How it works
● Intro
● D7 way
● General info
● Performance

16. That's the general idea.
But how it works?
How it works
● Intro
● D7 way
● General info
● Performance

17. Good old Page cache
● Generate the page
How it works
● Intro
● D7 way
● General info
● Performance

18. Good old Page cache
● Generate the page
● Save the result in DB
How it works
● Intro
● D7 way
● General info
● Performance

19. Good old Page cache
● Generate the page
● Save the result in DB
● Lots of variations
How it works
● Intro
● D7 way
● General info
● Performance

20. D8 toolsHow it works
● Intro
● D7 way
● General info
● Performance

21. D8 tools
● Cache metadata
How it works
● Intro
● D7 way
● General info
● Performance

22. D8 tools
● Cache metadata
○ actually used everywhere in core
How it works
● Intro
● D7 way
● General info
● Performance

23. D8 tools
● Cache metadata
○ actually used everywhere in core
● Dynamic page cache
How it works
● Intro
● D7 way
● General info
● Performance

24. D8 tools
● Cache metadata
○ actually used everywhere in core
● Dynamic page cache
○ for authenticated users!
How it works
● Intro
● D7 way
● General info
● Performance

25. D8 tools
● Cache metadata
○ actually used everywhere in core
● Dynamic page cache
○ for authenticated users!
○ handles caching of parts of the page
How it works
● Intro
● D7 way
● General info
● Performance

26. D8 tools
● Cache metadata
○ actually used everywhere in core
● Dynamic page cache
○ for authenticated users!
○ handles caching of parts of the page
○ overhead - actually makes page
generation time
How it works
● Intro
● D7 way
● General info
● Performance

27. Cache metadata
● Cache tags
● Cache context
● Cache max-age
How it works
● Intro
● D7 way
● General info
● Performance

28. Cache tags
● data dependencies
How it works
● Intro
● D7 way
● General info
● Performance

29. Cache tags
● data dependencies
● editing content will automatically
invalidate proper caches
How it works
● Intro
● D7 way
● General info
● Performance

30. Cache context
● Rememeber block definitions? "Cache by
user / role..."
How it works
● Intro
● D7 way
● General info
● Performance

31. Cache context
● Rememeber block definitions? "Cache by
user / role..."
● this alters cachability of the whole page
(not only your block)
How it works
● Intro
● D7 way
● General info
● Performance

32. Cache context
● Rememeber block definitions? "Cache by
user / role..."
● this alters cachability of the whole page
(not only your block)
● you can define your own cache contexts
How it works
● Intro
● D7 way
● General info
● Performance

33. Cache max-age
● invalidation by time
How it works
● Intro
● D7 way
● General info
● Performance

34. Cache max-age
● invalidation by time
● default is permanent
How it works
● Intro
● D7 way
● General info
● Performance

35. Render APIHow it works
● Intro
● D7 way
● General info
● Performance

36. Render API
● lazy builders
How it works
● Intro
● D7 way
● General info
● Performance

37. Render API
● lazy builders
○ based on trivial variables (no objects)
How it works
● Intro
● D7 way
● General info
● Performance

38. Render API
● lazy builders
○ based on trivial variables (no objects)
● pieces of content can be generated in
isolation
How it works
● Intro
● D7 way
● General info
● Performance

39. Render API
● lazy builders
○ based on trivial variables (no objects)
● pieces of content can be generated in
isolation
● drupal_add_js() / drupal_add_css()
How it works
● Intro
● D7 way
● General info
● Performance

40. Render API
● lazy builders
○ based on trivial variables (no objects)
● pieces of content can be generated in
isolation
● drupal_add_js() / drupal_add_css()
● #attached
How it works
● Intro
● D7 way
● General info
● Performance

41. Example: Shopping cart
● varies by session
Example
● Intro
● D7 way
● General info
● Performance

42. Example: Shopping cart
● varies by session
● module provides cache metadata
Example
● Intro
● D7 way
● General info
● Performance
● How it works

43. Example: Shopping cart
● varies by session
● module provides cache metadata
● drupal figures out
○ which parts of the page can be
cached at what level
Example
● Intro
● D7 way
● General info
● Performance
● How it works

44. Example: Shopping cart
● varies by session
● module provides cache metadata
● drupal figures out
○ which parts of the page can be
cached at what level
○ automatically creates placeholders
for expansive content
Example
● Intro
● D7 way
● General info
● Performance
● How it works

45. Example: Shopping cart
● varies by session
● module provides cache metadata
● drupal figures out
○ which parts of the page can be
cached at what level
○ automatically creates placeholders
for expansive content
○ caches the base page and it’s parts
separately
○ replaces placeholders
Example
● Intro
● D7 way
● General info
● Performance
● How it works

46. Example: Shopping cart
Result is one cached page that can be served
to all users and variations of other context
specific pieces in dynamic page cache. These
will be used in placeholders on main page.
Example
● Intro
● D7 way
● General info
● Performance
● How it works

48. Do you want it?
● Complicated configuration…
● NO!
● Just enable the module ;-)
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

49. Any contradictions?
● Page can jump a little while loading.
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

50. Any contradictions?
● Page can jump a little while loading.
Surprise! Your 3G users see the same even
without BigPipe. Fix your CSS.
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

51. It's still experimental…
Test it!
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

52. Requirements
● No special config, just proper metadata
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

53. Requirements
● No special config, just proper metadata
● Ability to stream responses - no buffering
(Apache / Nginx)
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

54. Requirements
● No special config, just proper metadata
● Ability to stream responses - no buffering
(Apache / Nginx)
● JS for BigPipe to work at it's best,
degrades gracefully by switching streams
Use it
● Intro
● D7 way
● General info
● Performance
● How it works
● The mighty GIF
● Example

55. Demo

56. Q&A
@radimklaska / radim@klaska.net