Pipelining web pages for high performance

Attention: this module is experimental. Not recommended for live sites. Testing and feature requests are welcome to get a stable module.

This module is based on the Facebook's BigPipe functionality to serve pieces of pages instead of complete pages.

It requires the Jquery Update module to use the jQuery.live function and BigPipe most of the links but the ones that already have other functionality. You can integrate it with Drupal Chat and get the desired non-blinking effect.

What it does is to load a javascript "manifest" into a hidden iframe with the proper instructions of what is needed to do to update the current page and perform the necessary changes. Basically, it loads contents, scripts and styles dinamically.

Currently, most of the performance gain is on the client side. On the server, processing is almost the same as without BigPipe. This is intended to be improved by integrating with the Context module and find an intelligent way to or not to process certain stuff.

Bigpipe uses the Balupton's History Plugin in order to update the browser's URL. It works great on HTML5-compatible browsers, meanwhile on the others it just adds a hash (#) with the new URI.

Instructions

  1. Download and unzip the module under sites/all/modules. Please do not enable the module until I say that you can.
  2. Go to your theme and decide which regions of your page.tpl.php will be dynamic. Note that they aren't the same as blocks, but they can be a combination of blocks and other theme's variables. Certainly, the region where it appears the variable $content must be one of them. Each region must be enclosed by a div with a proper identifier. Example:
          <body>
            ...
            <div id="mainregion">
              <?php print $left; ?>
              <?php print $content; ?>
              <?php print $right; ?>
            </div>
            ...
            <div id="footer">
              <?php print $footer; ?>
            </div>
            ...
          </body>
       
  3. For each region, create a .tpl.php file and paste the entire div there.
    mytheme-mainregion.tpl.php:
          <div id="mainregion">
            <?php print $left; ?>
            <?php print $content; ?>
            <?php print $right; ?>
          </div>
       

    mytheme-footer.tpl.php:

          <div id="footer">
            <?php print $footer; ?>
          </div>
       

    Is better to use the mytheme- prefix to avoid duplicate templates, but is not mandatory.

  4. Replace the regions in page.tpl.php with their respective theme function and the parameter get_defined_vars(). This will split the template into regions and avoid multiple theme preprocessing.
          <body>
            ...
              <?php print theme('mytheme_mainregion', get_defined_vars()); ?>
            ...
              <?php print theme('mytheme_footer', get_defined_vars()); ?>
            ...
          </body>
       
  5. Edit (or create if it doesn't exist) the template.php file of your theme. Use the hook_theme as follows:
    <?php
         
    function mytheme_theme() {
            return array(
             
    'mytheme_mainregion' => array(
               
    arguments => array('bigpipe_vars' => NULL),
               
    'template' => 'mytheme-mainregion'// .tpl.php file
             
    ),
             
    'mytheme_footer' => array(
               
    arguments => array('bigpipe_vars' => NULL),
               
    'template' => 'mytheme-footer', // .tpl.php file
             
    ),
            );
          }
       
    ?>

    Add the following code to your template.php file, this will allow to pass page.tpl.php vars to the region templates:

    <?php
         
    function mytheme_preprocess(&$vars) {
            if(isset(
    $vars['bigpipe_vars'])) {
             
    $vars = $vars['bigpipe_vars'];
            }
          }
       
    ?>
  6. Go ahead and edit your mytheme.info file to tell BigPipe about your regions. Use the following sintax to define your regions (without the comments):
          bigpipe[mytheme_mainregion] = mainregion ; Remember: <div id="mainregion">
          bigpipe[mytheme_footer] = footer ; Remember: <div id="footer">
          ...
       
  7. It's the time, go to admin/build/modules and enable BigPipe.

As the use of get_defined_vars ahd hook_preprocess is a little tricky, is the best way I found to avoid re-processing.

Don't forget to rebuild your theme's registry if necessary.

Project Information

Downloads