Using AJAX blocks to speed up initial page loading.

Permalink Browser Info Environment
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.

For example, the text and HTML for quite a large page could be 20k bytes in one file. 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.

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 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. The result will be good for your visitors, good for the time for the initial load to complete and good for your Google ranking.

That is why the templates provided with Blocks by AJAX include so many image/gallery/slideshow blocks. The standard Slideshow block is particularly heavy on resources.

The down side is that blocks loaded by AJAX will not be indexed with the page by search engines. (In some cases, this may be what you want).

So it is important to make sure that any important text is loaded with the initial page.

Type: Discussion
Status: New
View Replies:
JohntheFish replied on at Permalink Reply
A bit more analysis on which block's initial page loading will benefit from Blocks by AJAX.

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).
JohntheFish replied on at Permalink Reply
The 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 is to modify the controller and view slightly.

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.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.