Under the Hood

Blocks by AJAX works by allowing the block controller to run as normal when the page/area is edited or initially rendered. Thus any css and script files loaded by the block controller (addHeaderItem etc.) will be included when the page is initially rendered. The Blocks by AJAX template then substitutes an AJAX loader for the block content when the block is viewed.

In the browser, the AJAX loader is then run to call a Concrete5 tool file. On the server, the tool re-creates the block, instantiates the controller and returns the normal view of just the block body without any headers or footers. Back in the browser, the block view is displayed and any scripts in the block view are then run.

Page loading

The time to initially load a page (or a block within a page) comprises 3 parts:

  1. The block controller php
  2. The block view php
  3. All the other files loaded with a block

A Blocks by AJAX template for a block has no impact on (1). The block controller is always run when a page is loaded. If a block has a slow php controller, a Blocks by AJAX template makes no difference.

A Blocks by AJAX template delays view processing until the AJAX part, so if a block has a slow php view (2), Blocks by AJAX can have a big difference on initial loading of a page. The view php still needs to run, but does not consume resources until the AJAX call is made.

Because view processing is delayed by a Blocks by AJAX template, any files also loaded by the view, such as jpegs in thumbnail lists or image lists for a gallery or slideshow, are delayed until the AJAX call, so Blocks by AJAX can also have a big impact on (3).

Expensive block controllers

A corollary of the above is that, if you have a block with a slow controller and you really want to speed up the initial page load, the trick to get the best out of Blocks by AJAX is to modify the page list controller and view slightly.

You need to change the relationship between a block's controller and view template by making the view template ask for slow data from the controller, rather than the controller feeding slow data to the view. That way the heavy data processing does not happen until the view actually needs it (ie, when the view is loaded by Blocks by AJAX.)

This usually requires taking the slow bulk of a block controller's view() method and putting it into a separate controller method, then calling back that method from the view template.

Now the controller does not do the work until the view needs it. Because the view processing is delayed until the AJAX call, the data is not requested from the controller until the AJAX call.

Such controller modifications are not provided with Blocks by AJAX. The above describes a technique that developers can use by overriding a block controller to make a minor change, then making a corresponding minor change to the view template for Blocks by AJAX.

As an example, a slow page list block that badly impacts time to first byte can be made to appear to load much faster by making such modifications to the block controller.

More Information

For deeper control of integration, Blocks by AJAX responds to a range of configuration settings and triggers both concrete5 and JavaScript events. These are detailed on the page Developing AJAX Templates.

Last updated: over a year ago