Drupal8.3 で提供された BigPipe の情報まとめ

1. Drupal BigPipe のインパクト
~体感速度の爆速化~
Drupal Business Consortium : DBCJ
池田秀一 Hidekazu Ikeda
２０１７年５月１９日時点

2. A) BigPipe とは何か
1. BigPipe とは何か – Facebook の技術手法
2. Facebook での個別実装と技術情報
B) Drupal での BigPipe
1. Module（外部部品） から、 Core（基本機能）へ
2. Drupal ８．３ での Drupal BigPipe
Drupal BigPipe

3. BigPipe とは何か
A) Facebookが、自社Webページの体感表示速度を圧倒的に向上
させる為に考えだした手法
LinkedIn（Microsoft社が買収済）のサイトも、BigPipe を採用
B) ２０１７年５月時点では、Drupal８．３ を採用するか、個別開発で実
装するしかありません。
OSS CMS 、商用CMS で、2017/05 時点で実装しているのは Drupal のみ
個別開発なら、「BigPipeを再現できるJSプラグイン」などはある。
https://github.com/seporaitis/bigpipe
BigPipeとは何か

4. BigPipeは、動的なWebページ配信システムの基本的な再設計
➢ 一般的な考え方は、ページレットと呼ばれる小さなチャンクにWebペー
ジを分解し、Webサーバとブラウザ内の複数の実行段階を通してパイ
プラインにそれらをすることです。これは最も最近のマイクロプロセッサ
によって実行されるパイプラインのようになります。複数の命令は、最高
のパフォーマンスを実現するために、プロセッサの異なる実行ユニット
によるパイプライン化されています。
➢ BigPipeは、既存のWebサービス提供プロセスの根本的な再設計です
が、それは、既存のWebブラウザまたはサーバーを変更する必要はあ
りません。それは、PHPとJavaScriptで完全に実装されています
BigPipeとは何か

5. Facebook は 2010年頃から、行っている体感速度向上の技法
Facebook での個別実装と技術情報は、以下を参照
https://www.facebook.com/notes/facebook-engineering/bigpipe-
pipelining-web-pages-for-high-performance/389414033919
https://blog.8-p.info/2010/42-facebook-bigpipe-tti
https://www.infoq.com/jp/news/2010/07/bigpipe-facebook-
optimize
Facebook BigPipe

6. LinkedIn は 2015年頃のサイトの再構築で、幾つかの新技術の採
用として、Facebook と同様な BigPipe も採用した。
◎ LinkedIn での BigPipe 記事
New technologies for the new LinkedIn home page
(2015.3.17)
https://engineering.linkedin.com/frontend/new-technologies-
new-linkedin-home-page
LinkedIn BigPipe

7.  Drupal BigPipe は、Drupal 8.3 で安定化した機能として提
供済
 Drupal の BigPipeモジュールは、Drupal8.0 ではモジュール（外部部品）扱いでした
 Drupal 8.1からDrupal 8 Core（中核機能部分） に実験的に含まれました。
 Drupal 8.2で BigPipe は、Beta版となり、基本機能で提供
 現時点で最新の Drupal 8.3では安定版として Drupal BigPipe は提供済です
 BigPipe の技術そのものは、 Facebookで考えられ公開されました。
https://www.drupal.org/docs/8/core/modules/bigpipe/overview
Drupal BigPipe
version history

8.  Drupal BigPipe は、２０１５年頃から話題となり、２０１６年末の
Drupal 8から機能として提供された
 ２０１５年末の Drupal8.0 ではモジュール（外部部品）扱い
 ２０１６年４月のDrupal 8.1からDrupal 8 Core（中核機能部分） に実験的に含まれました
 ２０１６年１０月のDrupal 8.2で BigPipe は、Beta版となり、基本機能として提供
 ２０１７年４月の最新の Drupal 8.3では安定版として Drupal BigPipe は提供済です
 BigPipe の技術そのものは、 Facebookで考えられ公開されました。
https://www.drupal.org/docs/8/core/modules/bigpipe/overview
Drupal BigPipe
time axis

9. ◎Acquia社の BigPipe 技術担当の講演
・Youtube動画
BigPipe:
The Architecture Behind the Fastest Version of Drupal Yet
[January 27, 2016]
https://www.youtube.com/watch?v=7Ap3OsdFA8U
・Webinar ：スライド
http://wimleers.com/talk-bigpipe-webinar/#/
Drupal BigPipe

10. LinkedIn での BigPipe 実装と、Drupal での BigPipe 実装では微妙に異なる。
Drupal 創設者である Dries氏は以下のように記載している。
BigPipe, no longer just for the top 50 websites (2015.11.27)
http://buytaert.net/bigpipe-no-longer-just-for-the-top-50-websites
----------------------- 該当部分を引用翻訳
LinkedIn の場合、ページ内にある要素を BigPipe 経由で送る場合は BigPipe 専用のコードを書
かなくてはいけない。だから、エラーにもつながりやすいし、すべての技術者が BigPipe に習熟
していなくてはならない。それに対して Drupal 8 では、 API の抽象化レベルが高いので Drupal
モジュールの開発者が BigPipe を理解している必要はない。Drupal 8 にわかっている（Drupal
が把握する必要のある）ことは、どのページ要素がキャッシュしにくい、または全くキャッシュでき
ないか、そしてどのページ要素が単独でレンダリングできるかということ。その把握した情報を
基に Drupal は BigPipe を使ってページ要素の配信を自動的に最適化する。
Drupal vs LinkedIn

11. Drupal8.3 での日本語での情報
http://www.webgogo.jp/blog/the-future-of-decoupled-drupal2
コスト（処理の手間と時間）のかかるコンポーネントを選択的にあとで処理し、それほどコスト
のかからない部分を先に送信するための手段だ。クライアントサイドのダイナミックなコンテン
ト置換のアプローチである BigPipe があれば、ページを段階的にレンダリングできる。まず、
ページの骨格がロードされ、そのあとで「先週いちばんよく聴いた曲」なり「現在再生中」なりと
いった高コスト（expensive）なコンポーネントがブラウザーに送られ、プレースホルダー（割り
当てスペースの枠組み）を埋める。このコンポーネント駆動型のアプローチを使えば、僕たち
にとっては両方の世界のいいとこどりになる。つまり、最初のインタラクションが瞬時に行える
非ブロッキングのユーザー インターフェイス、そしてテーマ レイヤーを活用しながらも Drupal
のページ全体をすばやく断片的にロードできるということだ。
デモ：
https://www.youtube.com/watch?v=JwzX0Qv6u3A
Drupal ８．３ BigPipe