Using Blocks by AJAX to speed up a site

Two things that have a big impact on the time taken for a page to display are the number of separate network requests and big files.

Simply assigning Blocks by AJAX templates to all the blocks on a page will not speed it up and will almost certainly slow it down considerably because the page is now making even more network requests. To use Blocks By AJAX to speed up a site requires some thought and planning.

What you will be doing is replacing the creation and download of one or more blocks with the creation and download of a Blocks by AJAX marker, followed by a subsequent network request for the content of the block(s), then the creation of the block content on the server and the final download and rendering of the actual block content.

What you should be aiming for is to speed up the user perception of the initial rendering of a page by replacing the initial rendering of some well chosen blocks. Blocks that are currently expensive in server processing for the view, download bandwidth and browser resources, and that are not critical to the initial user experience of the page. 

You can assign such blocks a Blocks by AJAX template, so deferring the expensive processing of the view on both the server and in the browser until after the page has loaded. This processing still needs to be done later, but by judicious use of an AJAX template you can cut it out of the time to initially show the page to the user.

For example, the text and HTML for quite a large page could be 20k bytes in one network request. But a single medium resolution photograph could be that or more. An image gallery or slide show that does not already do lazy loading of images could have an overhead of loading tens of such images, each with a seperate network request. So, an obvious target for speeding up the initial display of a page is to delay the loading of a slideshow or gallery until the rest of the page is already shown. This will reduce the initial load time by a network request for each image or thumbnail and the download time of each image or thumbnail.

Candidates for ajax loading for speed should therefore be:

  • Blocks that consume a lot of server and/or browser resources.
  • Blocks that have a lot to load to the browser.
  • Blocks that are not part of the immediate experience you want users to have when the page loads.
  • Blocks that are not immediately visible - in tabs or scrolled down a little.

Even then, if you have several blocks on a page that you want to AJAX and are next to each other, it makes much more sense to put them in a stack and AJAX load the stack than it does to ajax load the blocks individually. That way, you only have one AJAX request to the server, not one for each block.

The perfect candidates for really speeding up a page load by use of Blocks by AJAX are:

  • A gallery or slider containing lots of big images that is below the first few paragraphs of text on a page.
  • A map, rss feed or social feed shown in a sidebar or below the first few paragraphs of text.
  • The content of tabs or accordions that are not immediately visible on page load. 

Page List Blocks

Page list blocks can be very expensive in server resources, but are still particularly awkward to deal with because a great deal of the processing in most page lists is made before the view, and so before the AJAX marker can be substituted.

To really speed up a page list you need to override the block controller and change the code to move the page search and select processing currently done before the view into a callback made from the view. This will make little difference to a regular block template, but a massive difference to an AJAX block template, because a big chunk of slow server processing is now deferred until after the initial page load, to when the AJAX call is made for the Page List block content. Also read Developing AJAX Templates.


Last updated: over a year ago